diff --git a/.angular-cli.json b/.angular-cli.json
index 95ed7c1..2417523 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -19,7 +19,7 @@
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
- "styles.css"
+ "styles.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
@@ -54,7 +54,7 @@
}
},
"defaults": {
- "styleExt": "css",
+ "styleExt": "scss",
"component": {}
}
}
diff --git a/_old/index.html b/_old/index.html
index 68deb84..5aacd31 100644
--- a/_old/index.html
+++ b/_old/index.html
@@ -29,7 +29,7 @@ along with this program. If not, see .
-
+
diff --git a/_old/info/index.html b/_old/info/index.html
index fb813ec..c72b48c 100644
--- a/_old/info/index.html
+++ b/_old/info/index.html
@@ -22,7 +22,7 @@ along with this program. If not, see .
-
+
diff --git a/src/app/app.component.css b/src/app/app.component.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 46d517b..a7a7ced 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,20 +1,6 @@
-
-
-
- Welcome to {{title}}!
-
-
-
Here are some links to help you start:
-
-
+
+
+
+
+
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
new file mode 100644
index 0000000..6c012b7
--- /dev/null
+++ b/src/app/app.component.scss
@@ -0,0 +1,242 @@
+/*
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see .
+*/
+@font-face {
+ font-family: 'Uhrenfont';
+ src: url('../../_old/resources/uhr.woff') format('woff');
+}
+
+:host(.uhr) {
+ font-family: 'Uhrenfont', sans-serif;
+ position: relative;
+ margin: 0;
+ transition: background-color 0.5s;
+ .reflection {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: radial-gradient(225em 45em at 160% 0, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0) 40%) no-repeat scroll;
+ display: block;
+ margin: 0.15em;
+ }
+ .letterarea {
+ display: block;
+ position: absolute;
+ top: 12%;
+ bottom: 12%;
+ left: 12%;
+ right: 12%;
+ overflow: hidden;
+ font-size: 200%;
+ }
+}
+
+.item {
+ transition: box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s;
+}
+
+.dot {
+ position: absolute;
+ display: block;
+ height: 0;
+ width: 0;
+ border: 0.2em solid;
+ border-radius: 1em;
+}
+
+.dot.active {
+ border-color: #eee;
+ box-shadow: 0 0 0.2em #eee;
+}
+
+.dot1 {
+ top: 3.75%;
+ left: 3.75%;
+}
+
+.dot2 {
+ top: 3.75%;
+ right: 3.75%;
+}
+
+.dot3 {
+ bottom: 3.75%;
+ right: 3.75%;
+}
+
+.dot4 {
+ bottom: 3.75%;
+ left: 3.75%;
+}
+
+.letter {
+ height: 10%;
+ width: 9.0909%;
+ padding: 0;
+ margin: 0;
+ display: inline-block;
+ text-align: center;
+ line-height: 160%;
+}
+
+.letter.active {
+ color: #eee;
+ text-shadow: 0 0 0.2em #eee;
+}
+
+//.onoffswitch {
+// position: relative;
+// width: 86px;
+// margin: 1em;
+// -webkit-user-select: none;
+// -moz-user-select: none;
+// -ms-user-select: none;
+//}
+//
+//.onoffswitch-checkbox {
+// display: none;
+//}
+//
+//.onoffswitch-label {
+// display: block;
+// overflow: hidden;
+// cursor: pointer;
+// border: 2px solid #999;
+// border-radius: 50px;
+//}
+//
+//.onoffswitch-inner, .modeswitch-inner {
+// width: 200%;
+// margin-left: -100%;
+// -moz-transition: margin 0.3s ease-in 0s;
+// -webkit-transition: margin 0.3s ease-in 0s;
+// -o-transition: margin 0.3s ease-in 0s;
+// transition: margin 0.3s ease-in 0s;
+//}
+//
+//.onoffswitch-inner:before, .onoffswitch-inner:after, .modeswitch-inner:before, .modeswitch-inner:after {
+// float: left;
+// width: 50%;
+// height: 24px;
+// padding: 0;
+// line-height: 24px;
+// font-size: 18px;
+// color: white;
+// font-weight: bold;
+// -moz-box-sizing: border-box;
+// -webkit-box-sizing: border-box;
+// box-sizing: border-box;
+//}
+//
+//.onoffswitch-inner:before {
+// content: "EIN";
+// padding-left: 12px;
+// color: #eee;
+// transition: background-color 0.5s;
+//}
+//
+//.onoffswitch-inner:after {
+// content: "AUS";
+// padding-right: 12px;
+// background-color: #eee;
+// color: #999;
+// text-align: right;
+//}
+//
+//.onoffswitch-switch {
+// width: 30px;
+// margin: -3px;
+// background: #fff;
+// border: 2px solid #999;
+// border-radius: 50px;
+// position: absolute;
+// top: 0;
+// bottom: 0;
+// right: 58px;
+// -moz-transition: all 0.3s ease-in 0s;
+// -webkit-transition: all 0.3s ease-in 0s;
+// -o-transition: all 0.3s ease-in 0s;
+// transition: all 0.3s ease-in 0s;
+//}
+//
+//.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
+//.onoffswitch-checkbox:checked + .onoffswitch-label .modeswitch-inner {
+// margin-left: 0;
+//}
+//
+//.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+// right: 0;
+//}
+//
+//.modeswitch-inner:before {
+// content: "MIN";
+// padding-left: 12px;
+// background-color: #fff;
+// color: #000;
+//}
+//
+//.modeswitch-inner:after {
+// content: "SEC";
+// padding-right: 12px;
+// background-color: #fff;
+// color: #000;
+// text-align: right;
+//}
+//
+//a.uhr-configlink {
+// cursor: pointer;
+// background: url("../resources/settings.png") no-repeat;
+// width: 24px;
+// height: 24px;
+// display: inline-block;
+// margin: 2px;
+// vertical-align: top;
+//}
+//
+//.uhr-controlpanel {
+// border-radius: 0.5em;
+// box-shadow: 0 0 1em black;
+// background-color: #fff;
+// display: inline-block;
+// padding: 0.5em;
+// position: sticky;
+// bottom: 0;
+// margin-left: 1em;
+//}
+//
+//.uhr-controlpanel .content {
+// position: relative;
+//}
+//
+//a.uhr-closecontrolpanel {
+// cursor: pointer;
+// display: inline-block;
+// position: absolute;
+// right: 0;
+// top: -1em;
+// width: 24px;
+// height: 24px;
+// background: url("../resources/close.png") no-repeat;
+//}
+//
+//#disclaimer {
+// font-size: 0.5em;
+//}
+//
+//#disclaimer a {
+// color: #444;
+// text-decoration: underline;
+//}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b0f672..305c831 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,10 +1,93 @@
-import { Component } from '@angular/core';
+import {Component, ElementRef, OnInit} from '@angular/core';
@Component({
- selector: 'app-root',
+ selector: '[uhr]',
templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
+ styleUrls: ['./app.component.scss']
})
-export class AppComponent {
- title = 'app';
+export class AppComponent implements OnInit {
+ constructor(private elementRef: ElementRef) {
+
+ }
+
+ ngOnInit(): void {
+ this.elementRef.nativeElement.classList.add('uhr');
+ }
}
+
+// var setWidth = function () {
+// };
+// var $ = function (p) {
+// return {
+// append: (a) => ({}),
+// on: (a, b) => ({}),
+// hide: (a?) => ({})
+// };
+// };
+// var uhrGlobals = {languages: [], themes: []};
+// var toggleConfigScreen = function () {
+// };
+// var setupHTML = function setupHTML() {
+// var e = this.element;
+// // Base clock area
+// e.addClass('uhr');
+// e.empty();
+// e.append('');
+// e.append('');
+// e.append('');
+// e.append('');
+// e.append('');
+// e.append('');
+// setWidth.bind(this)(this.options.width);
+//
+// if (this.options.controls) {
+// var controlpanel = $('');
+// var content = $('');
+// controlpanel.append(content);
+// // on/off switch
+// var toggleSwitch = $('');
+// toggleSwitch.append('');
+// toggleSwitch.append('');
+// content.append(toggleSwitch);
+//
+// // time mode switch
+// var modeSwitch = $('');
+// modeSwitch.append('');
+// modeSwitch.append('');
+// content.append(modeSwitch);
+// // language chooser
+// if (uhrGlobals.languages.length > 1) {
+// var languageChooser = $('');
+// uhrGlobals.languages.forEach(function (item) {
+// languageChooser.append('');
+// });
+// content.append(languageChooser);
+// }
+//
+// // theme chooser
+// if (uhrGlobals.themes.length > 1) {
+// var themeChooser = $('');
+// uhrGlobals.themes.forEach(function (item) {
+// themeChooser.append('');
+// });
+// content.append(themeChooser);
+// }
+// var closebutton = $('');
+// closebutton.on('click', function () {
+// $('#uhr-controlpanel' + this.id).hide('fast');
+// }.bind(this));
+// content.append(closebutton);
+// e.after(controlpanel);
+// controlpanel.hide();
+// var configlink = $('');
+// configlink.on('click', function () {
+// toggleConfigScreen.bind(this)();
+// }.bind(this));
+// e.after(configlink);
+// }
+// };
diff --git a/src/app/langs/lang-de.ts b/src/app/langs/lang-de.ts
new file mode 100644
index 0000000..d6a2444
--- /dev/null
+++ b/src/app/langs/lang-de.ts
@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) Schweizerische Bundesbahnen SBB, 2017.
+ */
+
+let es_ist = {1: [1, 2, 4, 5, 6]};
+let uhr = {10: [9, 10, 11]};
+let nach = {4: [8, 9, 10, 11]};
+let vor = {4: [1, 2, 3]};
+let halb = {5: [1, 2, 3, 4]};
+let fuenf = {1: [8, 9, 10, 11]};
+let zehn = {2: [1, 2, 3, 4]};
+let viertel = {3: [5, 6, 7, 8, 9, 10, 11]};
+let zwanzig = {2: [5, 6, 7, 8, 9, 10, 11]};
+let dreiviertel = {3: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]};
+
+export class LangDe implements Lang {
+ readonly code = 'de';
+ readonly version = 2;
+ readonly name = 'Deutsch';
+ readonly letterboard = new Letterboard([
+ 'ESKISTAFÜNF',
+ 'ZEHNZWANZIG',
+ 'DREIVIERTEL',
+ 'VORFUNKNACH',
+ 'HALBAELFÜNF',
+ 'EINSXAMZWEI',
+ 'DREIPMJVIER',
+ 'SECHSNLACHT',
+ 'SIEBENZWÖLF',
+ 'ZEHNEUNKUHR'
+ ]);
+ readonly permanent = es_ist;
+ readonly minutes = {
+ '0,1,2,3,4': uhr,
+ '5,6,7,8,9': [fuenf, nach],
+ '10,11,12,13,14': [zehn, nach],
+ '15,16,17,18,19': [viertel, nach],
+ '20,21,22,23,24': [zwanzig, nach],
+ '25,26,27,28,29': [fuenf, vor, halb],
+ '30,31,32,33,34': halb,
+ '35,36,37,38,39': [fuenf, nach, halb],
+ '40,41,42,43,44': [zwanzig, vor],
+ '45,46,47,48,49': dreiviertel,
+ '50,51,52,53,54': [zehn, vor],
+ '55,56,57,58,59': [fuenf, vor]
+ };
+ readonly hours = {
+ '0,12': {9: [7, 8, 9, 10, 11]},
+ '1,13': {6: [1, 2, 3, 4]},
+ '2,14': {6: [8, 9, 10, 11]},
+ '3,15': {7: [1, 2, 3, 4]},
+ '4,16': {7: [8, 9, 10, 11]},
+ '5,17': {5: [8, 9, 10, 11]},
+ '6,18': {8: [1, 2, 3, 4, 5]},
+ '7,19': {9: [1, 2, 3, 4, 5, 6]},
+ '8,20': {8: [8, 9, 10, 11]},
+ '9,21': {10: [4, 5, 6, 7]},
+ '10,22': {10: [1, 2, 3, 4]},
+ '11,23': {5: [6, 7, 8]}
+ };
+}
+
+interface Lang {
+ readonly code: string;
+ readonly version: number;
+ readonly name: string;
+ readonly letterboard: Letterboard;
+ readonly permanent?: Definition;
+ readonly minutes: Definition;
+ readonly hours: Definition;
+
+}
+
+declare type Definition = any;
+
+class Letterboard {
+ public readonly letters: string[];
+
+ constructor(letters: string[]) {
+ if (letters.length !== 10) {
+ throw new Error(`invalid number of lines: ${letters.length}`);
+ }
+ letters.forEach((line, index) => {
+ if (line.length !== 10) {
+ throw new Error(`invalid number of letters in line ${index + 1}: ${line.length}`);
+ }
+ });
+ this.letters = letters;
+ }
+}
diff --git a/src/favicon.ico b/src/favicon.ico
deleted file mode 100644
index 8081c7c..0000000
Binary files a/src/favicon.ico and /dev/null differ
diff --git a/_old/resources/favicon.png b/src/favicon.png
similarity index 100%
rename from _old/resources/favicon.png
rename to src/favicon.png
diff --git a/src/index.html b/src/index.html
index 35f931f..796cfa5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,9 +6,9 @@
-
+
-
+