done state
This commit is contained in:
Märt Kalmo
commit
1285bac4b8
|
|
@ -0,0 +1,11 @@
|
|||
node_modules
|
||||
|
||||
|
||||
/dist
|
||||
/.settings
|
||||
/.classpath
|
||||
/.project
|
||||
|
||||
/.idea
|
||||
*.iml
|
||||
*.log
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('app', []);
|
||||
})();
|
||||
|
||||
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
|
||||
|
|
@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<img class="switch"
|
||||
ng-click="$ctrl.toggle()"
|
||||
ng-class="{ on: $ctrl.isOn }"></img>
|
||||
|
|
@ -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);
|
||||
|
||||
})();
|
||||
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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>
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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