Added time and date

4 years ago · 2c5beb4d7a
5 changed files with 67 additions and 13 deletions
--- a/themes/gruvbox/css/style.css
+++ b/themes/gruvbox/css/style.css
@ -253,6 +253,19 @@ input:focus, input:focus-visible {
  font-weight: bold;
 }

+#time-date {
+  top: 0;
+  font-weight: bold;
+  font-size: calc(1em + 2px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+#time-date span {
+  display: block;
+}
+
 .label-bar {
  position: absolute;
  display: flex;
--- a/themes/gruvbox/index.html
+++ b/themes/gruvbox/index.html
@ -9,7 +9,7 @@

  <script src="../_vendor/js/mock.js"></script>

-  <title>Gruvbox greeter</title>
+  <title>Gruvbox theme</title>
 </head>
 <body>
  <div id="background"></div>
@ -67,6 +67,10 @@
    <div id="lock-label" class="info hide">
      Lock
    </div>
+    <div id="time-date" class="info">
+      <span id="time-label">20:00</span>
+      <span id="date-label">12-07-21</span>
+    </div>

    <div id="system-status" class="label-bar">
      <div id="brightness-label"></div>
@ -92,6 +96,7 @@
  <script src="js/authenticate.js"></script>
  <script src="js/accounts.js"></script>
  <script src="js/sessions.js"></script>
+  <script src="js/time-date.js"></script>
  <script src="js/power.js"></script>
  <script src="js/battery.js"></script>
  <script src="js/brightness.js"></script>
--- a/themes/gruvbox/js/debug.js
+++ b/themes/gruvbox/js/debug.js
@ -7,14 +7,22 @@ class Debug {
  _init() {
    console.log("DEBUG")

+		if (!window.theme_utils) {
      window.theme_utils = {}
-    window.theme_utils.dirlist = function(path) {
-      return false
+      window.theme_utils.dirlist = function(path, mode, callback) {
+        callback([])
+      }
+      window.theme_utils.bind_this = function(context) {return context}
    }

+		if (!window.greeter_config) {
 			window.greeter_config = {
 				greeter: {
 					debug_mode: true,
+				},
+				branding: {
+					background_images_dir: "",
+				}
 			}
    }

--- a/themes/gruvbox/js/index.js
+++ b/themes/gruvbox/js/index.js
@ -34,6 +34,8 @@ async function initGreeter() {

  authenticate = new Authenticate()

+  time_date = new TimeDate()
+
  power = new Power()

  battery = new Battery()
@ -48,9 +50,9 @@ async function initGreeter() {

 const notGreeter = false

-if (notGreeter) {
-  debug = new Debug()
-  initGreeter()
-} else {
-  window.addEventListener("GreeterReady", initGreeter)
+if (window._ready_event === undefined) {
+  _ready_event = new Event("GreeterReady")
+  window.dispatchEvent(_ready_event)
 }
+
+window.addEventListener("GreeterReady", initGreeter)
--- a/themes/gruvbox/js/time-date.js
+++ b/themes/gruvbox/js/time-date.js
@ -0,0 +1,26 @@
+class TimeDate {
+	constructor() {
+		this._timeLabel = document.querySelector("#time-date #time-label")
+		this._dateLabel = document.querySelector("#time-date #date-label")
+		this._init()
+	}
+
+	_updateTimeDate() {
+		let date = theme_utils.get_current_localized_date()
+		let time = theme_utils.get_current_localized_time()
+
+		this._dateLabel.innerText = date
+		this._timeLabel.innerText = time
+	}
+
+	_setTimer() {
+		this._updateTimeDate()
+		setInterval(() => {
+			this._updateTimeDate()
+		}, 1000)
+	}
+	
+	_init() {
+		this._setTimer()
+	}
+}