added date and time (#6723)

Author: wernerstucky

click-clock@wernerstucky/files/click-clock@wernerstucky/applet.js

@@ -1,5 +1,7 @@
 const Applet = imports.ui.applet;
+const Lang = imports.lang;
 const Mainloop = imports.mainloop;
+const St = imports.gi.St;
 
 function MyApplet(metadata, orientation, panelHeight, instance_id) {
   this._init(metadata, orientation, panelHeight, instance_id);
@@ -17,44 +19,51 @@ MyApplet.prototype = {
     );
 
     this.set_applet_icon_name("clock");
-    this.set_applet_tooltip("Click to view the time");
-
-    // Debug: Log initialization
-    // global.log("Click-Clock applet initialized successfully.");
+    this.set_applet_tooltip("Click to view the time and date");
   },
 
-  // Override the default on_applet_clicked method
   on_applet_clicked: function () {
     try {
       // global.log("Applet clicked!"); // Debug log
 
       let now = new Date();
-      let timeString = now.toLocaleTimeString();
+      let localeDate = now.toLocaleDateString(undefined, {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+      });
+      let localeTime = now.toLocaleTimeString(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+      });
+      let displayString = `${localeDate} ${localeTime}`;
 
-      // global.log("Current time: " + timeString); // Log the time
-      this.set_applet_label(timeString);
-      this.set_applet_tooltip(`Current time: ${timeString}`);
+      this.set_applet_label(displayString);
+      this.set_applet_tooltip(`Current date and time: ${displayString}`);
 
-      // Reset to icon after 20 seconds
       if (this._timeoutId) {
         Mainloop.source_remove(this._timeoutId);
       }
 
-      this._timeoutId = Mainloop.timeout_add_seconds(20, () => {
-        this._resetToIcon();
-        return false; // Stop the timeout
-      });
+      this._timeoutId = Mainloop.timeout_add_seconds(
+        20,
+        Lang.bind(this, function () {
+          this._resetToIcon();
+          return false;
+        })
+      );
     } catch (e) {
       global.logError("Error in on_applet_clicked: " + e);
     }
   },
 
   _resetToIcon: function () {
     try {
-      // global.log("Resetting to clock icon."); // Debug log
+      // global.log("Resetting to icon."); // Debug log
       this.set_applet_label("");
       this.set_applet_icon_name("clock");
-      this.set_applet_tooltip("Click to view the time");
+      this.set_applet_tooltip("Click to view the time and date");
     } catch (e) {
       global.logError("Error in _resetToIcon: " + e);
     }