done state
This commit is contained in:
Märt Kalmo
commit
1285bac4b8
11
.gitignore
vendored
Normal file
11
.gitignore
vendored
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
node_modules
|
||||||
|
|
||||||
|
|
||||||
|
/dist
|
||||||
|
/.settings
|
||||||
|
/.classpath
|
||||||
|
/.project
|
||||||
|
|
||||||
|
/.idea
|
||||||
|
*.iml
|
||||||
|
*.log
|
||||||
6
app/app.js
Normal file
6
app/app.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('app', []);
|
||||||
|
})();
|
||||||
|
|
||||||
33
app/board.ctrl.js
Normal file
33
app/board.ctrl.js
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('app').controller('BoardCtrl', Ctrl);
|
||||||
|
|
||||||
|
Ctrl.$inject = ['board'];
|
||||||
|
|
||||||
|
function Ctrl(board) {
|
||||||
|
var vm = this;
|
||||||
|
|
||||||
|
vm.state = {};
|
||||||
|
|
||||||
|
init();
|
||||||
|
|
||||||
|
vm.lightSwitchCallback = function (isOn) {
|
||||||
|
board.setLight(isOn).then(init);
|
||||||
|
};
|
||||||
|
|
||||||
|
vm.alarmSwitchCallback = function (isOn) {
|
||||||
|
board.setAlarm(isOn).then(init);
|
||||||
|
};
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
board.getBoardState().then(function (state) {
|
||||||
|
vm.state = state;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
||||||
|
|
||||||
40
app/board.srv.js
Normal file
40
app/board.srv.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('app').service('board', Srv);
|
||||||
|
|
||||||
|
Srv.$inject = ['$q', '$window'];
|
||||||
|
|
||||||
|
function Srv($q, $window) {
|
||||||
|
|
||||||
|
this.getBoardState = getBoardState;
|
||||||
|
this.setLight = setLight;
|
||||||
|
this.setAlarm = setAlarm;
|
||||||
|
|
||||||
|
function getBoardState() {
|
||||||
|
var state = JSON.parse($window.sessionStorage.getItem('BOARD-STATE'));
|
||||||
|
return $q.when(state ? state : {});
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLight(isOn) {
|
||||||
|
var state = getBoardState();
|
||||||
|
state.light = isOn;
|
||||||
|
saveState(state);
|
||||||
|
return $q.when();
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveState(state) {
|
||||||
|
$window.sessionStorage.setItem('BOARD-STATE', JSON.stringify(state));
|
||||||
|
}
|
||||||
|
|
||||||
|
function setAlarm(isOn) {
|
||||||
|
var state = getBoardState();
|
||||||
|
state.alarm = isOn;
|
||||||
|
saveState(state);
|
||||||
|
return $q.when();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
})();
|
||||||
3
app/switch.cmp.html
Normal file
3
app/switch.cmp.html
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<img class="switch"
|
||||||
|
ng-click="$ctrl.toggle()"
|
||||||
|
ng-class="{ on: $ctrl.isOn }"></img>
|
||||||
30
app/switch.cmp.js
Normal file
30
app/switch.cmp.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
templateUrl: 'app/switch.cmp.html',
|
||||||
|
controller: Controller,
|
||||||
|
bindings: {
|
||||||
|
onChange: '=',
|
||||||
|
initial: '<'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function Controller() {
|
||||||
|
this.toggle = toggle;
|
||||||
|
this.$onInit = $onInit;
|
||||||
|
|
||||||
|
function $onInit() {
|
||||||
|
this.isOn = this.initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggle() {
|
||||||
|
this.isOn = !this.isOn;
|
||||||
|
this.onChange(this.isOn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
angular.module('app').component('switch', options);
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
||||||
43
gulpfile.js
Normal file
43
gulpfile.js
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
var gulp = require('gulp');
|
||||||
|
var inject = require('gulp-inject');
|
||||||
|
var concat = require('gulp-concat');
|
||||||
|
var uglify = require('gulp-uglify');
|
||||||
|
var angularFilesort = require('gulp-angular-filesort');
|
||||||
|
var del = require('del');
|
||||||
|
|
||||||
|
var paths = {
|
||||||
|
code: './app/**/*.js',
|
||||||
|
codeMin: 'app.min.js',
|
||||||
|
statics: ['app/**/*.html', 'img/**/*.*', '*.css'],
|
||||||
|
dist: './dist',
|
||||||
|
index: './index.html'
|
||||||
|
};
|
||||||
|
|
||||||
|
gulp.task('default', ['copy-static'], function () {
|
||||||
|
|
||||||
|
var appScripts = gulp.src(paths.code)
|
||||||
|
.pipe(angularFilesort())
|
||||||
|
.pipe(concat(paths.codeMin))
|
||||||
|
.pipe(uglify())
|
||||||
|
.pipe(gulp.dest(paths.dist));
|
||||||
|
|
||||||
|
return gulp
|
||||||
|
.src(paths.index)
|
||||||
|
.pipe(gulp.dest(paths.dist))
|
||||||
|
.pipe(inject(appScripts, { relative: true }))
|
||||||
|
.pipe(gulp.dest(paths.dist));
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('copy-static', ['clean'], function() {
|
||||||
|
return gulp.src(paths.statics, { base: './' })
|
||||||
|
.pipe(gulp.dest(paths.dist));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('clean', function() {
|
||||||
|
return new Promise(function(resolve, reject) {
|
||||||
|
del(paths.dist, function() {
|
||||||
|
resolve();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
64
img/switch-off.svg
Normal file
64
img/switch-off.svg
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
version="1.1"
|
||||||
|
id="Capa_1"
|
||||||
|
x="0px"
|
||||||
|
y="0px"
|
||||||
|
width="400px"
|
||||||
|
height="400px"
|
||||||
|
viewBox="0 0 400 400"
|
||||||
|
style="enable-background:new 0 0 400 400;"
|
||||||
|
xml:space="preserve"
|
||||||
|
inkscape:version="0.91 r13725"
|
||||||
|
sodipodi:docname="round-done-button_off.svg"><metadata
|
||||||
|
id="metadata45"><rdf:RDF><cc:Work
|
||||||
|
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||||
|
id="defs43" /><sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="2560"
|
||||||
|
inkscape:window-height="1385"
|
||||||
|
id="namedview41"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="1.18"
|
||||||
|
inkscape:cx="204.10559"
|
||||||
|
inkscape:cy="164.51543"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="g3" /><g
|
||||||
|
id="g3"><path
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
id="path7"
|
||||||
|
d="M 199.996,0 C 89.713,0 0,89.72 0,200 0,310.28 89.713,400 199.996,400 310.279,400 400,310.28 400,200 400,89.72 310.279,0 199.996,0 Z m 0,373.77 C 104.18,373.77 26.23,295.816 26.23,200 c 0,-95.817 77.949,-173.769 173.766,-173.769 95.817,0 173.771,77.953 173.771,173.769 10e-4,95.816 -77.955,173.77 -173.771,173.77 z" /></g><g
|
||||||
|
id="g11" /><g
|
||||||
|
id="g13" /><g
|
||||||
|
id="g15" /><g
|
||||||
|
id="g17" /><g
|
||||||
|
id="g19" /><g
|
||||||
|
id="g21" /><g
|
||||||
|
id="g23" /><g
|
||||||
|
id="g25" /><g
|
||||||
|
id="g27" /><g
|
||||||
|
id="g29" /><g
|
||||||
|
id="g31" /><g
|
||||||
|
id="g33" /><g
|
||||||
|
id="g35" /><g
|
||||||
|
id="g37" /><g
|
||||||
|
id="g39" /></svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
47
img/switch-on.svg
Normal file
47
img/switch-on.svg
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="400px" height="400px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M199.996,0C89.713,0,0,89.72,0,200s89.713,200,199.996,200S400,310.28,400,200S310.279,0,199.996,0z M199.996,373.77
|
||||||
|
C104.18,373.77,26.23,295.816,26.23,200c0-95.817,77.949-173.769,173.766-173.769c95.817,0,173.771,77.953,173.771,173.769
|
||||||
|
C373.768,295.816,295.812,373.77,199.996,373.77z"/>
|
||||||
|
<path d="M272.406,134.526L169.275,237.652l-41.689-41.68c-5.123-5.117-13.422-5.12-18.545,0.003
|
||||||
|
c-5.125,5.125-5.125,13.425,0,18.548l50.963,50.955c2.561,2.558,5.916,3.838,9.271,3.838s6.719-1.28,9.279-3.842
|
||||||
|
c0.008-0.011,0.014-0.022,0.027-0.035L290.95,153.071c5.125-5.12,5.125-13.426,0-18.546
|
||||||
|
C285.828,129.402,277.523,129.402,272.406,134.526z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
35
index.html
Normal file
35
index.html
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="et" ng-app="app">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Ng1ts</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div ng-controller="BoardCtrl as vm">
|
||||||
|
|
||||||
|
Light: <switch initial="vm.state.light"
|
||||||
|
on-change="vm.lightSwitchCallback"></switch>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
Alarm: <switch initial="vm.state.alarm"
|
||||||
|
on-change="vm.alarmSwitchCallback"></switch>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
|
||||||
|
|
||||||
|
<!-- inject:js -->
|
||||||
|
<script src="app/app.js"></script>
|
||||||
|
<script src="app/board.ctrl.js"></script>
|
||||||
|
<script src="app/board.srv.js"></script>
|
||||||
|
<script src="app/switch.cmp.js"></script>
|
||||||
|
<!-- endinject -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
17
package.json
Normal file
17
package.json
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"name": "ng1comp",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"serve": "http-server ./dist -a localhost -p 3000",
|
||||||
|
"build": "gulp"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"del": "^1.1.1",
|
||||||
|
"gulp": "^3.9.1",
|
||||||
|
"gulp-angular-filesort": "^1.1.1",
|
||||||
|
"gulp-concat": "^2.6.1",
|
||||||
|
"gulp-inject": "^4.2.0",
|
||||||
|
"gulp-uglify": "^2.0.0",
|
||||||
|
"http-server": "^0.9.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
17
styles.css
Normal file
17
styles.css
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
|
||||||
|
.switch {
|
||||||
|
vertical-align: middle;
|
||||||
|
text-decoration: none;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
content: url('img/switch-off.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch.on {
|
||||||
|
content: url('img/switch-on.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: arial, sans-serif;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user