Added clock option (Resolves #80)

frontend/static/css/general.css

@@ -398,7 +398,9 @@ header {
 	height: var(--header-height);
 
 	display: flex;
+	justify-content: space-between;
 	align-items: center;
+	gap: 1rem;
 
 	padding: .25rem calc(var(--dyn-spacing) + .75rem);
 	border-bottom-left-radius: 6px;

frontend/static/css/reminders.css

@@ -1,7 +1,7 @@
 /*  */
 /* Nav collapse button */
 /*  */
-header > div {
+header > div:first-child {
 	transform: translateX(-3.8rem);
 
 	display: flex;
@@ -64,6 +64,25 @@ header img:hover {
 	justify-content: flex-end;
 }
 
+/*  */
+/* Clock */
+/*  */
+#clock-container {
+	display: flex;
+	flex-direction: column;
+}
+
+#clock-time {
+	text-align: right;
+	font-weight: bold;
+	font-size: 1.5rem;
+}
+
+#clock-date {
+	text-align: right;
+	font-size: .9rem;
+}
+
 /*  */
 /* Nav */
 /*  */
@@ -181,7 +200,7 @@ nav > div > button {
 }
 
 @media (max-width: 34rem) {
-	header > div {
+	header > div:first-child {
 		transform: translateX(0);
 	}
 

frontend/static/css/settings.css

@@ -84,3 +84,13 @@
 		background-color: darkblue;
 	}
 }
+
+@media (max-width: 22rem) {
+	#clock-container {
+		display: none;
+	}
+	
+	#clock-setting-row {
+		display: none;
+	}
+}

frontend/static/js/general.js

@@ -56,7 +56,8 @@ const defaultValues = {
 	sorting_static: 'title',
 	sorting_templates: 'title',
 	wide_library_view: false,
-	allow_new_accounts_cache: true
+	allow_new_accounts_cache: true,
+	show_clock: 'no'
 }
 
 /**

frontend/static/js/reminders.js

@@ -4,6 +4,11 @@ const reminderTypes = {
     template: document.getElementById('template-tab')
 }
 
+const clockElements = {
+    time: document.querySelector('#clock-time'),
+    date: document.querySelector('#clock-date')
+}
+
 const infoClasses = [
     'show-add-reminder', 'show-add-template', 'show-add-static-reminder',
     'show-edit-reminder', 'show-edit-template', 'show-edit-static-reminder'
@@ -16,7 +21,7 @@ function showWindow(id) {
             'show-window',
             'inter-window-ani'
         )
-        
+
         document.body.onkeydown = e => {
             if (
                 e.key === '/'
@@ -29,11 +34,11 @@ function showWindow(id) {
 
     } else {
         const extra_window_container = document.querySelector('.extra-window-container')
-        
+
         const offset = [
             ...extra_window_container.children
         ].indexOf(document.getElementById(id)) * -100
-        
+
         extra_window_container.style.setProperty(
             '--y-offset',
             `${offset}%`
@@ -44,11 +49,66 @@ function showWindow(id) {
             constants.windowAnimationDuration
         )
 
-        document.body.onkeydown = null;
+        document.body.onkeydown = null
     }
 }
 
+function setMinutesClock(locale) {
+    const currentTime = new Date()
+    clockElements.date.innerText = currentTime.toLocaleDateString(locale)
+    clockElements.time.innerText = currentTime.toLocaleTimeString(locale, {
+        "timeStyle": "short"
+    })
+    clockTimer = setTimeout(
+        () => setMinutesClock(locale),
+        // Time until next minute
+        (60 - currentTime.getSeconds()) * 1000
+    )
+}
+
+function setSecondsClock(locale) {
+    const currentTime = new Date()
+    clockElements.date.innerText = currentTime.toLocaleDateString(locale)
+    clockElements.time.innerText = currentTime.toLocaleTimeString(locale, {
+        "timeStyle": "medium"
+    })
+    clockTimer = setTimeout(
+        () => setSecondsClock(locale),
+        1000
+    )
+}
+
+var clockTimer = null
+function setupClock() {
+    const settings = getLocalStorage()
+
+    if (clockTimer !== null) {
+        clearTimeout(clockTimer)
+        clockTimer = null
+    }
+
+    switch (settings['show_clock']) {
+        case 'no':
+            clockElements.time.innerText = ''
+            clockElements.date.innerText = ''
+            break
+
+        case 'without_seconds':
+            setMinutesClock(settings['locale'])
+            break
+
+        case 'with_seconds':
+            setSecondsClock(settings['locale'])
+            break
+
+        default:
+            break
+    }
+
+}
+
 checkLogin()
 
 showWindow("home")
 document.querySelector("header img").onclick = e => showWindow("home")
+setupClock()

frontend/static/js/settings.js

@@ -1,5 +1,6 @@
 const settingsEls = {
 	settings: {
+		showClock: document.querySelector('#clock-input'),
 		locale: document.querySelector('#locale-input'),
 		defaultService: document.querySelector('#default-service-input'),
 	},
@@ -17,14 +18,16 @@ const settingsEls = {
 }
 
 function loadSettings() {
-	settingsEls.settings.locale.value =
-		getLocalStorage('locale')['locale']
+	const values = getLocalStorage()
+	settingsEls.settings.locale.value = values['locale']
+	settingsEls.settings.showClock.value = values['show_clock']
 	// Default Service is handled by notification.fillNotificationSelection()
 }
 
 function updateLocale() {
 	setLocalStorage({'locale': settingsEls.settings.locale.value})
 	fillLibrary(reminderTypes.reminder)
+	setupClock()
 }
 
 function updateDefaultService() {
@@ -32,6 +35,11 @@ function updateDefaultService() {
 	// Add window is handled by show.showAdd()
 }
 
+function updateClockSetting() {
+	setLocalStorage({'show_clock': settingsEls.settings.showClock.value})
+	setupClock()
+}
+
 function changePassword() {
 	const data = {
 		'new_password': settingsEls.changePassword.input.value
@@ -60,6 +68,7 @@ function deleteAccount() {
 
 loadSettings()
 
+settingsEls.settings.showClock.onchange = e => updateClockSetting()
 settingsEls.settings.locale.onchange = e => updateLocale()
 settingsEls.settings.defaultService.onchange = e => updateDefaultService()
 settingsEls.changePassword.form.action = 'javascript:changePassword();'

frontend/templates/reminders.html

@@ -105,6 +105,10 @@
 			<img src="{{ url_for('static', filename='img/favicon.svg') }}" alt="">
 			<h1>MIND</h1>
 		</div>
+		<div id="clock-container">
+			<div id="clock-time"></div>
+			<div id="clock-date"></div>
+		</div>
 	</header>
 	<div class="nav-divider">
 		<div class="nav-container">
@@ -387,6 +391,16 @@
 					<div class="table-container">
 						<table id="settings-table" class="collaps-table">
 							<tbody>
+								<tr id="clock-setting-row">
+									<th><label for="clock-input">Show Clock</label></th>
+									<td>
+										<select id="clock-input" class="input-style">
+											<option value="no">No</option>
+											<option value="without_seconds">Show, but not seconds</option>
+											<option value="with_seconds">Show, with seconds</option>
+										</select>
+									</td>
+								</tr>
 								<tr>
 									<th><label for="locale-input">Locale</label></th>
 									<td>