some tinkering

.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": {}
   }
 }

_old/index.html

@@ -29,7 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <link rel="stylesheet" type="text/css" href="dist/uhr-green.min.css" data-class="green" data-name="Grün"/>
     <link rel="stylesheet" type="text/css" href="dist/uhr-blue.min.css" data-class="blue" data-name="Blau"/>
     <link rel="stylesheet" type="text/css" href="dist/uhr-pink.min.css" data-class="pink" data-name="Pink"/>
-    <link rel="shortcut icon" type="image/png" href="resources/favicon.png"/>
+    <link rel="shortcut icon" type="image/png" href="../src/favicon.png"/>
     <link rel="apple-touch-icon-precomposed" href="resources/apple-touch-icon-precomposed.png"/>
     <script type="text/javascript" src="dist/libs.min.js"></script>
     <script type="text/javascript" src="dist/jquery.uhr.complete.min.js"></script>

_old/info/index.html

@@ -22,7 +22,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <link rel="stylesheet" type="text/css" href="../dist/uhr-black.min.css" data-class="black"/>
     <link rel="stylesheet" type="text/css" href="../dist/uhr-red.min.css" data-class="red"/>
     <link rel="stylesheet" type="text/css" href="info.css"/>
-    <link rel="shortcut icon" type="image/png" href="../resources/favicon.png"/>
+    <link rel="shortcut icon" type="image/png" href="../../src/favicon.png"/>
     <script type="text/javascript" src="../dist/libs.min.js"></script>
     <script type="text/javascript" src="../dist/jquery.uhr.base.min.js"></script>
     <script type="text/javascript">

_old/test/fastforward.html

@@ -29,7 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <link rel="stylesheet" type="text/css" href="../dist/uhr-green.min.css" data-class="green" data-name="Grün"/>
     <link rel="stylesheet" type="text/css" href="../dist/uhr-blue.min.css" data-class="blue" data-name="Blau"/>
     <link rel="stylesheet" type="text/css" href="../dist/uhr-pink.min.css" data-class="pink" data-name="Pink"/>
-    <link rel="shortcut icon" type="image/png" href="../resources/favicon.png"/>
+    <link rel="shortcut icon" type="image/png" href="../../src/favicon.png"/>
     <link rel="apple-touch-icon-precomposed" href="../resources/apple-touch-icon-precomposed.png"/>
     <script type="text/javascript" src="../dist/libs.min.js"></script>
     <script type="text/javascript" src="../dist/jquery.uhr.complete.min.js"></script>

src/app/app.component.html

@@ -1,20 +1,6 @@
-<!--The content below is only a placeholder and can be replaced.-->
+<span class="item dot dot1"></span>
-<div style="text-align:center">
+<span class="item dot dot2"></span>
-  <h1>
+<span class="item dot dot3"></span>
-    Welcome to {{title}}!
+<span class="item dot dot4"></span>
-  </h1>
+<div class="letterarea"></div>
-  <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+<div class="reflection"></div>
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-

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 <http://www.gnu.org/licenses/>.
+*/
+@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;
+//}

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 {
+export class AppComponent implements OnInit {
-  title = 'app';
+  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('<span class="item dot dot1"></span>');
+//   e.append('<span class="item dot dot2"></span>');
+//   e.append('<span class="item dot dot3"></span>');
+//   e.append('<span class="item dot dot4"></span>');
+//   e.append('<div class="letterarea"></div>');
+//   e.append('<div class="reflection"></div>');
+//   setWidth.bind(this)(this.options.width);
+//
+//   if (this.options.controls) {
+//     var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>');
+//     var content = $('<div class="content"></div>');
+//     controlpanel.append(content);
+//     // on/off switch
+//     var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this.id + '"></div>');
+//     toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this.id +
+//       '" checked="checked" />');
+//     toggleSwitch.append('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this.id + '">' +
+//       '<div class="onoffswitch-inner"></div>' + '<div class="onoffswitch-switch"></div>' + '</label>');
+//     content.append(toggleSwitch);
+//
+//     // time mode switch
+//     var modeSwitch = $('<div class="onoffswitch" id="uhr-modeswitch' + this.id + '"></div>');
+//     modeSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-modeswitch-checkbox' + this.id +
+//       '" checked="checked" />');
+//     modeSwitch.append('<label class="onoffswitch-label" for="uhr-modeswitch-checkbox' + this.id + '">' +
+//       '<div class="modeswitch-inner"></div>' + '<div class="onoffswitch-switch"></div>' +
+//       '</label>');
+//     content.append(modeSwitch);
+//     // language chooser
+//     if (uhrGlobals.languages.length > 1) {
+//       var languageChooser = $('<select id="uhr-languagechooser' + this.id + '"></select>');
+//       uhrGlobals.languages.forEach(function (item) {
+//         languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
+//       });
+//       content.append(languageChooser);
+//     }
+//
+//     // theme chooser
+//     if (uhrGlobals.themes.length > 1) {
+//       var themeChooser = $('<select id="uhr-themechooser' + this.id + '"></select>');
+//       uhrGlobals.themes.forEach(function (item) {
+//         themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>');
+//       });
+//       content.append(themeChooser);
+//     }
+//     var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '"></a>');
+//     closebutton.on('click', function () {
+//       $('#uhr-controlpanel' + this.id).hide('fast');
+//     }.bind(this));
+//     content.append(closebutton);
+//     e.after(controlpanel);
+//     controlpanel.hide();
+//     var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
+//     configlink.on('click', function () {
+//       toggleConfigScreen.bind(this)();
+//     }.bind(this));
+//     e.after(configlink);
+//   }
+// };

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;
+  }
+}

src/index.html

@@ -6,9 +6,9 @@
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/x-icon" href="favicon.png">
 </head>
 <body>
-  <app-root></app-root>
+  <div uhr></div>
 </body>
 </html>