eww: Created Grind timer widget

bar/eww/eww.scss

@@ -1,5 +1,6 @@
 @import "./theme.scss";
 @import "./bar.scss";
+@import "./timer.scss";
 
 * {
   all: unset;

bar/eww/eww.yuck

@@ -1,4 +1,5 @@
 (include "./bar.yuck")
+(include "./timer.yuck")
 
 (defpoll bots 
   :initial `[]`

bar/eww/timer.scss

@@ -0,0 +1,65 @@
+.timer {
+  padding-left: 60px;
+  padding-right: 60px;
+
+  background-color: $background;
+  border-radius: 20px;
+
+  .timer-title {
+    color: $text;
+    margin-top: 20px;
+    font-size: 24px;
+  }
+
+  .start-button {
+    .circle-progress {
+      color: $green;
+
+      transition: color 500ms;
+    }
+
+    .start-icon {
+      color: $green;
+      font-size: 28px;
+
+      transition: color 500ms;
+    }
+  }
+
+  .timer-text {
+    font-size: 32px;
+    padding-bottom: 30px;
+  }
+
+  &.work {
+    .start-button {
+      .circle-progress {
+        color: $red;
+
+        transition: color 500ms;
+      }
+
+      .start-icon {
+        color: $red;
+
+        transition: color 500ms;
+      }
+    }
+  }
+
+  &.pause {
+    .start-button {
+      .circle-progress {
+        color: $yellow;
+
+        transition: color 500ms;
+      }
+
+      .start-icon {
+        color: $yellow;
+
+        transition: color 500ms;
+      }
+    }
+  }
+}

bar/eww/timer.yuck

@@ -0,0 +1,83 @@
+(defvar WORK_TIME_SEC 1200)
+(defvar PAUSE_TIME_SEC 300)
+
+(defvar timer-state "inactive")
+(defvar timer-start-time 0)
+
+(defpoll timer-time 
+  :interval "1s"
+  :run-while {timer-state != "inactive"}
+  `date +%s`)
+  
+(defpoll timer-work-period
+  :interval "20m"
+  :initial "first"
+  :run-while {timer-state == "work"}
+  `if [ "$(eww get timer-work-period)" == "first" ]; then 
+    eww update timer-start-time=$(date +%s)
+    echo next
+  else 
+    notify-send -i ~/Images/Icons/moai.jpg "Work period over" "You can take a little nap now."
+    eww update timer-state=pause
+    echo first
+  fi`) ; TODO: Put in a separate script
+
+(defpoll timer-pause-period
+  :interval "5m"
+  :initial "first"
+  :run-while {timer-state == "pause"}
+  `if [ "$(eww get timer-pause-period)" == "first" ]; then 
+    eww update timer-start-time=$(date +%s)
+    echo next
+  else 
+    notify-send -i ~/Images/Icons/moai.jpg "Pause period over" "Back to grinding we go."
+    eww update timer-state=work
+    echo first
+  fi`) ; TODO: Put in a separate script
+
+(defwidget start-button []
+  (button
+    :class "start-button"
+    :vexpand true
+    :onclick "eww update timer-state=${timer-state == "inactive" ? "work" : "inactive"} timer-work-period=first timer-pause-period=first"
+    (overlay
+      (circular-progress
+        :class "circle-progress"
+        :value 100
+        :thickness 6
+        :clockwise true)
+      (label :class "start-icon" :text "${timer-state == "inactive" ? 'Start' : (timer-state == "work" ? "Working" : "Pause")}")
+    )
+  )
+)
+
+(defwidget timer []
+  (box
+    :orientation "v"
+    :space-evenly false
+    :class "timer ${timer-state}"
+    (label :class "timer-title" :text "Grind timer")
+    (start-button :valign "center" :vexpand true)
+    (revealer
+      :transition "slideup"
+      :reveal {timer-state != "inactive"}
+      (label :class "timer-text" :text "${timer-state != "inactive" ? formattime(timer-start-time - (3600 - (timer-state == "work" ? WORK_TIME_SEC : PAUSE_TIME_SEC)) - timer-time, "%H:%M:%S") : "00:20:00"}")
+    )
+  )
+)
+
+
+(defwindow timer
+  :namespace "eww.timer"
+  :monitor 0
+  :geometry (geometry
+    :x "6%"
+    :y "10%"
+    :width "300px"
+    :height "350px"
+    :anchor "top left")
+  :stacking "bg"
+  :focusable false
+  :exclusive true
+  (timer)
+)