dom and info

kubagp1 · Sep 29, 2021 · 81d4f6f · 81d4f6f
1 parent 62f8f6a
commit 81d4f6f
Show file tree

Hide file tree

Showing 6 changed files with 193 additions and 17 deletions.
diff --git a/src/App.ts b/src/App.ts
@@ -1,25 +1,25 @@
 import Timetable from './timetable'
+import DOM from './dom'
+import { DOMUpdate } from './dom'
+import Info from './info'
 
 interface App {
-  dom: {
-    clock: HTMLDivElement
-    progressInfo: HTMLDivElement
-    progressBar: HTMLDivElement
-  }
   timetable: Timetable
+  dom: DOM
+  info: Info
   loopInterval: NodeJS.Timer
   timeOffset: number
 }
 
+function secondsSinceMidnight(): number {
+  return (<any>new Date() - <any>new Date().setHours(0, 0, 0, 0)) / 1000
+}
+
 class App {
   constructor() {
-    this.dom = {
-      clock: document.querySelector('.clock') as HTMLDivElement,
-      progressInfo: document.querySelector('.progress-info') as HTMLDivElement,
-      progressBar: document.querySelector('.progress-filled') as HTMLDivElement
-    }
-
     this.timetable = new Timetable()
+    this.dom = new DOM()
+    this.info = new Info(this.timetable)
 
     this.loopInterval = setInterval(this.loop.bind(this), 1000)
 
@@ -33,11 +33,11 @@ class App {
 
     const targetTime = hours * 60 * 60 + minutes * 60
 
-    this.timeOffset = targetTime - ((Date.now() / 1000) % 86400)
+    this.timeOffset = targetTime - secondsSinceMidnight()
   }
 
   private getTime(): number {
-    return ((Date.now() / 1000) % 86400) + this.timeOffset
+    return (secondsSinceMidnight() + this.timeOffset) % 86400
   }
 
   private loop() {
@@ -46,6 +46,21 @@ class App {
       /* @ts-ignore */
       this.timeOffset += this._debugFastForward
     }
+
+    const time = this.getTime()
+
+    var DOMUpdate: DOMUpdate = {}
+
+    DOMUpdate.hours = Math.floor(time / 3600)
+    DOMUpdate.minutes = Math.floor((time / 60) % 60)
+      .toString()
+      .padStart(2, '0')
+
+    DOMUpdate.progress = this.timetable.getProgress(time)
+
+    DOMUpdate.info = this.info.generate(time)
+
+    this.dom.update(DOMUpdate)
   }
 }
 

diff --git a/src/dom/index.ts b/src/dom/index.ts
@@ -0,0 +1,47 @@
+export interface DOMUpdate {
+  hours?: string | number
+  minutes?: string | number
+  progress?: number
+  info?: string
+}
+
+export default class DOM {
+  private dom: {
+    clock: HTMLDivElement
+    hours: HTMLSpanElement
+    minutes: HTMLSpanElement
+    progressInfo: HTMLDivElement
+    progressBar: HTMLDivElement
+  }
+
+  constructor() {
+    this.dom = {
+      clock: document.querySelector('.clock') as HTMLDivElement,
+      hours: document.querySelector('#hours') as HTMLSpanElement,
+      minutes: document.querySelector('#minutes') as HTMLSpanElement,
+      progressInfo: document.querySelector('.progress-info') as HTMLDivElement,
+      progressBar: document.querySelector('.progress-filled') as HTMLDivElement
+    }
+  }
+
+  public update(update: DOMUpdate): void {
+    if (update.hours !== undefined) {
+      this.dom.hours.innerText = update.hours.toString()
+    }
+
+    if (update.minutes !== undefined) {
+      this.dom.minutes.innerText = update.minutes.toString()
+    }
+
+    if (update.progress !== undefined) {
+      this.dom.progressBar.style.setProperty(
+        '--width',
+        `${(update.progress * 100).toString()}%`
+      )
+    }
+
+    if (update.info !== undefined) {
+      this.dom.progressInfo.innerText = update.info
+    }
+  }
+}
diff --git a/src/index.html b/src/index.html
@@ -10,7 +10,9 @@
   </head>
   <body>
     <div class="container">
-      <div class="clock">21:37</div>
+      <div class="clock">
+        <span id="hours"></span>:<span id="minutes"></span>
+      </div>
       <div class="progress-container">
         <div class="progress-filled"></div>
         <div class="progress-info">Lorem ipsum 34 amet</div>

diff --git a/src/info/index.ts b/src/info/index.ts
@@ -0,0 +1,110 @@
+import Timetable from '../timetable'
+
+const HOURS_GRAMMAR: Grammar = {
+  singular: 'godzina',
+  plural: 'godziny',
+  pluralGenitive: 'godzin'
+}
+
+const MINUTES_GRAMMAR: Grammar = {
+  singular: 'minuta',
+  plural: 'minuty',
+  pluralGenitive: 'minut'
+}
+
+const SECONDS_GRAMMAR: Grammar = {
+  singular: 'sekunda',
+  plural: 'sekundy',
+  pluralGenitive: 'sekund'
+}
+
+const END_GRAMMAR: Grammar = {
+  singular: 'a',
+  plural: 'y',
+  pluralGenitive: 'o'
+}
+
+interface Grammar {
+  singular: string
+  plural: string
+  pluralGenitive: string
+}
+
+function grammar(n: number, grammar: Grammar): string {
+  n = Math.abs(n)
+  if (n == 1) return grammar.singular
+  if (n % 10 > 4 || n % 10 < 2 || (n % 100 < 15 && n % 100 > 11))
+    return grammar.pluralGenitive
+  return grammar.plural
+}
+
+export default class Info {
+  constructor(private timetable: Timetable) {}
+
+  private humanizeTime(time: number): string {
+    const hours = parseInt(new Date(time * 1000).toISOString().substr(11, 2))
+    const minutes = parseInt(new Date(time * 1000).toISOString().substr(14, 2))
+    const seconds = parseInt(new Date(time * 1000).toISOString().substr(17, 2))
+
+    if (hours > 0 && minutes > 0)
+      return `${grammar(hours, END_GRAMMAR)} ${hours} ${grammar(
+        hours,
+        HOURS_GRAMMAR
+      )} i ${minutes} ${grammar(minutes, MINUTES_GRAMMAR)}`
+    else if (hours > 0 && seconds > 0)
+      return `${grammar(hours, END_GRAMMAR)} ${hours} ${grammar(
+        hours,
+        HOURS_GRAMMAR
+      )} i ${seconds} ${grammar(seconds, SECONDS_GRAMMAR)}`
+    else if (hours > 0)
+      return `${grammar(hours, END_GRAMMAR)} ${hours} ${grammar(
+        hours,
+        HOURS_GRAMMAR
+      )}`
+    else if (minutes > 0 && seconds > 0)
+      return `${grammar(minutes, END_GRAMMAR)} ${minutes} ${grammar(
+        minutes,
+        MINUTES_GRAMMAR
+      )} i ${seconds} ${grammar(seconds, SECONDS_GRAMMAR)}`
+    else if (minutes > 0)
+      return `${grammar(minutes, END_GRAMMAR)} ${minutes} ${grammar(
+        minutes,
+        MINUTES_GRAMMAR
+      )}`
+    else
+      return `${grammar(seconds, END_GRAMMAR)} ${seconds} ${grammar(
+        seconds,
+        SECONDS_GRAMMAR
+      )}`
+  }
+
+  private generateSinceLessonStart(time: number) {
+    return `Od początku lekcji minęł${this.humanizeTime(
+      this.timetable.secondsSinceLessonStart(time)
+    )}`
+  }
+
+  private generateToEndOfLesson(time: number) {
+    return `Do końca lekcji pozostał${this.humanizeTime(
+      this.timetable.secondsToEndOfLesson(time)
+    )}`
+  }
+
+  private generateToNextLessonStart(time: number) {
+    return `Do końca przerwy pozostał${this.humanizeTime(
+      this.timetable.secondsToNextLessonStart(time)
+    )}`
+  }
+
+  public generate(time: number): string {
+    if (this.timetable.onLesson(time)) {
+      if (this.timetable.getProgress(time) < 1 / 3) {
+        return this.generateSinceLessonStart(time)
+      } else {
+        return this.generateToEndOfLesson(time)
+      }
+    } else {
+      return this.generateToNextLessonStart(time)
+    }
+  }
+}
diff --git a/src/style.less b/src/style.less
@@ -48,9 +48,11 @@ body {
       background-color: var(--progress-filled-color);
       border-right-color: var(--progress-filled-tip);
 
-      width: 60%;
+      width: var(--width);
       height: 100%;
 
+      transition: width linear 1s;
+
       border-right-width: 5px;
       border-right-style: solid;
 

diff --git a/src/timetable/index.ts b/src/timetable/index.ts
@@ -132,7 +132,7 @@ class Timetable {
     }
   }
 
-  public secondsFromLessonBeggining(absoluteSeconds: number) {
+  public secondsSinceLessonStart(absoluteSeconds: number) {
     const seconds = this.getRelativeTime(absoluteSeconds)
 
     if (this.onBreak(absoluteSeconds)) {
@@ -144,7 +144,7 @@ class Timetable {
     return seconds - latestLesson.relativeStart
   }
 
-  public secondsToNextLesson(absoluteSeconds: number) {
+  public secondsToNextLessonStart(absoluteSeconds: number) {
     const seconds = this.getRelativeTime(absoluteSeconds)
 
     if (this.onLesson(absoluteSeconds)) {