From 3db1a9d42549a74d71961ce144465265f15311f6 Mon Sep 17 00:00:00 2001
From: erikbeans <erikbeans@gmail.com>
Date: Thu, 30 Apr 2026 14:32:05 -0700
Subject: [PATCH 1/8] Updating Raspberry Pi Image Instructions

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 410088b..030a81c 100644
--- a/README.md
+++ b/README.md
@@ -56,10 +56,10 @@ may start the program at 1.35am to reach that goal (based on your schedules).
 
 # installation
 
-## Install Raspbian Buster Lite
+## Install Raspberry Pi OS Lite
 
-- Go to [raspberrypi.org](https://www.raspberrypi.org/) and download their [latest image](https://downloads.raspberrypi.org/raspbian_lite_latest)
-- Write the image onto your SD card using [Etcher](https://www.balena.io/etcher/)
+- Go to [raspberrypi.com](https://www.raspberrypi.com/software/) and use the Raspberry Pi Imager, or download their [latest image](https://downloads.raspberrypi.org/raspios_lite_armhf_latest)
+- Write the image onto your SD card using the Raspberry Pi Imager or [Etcher](https://www.balena.io/etcher/)
 
 ## Setup your environment
 

From d566b04bfd1c3875f747826ff5041b09f7c35d23 Mon Sep 17 00:00:00 2001
From: erikbeans <erikbeans@gmail.com>
Date: Thu, 30 Apr 2026 15:25:57 -0700
Subject: [PATCH 2/8] Adding requirements file

---
 requirements.txt | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 requirements.txt

diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..fe951e6
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,3 @@
+Flask
+Flask-HTTPAuth
+gpiozero

From bb78e712db38085be84954f0044dac0672680a04 Mon Sep 17 00:00:00 2001
From: erikbeans <erikbeans@gmail.com>
Date: Thu, 30 Apr 2026 16:30:46 -0700
Subject: [PATCH 3/8] Adding launcher for vscode with virtual launch

---
 .vscode/launch.json | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..837254f
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Python Debugger: Run Server (Virtual)",
+            "type": "debugpy",
+            "request": "launch",
+            "program": "${workspaceFolder}/server.py",
+            "console": "integratedTerminal",
+            "args": ["--virtual"]
+        }
+    ]
+}
\ No newline at end of file

From f08630aa8eeac78c4673b8125fb69dc664790f6c Mon Sep 17 00:00:00 2001
From: erikbeans <erikbeans@gmail.com>
Date: Thu, 30 Apr 2026 16:41:10 -0700
Subject: [PATCH 4/8] Fixing typos

---
 API.md          | 2 +-
 html/index.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/API.md b/API.md
index 607a8c2..e275bb7 100755
--- a/API.md
+++ b/API.md
@@ -15,7 +15,7 @@ Returns a JSON with all sprinklers as an array of a map
     'group' : <int: Not used yet>,
     'schedule' : {
       'duration' : <int: minutes>,
-      'cycles' : <int: cycles it should run, minium 1>,
+      'cycles' : <int: cycles it should run, minimum 1>,
       'days' : <int: days it should run>,
       'shift' : <int: shift start day>
     }
diff --git a/html/index.html b/html/index.html
index f2a05d8..4ecf3e1 100755
--- a/html/index.html
+++ b/html/index.html
@@ -67,7 +67,7 @@ <h4><a href="https://github.com/mrworf/rainfall">Rainfall</a></h4>
       <select id="cycles" class="custom-select" id="inputGroupSelect02" style="min-width: 60pt">
         <option value="1">Once</option>
         <option value="2">Twice</option>
-        <option value="3">Trice</option>
+        <option value="3">Thrice</option>
       </select>
       <div class="input-group-prepend">
         <label class="input-group-text" for="inputGroupSelect03">Every</label>

From 52965466ea3eb443ccbfd53fc9fc22cb4b24a8fa Mon Sep 17 00:00:00 2001
From: erikbeans <erikbeans@gmail.com>
Date: Thu, 30 Apr 2026 17:18:03 -0700
Subject: [PATCH 5/8] Making the UI cleaner

---
 html/index.html     | 46 ++++++++++++++++++++++-----------------------
 html/js/main.js     |  6 ++++++
 modules/schedule.py |  8 ++++++++
 3 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/html/index.html b/html/index.html
index 4ecf3e1..b0a17ef 100755
--- a/html/index.html
+++ b/html/index.html
@@ -51,28 +51,26 @@ <h4><a href="https://github.com/mrworf/rainfall">Rainfall</a></h4>
           <span id="gpio" style="width: 13pt">123</span>
         </span>
       </div>
-      <input id="name" type="text" class="form-control" style="min-width: 120pt" aria-label="Name" placeholder="(name of sprinkler)">
-      <div class="input-group-prepend">
-        <label class="input-group-text" for="inputGroupSelect01">Runtime</label>
+      <input id="name" type="text" class="form-control rounded-right" style="min-width: 120pt" aria-label="Name" placeholder="(name of sprinkler)">
+      <div class="input-group-prepend ml-3">
+        <label class="input-group-text rounded-left" for="duration">Runtime</label>
       </div>
-      <select id="duration" class="custom-select" id="inputGroupSelect01" style="min-width: 60pt">
-        <option value="1">1 minute</option>
-        <option value="5">5 minutes</option>
-        <option value="10">10 minutes</option>
-        <option value="15">15 minutes</option>
-      </select>
-      <div class="input-group-prepend" title="Times run during program">
-        <label class="input-group-text" for="inputGroupSelect02">Cycle</label>
+      <input type="number" id="duration" class="form-control" style="min-width: 60pt" min="1" max="15" step="1" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
+      <div class="input-group-append">
+        <span class="input-group-text rounded-right">minutes</span>
+      </div>
+      <div class="input-group-prepend ml-3" title="Times run during program">
+        <label class="input-group-text rounded-left" for="inputGroupSelect02">Cycle</label>
       </div>
-      <select id="cycles" class="custom-select" id="inputGroupSelect02" style="min-width: 60pt">
+      <select id="cycles" class="custom-select rounded-right" id="inputGroupSelect02" style="min-width: 60pt">
         <option value="1">Once</option>
         <option value="2">Twice</option>
         <option value="3">Thrice</option>
       </select>
-      <div class="input-group-prepend">
-        <label class="input-group-text" for="inputGroupSelect03">Every</label>
+      <div class="input-group-prepend ml-3">
+        <label class="input-group-text rounded-left" for="inputGroupSelect03">Every</label>
       </div>
-      <select id="days" class="custom-select" id="inputGroupSelect03" style="min-width: 60pt">
+      <select id="days" class="custom-select rounded-right" id="inputGroupSelect03" style="min-width: 60pt">
           <option value="1">day</option>
           <option value="2">other day</option>
           <option value="3">3rd day</option>
@@ -88,10 +86,10 @@ <h4><a href="https://github.com/mrworf/rainfall">Rainfall</a></h4>
           <option value="13">13th day</option>
           <option value="14">14th day</option>
       </select>
-      <div class="input-group-prepend" title="Shift start day">
-        <label class="input-group-text" for="inputGroupSelect03">Shift</label>
+      <div class="input-group-prepend ml-3" title="Shift start day">
+        <label class="input-group-text rounded-left" for="inputGroupSelect03">Shift</label>
       </div>
-      <select id="shift" class="custom-select" id="inputGroupSelect03" style="min-width: 60pt">
+      <select id="shift" class="custom-select rounded-right" id="inputGroupSelect03" style="min-width: 60pt">
           <option value="0">No</option>
           <option value="1">1 day</option>
           <option value="2">2 days</option>
@@ -108,21 +106,21 @@ <h4><a href="https://github.com/mrworf/rainfall">Rainfall</a></h4>
           <option value="13">13 days</option>
           <option value="14">14 days</option>
       </select>
-      <div class="input-group-append">
-          <button id="enable" class="btn btn-success" title="Should station be part of program?">
+      <div class="input-group-append ml-3">
+          <button id="enable" class="btn btn-success rounded" title="Should station be part of program?">
             <svg class="bi bi-power" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M5.578 4.437a5 5 0 104.922.044l.5-.866a6 6 0 11-5.908-.053l.486.875z" clip-rule="evenodd"/>
               <path fill-rule="evenodd" d="M7.5 8V1h1v7h-1z" clip-rule="evenodd"/>
             </svg>
           </button>
-          <button id="pin" class="btn btn-info">
+          <button id="pin" class="btn btn-info rounded ml-1">
             <svg class="bi bi-info-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z" clip-rule="evenodd"/>
               <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>
               <circle cx="8" cy="4.5" r="1"/>
             </svg>
           </button>
-          <button id="delete" class="btn btn-danger">
+          <button id="delete" class="btn btn-danger rounded ml-1">
             <svg class="bi bi-trash" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
               <path d="M5.5 5.5A.5.5 0 016 6v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm2.5 0a.5.5 0 01.5.5v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm3 .5a.5.5 0 00-1 0v6a.5.5 0 001 0V6z"/>
               <path fill-rule="evenodd" d="M14.5 3a1 1 0 01-1 1H13v9a2 2 0 01-2 2H5a2 2 0 01-2-2V4h-.5a1 1 0 01-1-1V2a1 1 0 011-1H6a1 1 0 011-1h2a1 1 0 011 1h3.5a1 1 0 011 1v1zM4.118 4L4 4.059V13a1 1 0 001 1h6a1 1 0 001-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" clip-rule="evenodd"/>
@@ -136,8 +134,10 @@ <h4><a href="https://github.com/mrworf/rainfall">Rainfall</a></h4>
     <button id="runProgram" type="button" class="btn btn-secondary">Run program</button>
     <button id="showSettings" type="button" class="btn btn-secondary">Other settings</button>
     <button id="showHelp" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#helpInformation">Help</button>
-    <button id="next-run" type="button" class="btn btn-info" disabled>Next scheduled run happens at ...</button>
 
+    <div id="next-run" class="alert alert-info mt-3" role="alert">
+      Next scheduled run happens at ...
+    </div>
 
     <div id="addSprinklerDialog" class="modal" tabindex="-1" role="dialog">
       <div class="modal-dialog" role="document">
diff --git a/html/js/main.js b/html/js/main.js
index 6d50b87..fe0027a 100755
--- a/html/js/main.js
+++ b/html/js/main.js
@@ -50,6 +50,12 @@ function updateBackend(thiz, value)
   i = thiz.id;
   v = (value == null ? j.val() : value); // Allow override
 
+  if (v === "") {
+    alert("Value cannot be empty.");
+    setSprinkler(s, jj); // Revert the UI to the previous valid state
+    return;
+  }
+
   if (!isNaN(parseInt(v)))
     v = parseInt(v);
 
diff --git a/modules/schedule.py b/modules/schedule.py
index 1423ed4..761400b 100755
--- a/modules/schedule.py
+++ b/modules/schedule.py
@@ -26,18 +26,26 @@ def __init__(self, duration=1, cycles=1, days=1, shiftDay=0, scaling=1):
     self.setScaling(scaling)
 
   def setDuration(self, duration):
+    try:
+      duration = int(duration)
+    except (ValueError, TypeError):
+      duration = getattr(self, 'duration', 1)
     self.duration = 1 if duration < 1 else duration
 
   def setCycles(self, cycles):
+    cycles = int(cycles)
     self.cycles = 1 if cycles < 1 else cycles
 
   def setDays(self, days):
+    days = int(days)
     self.days = 1 if days < 1 else days
 
   def setShift(self, shiftDay):
+    shiftDay = int(shiftDay)
     self.shift = 0 if shiftDay < 0 else shiftDay
 
   def setScaling(self, scaling):
+    scaling = int(scaling)
     self.scaling = 1 if scaling < 1 else scaling
 
   def getCalculatedDays(self):

From 466db60bc4983f4c6a0444d914e5f5dcd432b22a Mon Sep 17 00:00:00 2001
From: erikbeans <erikbeans@gmail.com>
Date: Thu, 30 Apr 2026 17:31:44 -0700
Subject: [PATCH 6/8] Adding a message at the bottom that just mentions which
 sprinklers are running with the next run.

---
 html/js/main.js     | 11 ++++++++---
 modules/program.py  | 12 +++++++++++-
 modules/rainfall.py |  3 +++
 server.py           |  3 ++-
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/html/js/main.js b/html/js/main.js
index fe0027a..7a49d00 100755
--- a/html/js/main.js
+++ b/html/js/main.js
@@ -193,11 +193,17 @@ function updateProgramStatus() {
     }).done(function(e, data) {
       if (e.running)
         $('#programRunning').modal('show')
+
+      var sprinklersList = "";
+      if (e.next_sprinklers && e.next_sprinklers.length > 0) {
+        sprinklersList = "<br><strong>Sprinklers running next:</strong> " + e.next_sprinklers.join(", ");
+      }
+
       // Update the runtime info
       if (e.duration > 0)
-        $('#next-run').text('Next scheduled run happens at ' + time2str(e.start, false) + ' (runtime of ' + time2str(e.duration, true) + ')');
+        $('#next-run').html('Next scheduled run happens at ' + time2str(e.start, false) + ' (runtime of ' + time2str(e.duration, true) + ')' + sprinklersList);
       else
-        $('#next-run').text('No scheduled sprinklers today, next run in ' + e.next + ' day' + (e.next > 1 ? 's' : ''));
+        $('#next-run').html('No scheduled sprinklers today, next run in ' + e.next + ' day' + (e.next > 1 ? 's' : '') + sprinklersList);
     }).fail(function(e, data) {
       alert('Unable to load program state, please reload');
     });
@@ -348,4 +354,3 @@ function setup() {
     }
   });
 }
-
diff --git a/modules/program.py b/modules/program.py
index 33ea621..9b64e08 100755
--- a/modules/program.py
+++ b/modules/program.py
@@ -28,6 +28,7 @@ def __init__(self, sprinklers, scaling, timeScale=60):
     self.work = []
     self.duration = 0
     self.daysBeforeNextRun = 9999
+    self.nextRunSprinklers = []
     for sprinkler in sprinklers:
       if not sprinkler.enabled:
         continue
@@ -37,7 +38,13 @@ def __init__(self, sprinklers, scaling, timeScale=60):
       daysBeforeNextRun = calcDay - ((self._getDayCounter() + sprinkler.schedule.shift) % calcDay)
       if daysBeforeNextRun == calcDay:
         daysBeforeNextRun = 0
-      self.daysBeforeNextRun = min(self.daysBeforeNextRun, daysBeforeNextRun)
+
+      if daysBeforeNextRun < self.daysBeforeNextRun:
+        self.daysBeforeNextRun = daysBeforeNextRun
+        self.nextRunSprinklers = [sprinkler.name]
+      elif daysBeforeNextRun == self.daysBeforeNextRun:
+        self.nextRunSprinklers.append(sprinkler.name)
+
       if daysBeforeNextRun != 0:
         logging.debug('Skipping %s due to days=%d x %d, shift=%d setting (next run in %d days)', sprinkler.name, sprinkler.schedule.days, sprinkler.schedule.scaling, sprinkler.schedule.shift, daysBeforeNextRun)
         continue
@@ -61,6 +68,9 @@ def __init__(self, sprinklers, scaling, timeScale=60):
   def getDaysBeforeNextRun(self):
     return self.daysBeforeNextRun
 
+  def getNextRunSprinklers(self):
+    return self.nextRunSprinklers
+
   def getEstimatedDuration(self):
     return self.duration
 
diff --git a/modules/rainfall.py b/modules/rainfall.py
index 2157b39..12dd805 100755
--- a/modules/rainfall.py
+++ b/modules/rainfall.py
@@ -143,6 +143,9 @@ def getProgramDuration(self):
   def getProgramDaysUntilNext(self):
     return self.program.getDaysBeforeNextRun()
 
+  def getProgramNextRunSprinklers(self):
+    return self.program.getNextRunSprinklers()
+
   def start(self):
     self.quit = False
     Thread.start(self)
diff --git a/server.py b/server.py
index b22284d..e313cb9 100755
--- a/server.py
+++ b/server.py
@@ -211,7 +211,8 @@ def program():
       'running' : rf.programRunning,
       'start' : rf.getProgramStart(),
       'duration' : rf.getProgramDuration(),
-      'next' : rf.getProgramDaysUntilNext()
+      'next' : rf.getProgramDaysUntilNext(),
+      'next_sprinklers' : rf.getProgramNextRunSprinklers()
     })
   else:
     if 'stop' in request.json:

From 5a759bacea6262e2d02fa6071b21aea5de1bce30 Mon Sep 17 00:00:00 2001
From: erikbeans <erikbeans@gmail.com>
Date: Thu, 7 May 2026 17:24:28 -0700
Subject: [PATCH 7/8] Fixing a bug with the calculation of the periodic runs. 
 Prior to this, every other day would not run on the start of the schedule.

---
 modules/program.py         | 11 +++++-
 test.py                    |  2 +-
 test_program_scheduling.py | 78 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 test_program_scheduling.py

diff --git a/modules/program.py b/modules/program.py
index 9b64e08..d207f79 100755
--- a/modules/program.py
+++ b/modules/program.py
@@ -35,7 +35,7 @@ def __init__(self, sprinklers, scaling, timeScale=60):
       # Make sure scaling is applied appropiately
       sprinkler.schedule.setScaling(scaling)
       calcDay = sprinkler.schedule.getCalculatedDays()
-      daysBeforeNextRun = calcDay - ((self._getDayCounter() + sprinkler.schedule.shift) % calcDay)
+      daysBeforeNextRun = calcDay - ((self._getDayCounter() - sprinkler.schedule.shift) % calcDay)
       if daysBeforeNextRun == calcDay:
         daysBeforeNextRun = 0
 
@@ -46,7 +46,14 @@ def __init__(self, sprinklers, scaling, timeScale=60):
         self.nextRunSprinklers.append(sprinkler.name)
 
       if daysBeforeNextRun != 0:
-        logging.debug('Skipping %s due to days=%d x %d, shift=%d setting (next run in %d days)', sprinkler.name, sprinkler.schedule.days, sprinkler.schedule.scaling, sprinkler.schedule.shift, daysBeforeNextRun)
+        logging.debug(
+          'Skipping %s due to days=%d x %d, shift=%d setting (next run in %d days)',
+          sprinkler.name,
+          sprinkler.schedule.days,
+          sprinkler.schedule.scaling,
+          sprinkler.schedule.shift,
+          daysBeforeNextRun
+        )
         continue
 
       work = {
diff --git a/test.py b/test.py
index 49a9bf1..2024e74 100755
--- a/test.py
+++ b/test.py
@@ -19,4 +19,4 @@
 			tst.on()
 			#sleep(3)
 			input('Press enter to test next one...')
-			tst.off
+			tst.off()
diff --git a/test_program_scheduling.py b/test_program_scheduling.py
new file mode 100644
index 0000000..e50c1c1
--- /dev/null
+++ b/test_program_scheduling.py
@@ -0,0 +1,78 @@
+import unittest
+from unittest.mock import MagicMock, patch
+from modules.program import program
+
+class TestProgramScheduling(unittest.TestCase):
+    def create_mock_sprinkler(self, name, days, shift=0, duration=1, cycles=1, enabled=True):
+        s = MagicMock()
+        s.enabled = enabled
+        s.name = name
+        s.schedule.duration = duration
+        s.schedule.cycles = cycles
+        s.schedule.days = days
+        s.schedule.shift = shift
+        s.schedule.getCalculatedDays.return_value = days
+        return s
+
+    @patch('modules.program.program._getDayCounter')
+    def test_sprinkler_scheduling(self, mock_day_counter):
+        # Create sprinklers for this test
+        s1 = self.create_mock_sprinkler("Sprinkler 1", days=1)
+        s2 = self.create_mock_sprinkler("Sprinkler 2", days=2)
+        s3 = self.create_mock_sprinkler("Sprinkler 3", days=3)
+
+        # We will use all 3 sprinklers for this test
+        sprinklers = [s1, s2, s3]
+
+        # Test Run 1: Day 120 (A multiple of 1, 2, and 3 - so all align)
+        mock_day_counter.return_value = 120
+        prog_run_1 = program(sprinklers, scaling=1)
+        self.assertEqual(prog_run_1.getDaysBeforeNextRun(), 0)
+        self.assertIn("Sprinkler 1", prog_run_1.getNextRunSprinklers())
+        self.assertIn("Sprinkler 2", prog_run_1.getNextRunSprinklers())
+        self.assertIn("Sprinkler 3", prog_run_1.getNextRunSprinklers())
+
+        # Test Run 2: The following day (Day 121 - Only Sprinkler 1 triggers)
+        mock_day_counter.return_value = 121
+        prog_run_2 = program(sprinklers, scaling=1)
+        self.assertIn("Sprinkler 1", prog_run_2.getNextRunSprinklers())
+        self.assertNotIn("Sprinkler 2", prog_run_2.getNextRunSprinklers())
+        self.assertNotIn("Sprinkler 3", prog_run_2.getNextRunSprinklers())
+
+        # Test Run 3: The next day (Day 122 - Sprinklers 1 and 2 trigger)
+        mock_day_counter.return_value = 122
+        prog_run_3 = program(sprinklers, scaling=1)
+        self.assertIn("Sprinkler 1", prog_run_3.getNextRunSprinklers())
+        self.assertIn("Sprinkler 2", prog_run_3.getNextRunSprinklers())
+        self.assertNotIn("Sprinkler 3", prog_run_3.getNextRunSprinklers())
+
+        # Test Run 4: Fast forward to next full sync (Day 126 - LCM of 1, 2, and 3 is 6 days)
+        mock_day_counter.return_value = 126
+        prog_run_4 = program(sprinklers, scaling=1)
+        self.assertIn("Sprinkler 1", prog_run_4.getNextRunSprinklers())
+        self.assertIn("Sprinkler 2", prog_run_4.getNextRunSprinklers())
+        self.assertIn("Sprinkler 3", prog_run_4.getNextRunSprinklers())
+
+    @patch('modules.program.program._getDayCounter')
+    def test_shift_scheduling(self, mock_day_counter):
+        # Note: We use days=2 (every other day) so the schedules can alternate. 
+        # If days=1 (every day), a shift of 1 still results in the sprinkler running every day!
+        s1 = self.create_mock_sprinkler("Sprinkler 1", days=2, shift=1)
+        s2 = self.create_mock_sprinkler("Sprinkler 2", days=2, shift=0)
+
+        sprinklers = [s1, s2]
+
+        # Test Run 1: Even day (Day 100) - Sprinkler 2 runs, Sprinkler 1 is shifted to tomorrow
+        mock_day_counter.return_value = 100
+        prog_run_1 = program(sprinklers, scaling=1)
+        self.assertNotIn("Sprinkler 1", prog_run_1.getNextRunSprinklers())
+        self.assertIn("Sprinkler 2", prog_run_1.getNextRunSprinklers())
+
+        # Test Run 2: Odd day (Day 101) - Sprinkler 1 runs, Sprinkler 2 waits for tomorrow
+        mock_day_counter.return_value = 101
+        prog_run_2 = program(sprinklers, scaling=1)
+        self.assertIn("Sprinkler 1", prog_run_2.getNextRunSprinklers())
+        self.assertNotIn("Sprinkler 2", prog_run_2.getNextRunSprinklers())
+
+if __name__ == '__main__':
+    unittest.main()

From 3b94a1765c8bf02e53e9a21ae2a1c4d1282247ba Mon Sep 17 00:00:00 2001
From: erikbeans <erikbeans@gmail.com>
Date: Thu, 7 May 2026 17:50:36 -0700
Subject: [PATCH 8/8] Adding a mobile view as an option for the UI

---
 html/index.html | 153 +++++++++++++++++++++++++++++++++++++++++++-----
 html/js/main.js |  72 ++++++++++++++++-------
 2 files changed, 188 insertions(+), 37 deletions(-)

diff --git a/html/index.html b/html/index.html
index b0a17ef..153eaf7 100755
--- a/html/index.html
+++ b/html/index.html
@@ -26,9 +26,13 @@
 
     <title>Rainfall</title>
   </head>
-  <body style="margin: 2pt">
-    <h4><a href="https://github.com/mrworf/rainfall">Rainfall</a></h4>
-    A simple python server which allows using a Raspberry Pi as your sprinkler controller
+  <body>
+    <div class="container-fluid py-2">
+    <div class="d-flex justify-content-between align-items-end mb-2">
+      <h4 class="mb-0"><a href="https://github.com/mrworf/rainfall">Rainfall</a></h4>
+      <a href="#" id="toggleView" class="btn btn-sm btn-outline-primary">Switch to Mobile View</a>
+    </div>
+    <div class="mb-3">A simple python server which allows using a Raspberry Pi as your sprinkler controller</div>
     <hr>
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
@@ -36,19 +40,20 @@ <h4><a href="https://github.com/mrworf/rainfall">Rainfall</a></h4>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
     <script src="js/main.js"></script>
 
-    <div class="input-group mb-3 d-none" id="template">
+    <!-- ORIGINAL DESKTOP TEMPLATE -->
+    <div class="input-group mb-3 d-none sprinkler-entry" id="template-desktop">
       <div class="input-group-prepend">
         <button id="open" class="btn btn-primary" title="Manually control sprinkler station">
           <svg class="bi bi-play" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
             <path fill-rule="evenodd" d="M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 010 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z" clip-rule="evenodd"/>
           </svg>
         </button>
-        <span class="input-group-text" id="basic-addon1" title="Which GPIO is used on Raspberry Pi">
+        <span class="input-group-text" title="Which GPIO is used on Raspberry Pi">
           <svg class="bi bi-plug" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
             <path d="M4 5h8v3a4 4 0 01-8 0V5z"/>
             <path fill-rule="evenodd" d="M6 1.5a.5.5 0 01.5.5v3a.5.5 0 01-1 0V2a.5.5 0 01.5-.5zm4 0a.5.5 0 01.5.5v3a.5.5 0 01-1 0V2a.5.5 0 01.5-.5zM7.115 13.651c.256-.511.385-1.408.385-2.651h1c0 1.257-.121 2.36-.49 3.099-.191.381-.47.707-.87.877-.401.17-.845.15-1.298-.002-.961-.32-1.534-.175-1.851.046-.33.23-.491.615-.491.98h-1c0-.635.278-1.353.918-1.8.653-.456 1.58-.561 2.74-.174.297.099.478.078.592.03.115-.05.244-.161.365-.405z" clip-rule="evenodd"/>
           </svg>
-          <span id="gpio" style="width: 13pt">123</span>
+          <span id="gpio" style="width: 13pt" class="ml-1 text-center">123</span>
         </span>
       </div>
       <input id="name" type="text" class="form-control rounded-right" style="min-width: 120pt" aria-label="Name" placeholder="(name of sprinkler)">
@@ -60,17 +65,17 @@ <h4><a href="https://github.com/mrworf/rainfall">Rainfall</a></h4>
         <span class="input-group-text rounded-right">minutes</span>
       </div>
       <div class="input-group-prepend ml-3" title="Times run during program">
-        <label class="input-group-text rounded-left" for="inputGroupSelect02">Cycle</label>
+        <label class="input-group-text rounded-left" for="cycles">Cycle</label>
       </div>
-      <select id="cycles" class="custom-select rounded-right" id="inputGroupSelect02" style="min-width: 60pt">
+      <select id="cycles" class="custom-select rounded-right" style="min-width: 60pt">
         <option value="1">Once</option>
         <option value="2">Twice</option>
         <option value="3">Thrice</option>
       </select>
       <div class="input-group-prepend ml-3">
-        <label class="input-group-text rounded-left" for="inputGroupSelect03">Every</label>
+        <label class="input-group-text rounded-left" for="days">Every</label>
       </div>
-      <select id="days" class="custom-select rounded-right" id="inputGroupSelect03" style="min-width: 60pt">
+      <select id="days" class="custom-select rounded-right" style="min-width: 60pt">
           <option value="1">day</option>
           <option value="2">other day</option>
           <option value="3">3rd day</option>
@@ -87,9 +92,9 @@ <h4><a href="https://github.com/mrworf/rainfall">Rainfall</a></h4>
           <option value="14">14th day</option>
       </select>
       <div class="input-group-prepend ml-3" title="Shift start day">
-        <label class="input-group-text rounded-left" for="inputGroupSelect03">Shift</label>
+        <label class="input-group-text rounded-left" for="shift">Shift</label>
       </div>
-      <select id="shift" class="custom-select rounded-right" id="inputGroupSelect03" style="min-width: 60pt">
+      <select id="shift" class="custom-select rounded-right" style="min-width: 60pt">
           <option value="0">No</option>
           <option value="1">1 day</option>
           <option value="2">2 days</option>
@@ -126,14 +131,129 @@ <h4><a href="https://github.com/mrworf/rainfall">Rainfall</a></h4>
               <path fill-rule="evenodd" d="M14.5 3a1 1 0 01-1 1H13v9a2 2 0 01-2 2H5a2 2 0 01-2-2V4h-.5a1 1 0 01-1-1V2a1 1 0 011-1H6a1 1 0 011-1h2a1 1 0 011 1h3.5a1 1 0 011 1v1zM4.118 4L4 4.059V13a1 1 0 001 1h6a1 1 0 001-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" clip-rule="evenodd"/>
             </svg>
           </button>
+      </div>
+    </div>
+
+    <!-- NEW MOBILE TEMPLATE -->
+    <div class="card mb-3 d-none sprinkler-entry" id="template-mobile">
+      <div class="card-body p-2 p-md-3">
+        <div class="row align-items-center mb-2">
+          <div class="col-12 d-flex">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <button id="open" class="btn btn-primary px-3" title="Manually control sprinkler station">
+                  <svg class="bi bi-play" width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" d="M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 010 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z" clip-rule="evenodd"/>
+                  </svg>
+                </button>
+                <span class="input-group-text" title="Which GPIO is used on Raspberry Pi">
+                  <svg class="bi bi-plug" width="1.2em" height="1.2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4 5h8v3a4 4 0 01-8 0V5z"/>
+                    <path fill-rule="evenodd" d="M6 1.5a.5.5 0 01.5.5v3a.5.5 0 01-1 0V2a.5.5 0 01.5-.5zm4 0a.5.5 0 01.5.5v3a.5.5 0 01-1 0V2a.5.5 0 01.5-.5zM7.115 13.651c.256-.511.385-1.408.385-2.651h1c0 1.257-.121 2.36-.49 3.099-.191.381-.47.707-.87.877-.401.17-.845.15-1.298-.002-.961-.32-1.534-.175-1.851.046-.33.23-.491.615-.491.98h-1c0-.635.278-1.353.918-1.8.653-.456 1.58-.561 2.74-.174.297.099.478.078.592.03.115-.05.244-.161.365-.405z" clip-rule="evenodd"/>
+                  </svg>
+                  <span id="gpio" class="ml-1" style="min-width: 1.5em; text-align: center">123</span>
+                </span>
+              </div>
+              <input id="name" type="text" class="form-control" aria-label="Name" placeholder="(name of sprinkler)">
+            </div>
+          </div>
+        </div>
+
+        <div class="row align-items-center mb-2">
+          <div class="col-6 pr-1 mb-2">
+            <div class="input-group">
+              <div class="input-group-prepend"><label class="input-group-text" for="duration">Run</label></div>
+              <input type="number" id="duration" class="form-control text-center" min="1" max="15" step="1" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
+              <div class="input-group-append"><span class="input-group-text px-2">min</span></div>
+            </div>
+          </div>
+          <div class="col-6 pl-1 mb-2" title="Times run during program">
+            <div class="input-group">
+              <div class="input-group-prepend"><label class="input-group-text" for="cycles">Cycle</label></div>
+              <select id="cycles" class="custom-select text-center">
+                <option value="1">1x</option>
+                <option value="2">2x</option>
+                <option value="3">3x</option>
+              </select>
+            </div>
+          </div>
+          <div class="col-6 pr-1 mb-2">
+            <div class="input-group">
+              <div class="input-group-prepend"><label class="input-group-text" for="days">Every</label></div>
+              <select id="days" class="custom-select text-center">
+                  <option value="1">1 d</option>
+                  <option value="2">2 d</option>
+                  <option value="3">3 d</option>
+                  <option value="4">4 d</option>
+                  <option value="5">5 d</option>
+                  <option value="6">6 d</option>
+                  <option value="7">7 d</option>
+                  <option value="8">8 d</option>
+                  <option value="9">9 d</option>
+                  <option value="10">10 d</option>
+                  <option value="11">11 d</option>
+                  <option value="12">12 d</option>
+                  <option value="13">13 d</option>
+                  <option value="14">14 d</option>
+              </select>
+            </div>
+          </div>
+          <div class="col-6 pl-1 mb-2" title="Shift start day">
+            <div class="input-group">
+              <div class="input-group-prepend"><label class="input-group-text" for="shift">Shift</label></div>
+              <select id="shift" class="custom-select text-center">
+                  <option value="0">0 d</option>
+                  <option value="1">1 d</option>
+                  <option value="2">2 d</option>
+                  <option value="3">3 d</option>
+                  <option value="4">4 d</option>
+                  <option value="5">5 d</option>
+                  <option value="6">6 d</option>
+                  <option value="7">7 d</option>
+                  <option value="8">8 d</option>
+                  <option value="9">9 d</option>
+                  <option value="10">10 d</option>
+                  <option value="11">11 d</option>
+                  <option value="12">12 d</option>
+                  <option value="13">13 d</option>
+                  <option value="14">14 d</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-12 d-flex justify-content-between">
+            <button id="enable" class="btn btn-success flex-fill mr-1 py-2" title="Should station be part of program?">
+              <svg class="bi bi-power" width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M5.578 4.437a5 5 0 104.922.044l.5-.866a6 6 0 11-5.908-.053l.486.875z" clip-rule="evenodd"/>
+                <path fill-rule="evenodd" d="M7.5 8V1h1v7h-1z" clip-rule="evenodd"/>
+              </svg>
+            </button>
+            <button id="pin" class="btn btn-info flex-fill mx-1 py-2">
+              <svg class="bi bi-info-circle" width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z" clip-rule="evenodd"/>
+                <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>
+                <circle cx="8" cy="4.5" r="1"/>
+              </svg>
+            </button>
+            <button id="delete" class="btn btn-danger flex-fill ml-1 py-2">
+              <svg class="bi bi-trash" width="1.5em" height="1.5em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path d="M5.5 5.5A.5.5 0 016 6v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm2.5 0a.5.5 0 01.5.5v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm3 .5a.5.5 0 00-1 0v6a.5.5 0 001 0V6z"/>
+                <path fill-rule="evenodd" d="M14.5 3a1 1 0 01-1 1H13v9a2 2 0 01-2 2H5a2 2 0 01-2-2V4h-.5a1 1 0 01-1-1V2a1 1 0 011-1H6a1 1 0 011-1h2a1 1 0 011 1h3.5a1 1 0 011 1v1zM4.118 4L4 4.059V13a1 1 0 001 1h6a1 1 0 001-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" clip-rule="evenodd"/>
+              </svg>
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div id="sprinklers"></div>
-    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addSprinklerDialog">Add sprinkler</button>
-    <button id="runProgram" type="button" class="btn btn-secondary">Run program</button>
-    <button id="showSettings" type="button" class="btn btn-secondary">Other settings</button>
-    <button id="showHelp" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#helpInformation">Help</button>
+    <div class="mb-3 d-flex flex-wrap">
+      <button type="button" class="btn btn-primary flex-fill m-1" data-toggle="modal" data-target="#addSprinklerDialog">Add sprinkler</button>
+      <button id="runProgram" type="button" class="btn btn-secondary flex-fill m-1">Run program</button>
+      <button id="showSettings" type="button" class="btn btn-secondary flex-fill m-1">Other settings</button>
+      <button id="showHelp" type="button" class="btn btn-secondary flex-fill m-1" data-toggle="modal" data-target="#helpInformation">Help</button>
+    </div>
 
     <div id="next-run" class="alert alert-info mt-3" role="alert">
       Next scheduled run happens at ...
@@ -338,5 +458,6 @@ <h5 class="modal-title">Help</h5>
         setup();
       });
     </script>
+    </div>
   </body>
 </html>
diff --git a/html/js/main.js b/html/js/main.js
index 7a49d00..1b2c167 100755
--- a/html/js/main.js
+++ b/html/js/main.js
@@ -14,6 +14,8 @@
   * You should have received a copy of the GNU General Public License
   * along with rainfall.  If not, see <http://www.gnu.org/licenses/>.
   */
+var currentView = localStorage.getItem('viewMode') || 'desktop';
+
 function loadSettings()
 {
   $.ajax({
@@ -37,16 +39,8 @@ function loadSettings()
 function updateBackend(thiz, value)
 {
   j = jQuery(thiz);
-  jj = j.parent();
-  s = jj.data('sprinkler')
-  if (s == null) {
-    jj = jj.parent();
-    s = jj.data('sprinkler')
-    if (s == null) {
-      jj = jj.parent();
-      s = jj.data('sprinkler')
-    }
-  }
+  jj = j.closest('.sprinkler-entry');
+  s = jj.data('sprinkler');
   i = thiz.id;
   v = (value == null ? j.val() : value); // Allow override
 
@@ -92,7 +86,7 @@ function updateBackend(thiz, value)
 function toggleEnable(thiz)
 {
   j = jQuery(thiz);
-  s = j.parent().parent().data('sprinkler')
+  s = j.closest('.sprinkler-entry').data('sprinkler');
   if (s.enabled) {
     j.removeClass('btn-success').addClass('btn-secondary');
     updateBackend(thiz, false);
@@ -104,14 +98,14 @@ function toggleEnable(thiz)
 
 function showPIN(thiz)
 {
-  alert("PIN used by this valve: " + jQuery(thiz).parent().parent().data('sprinkler').pin );
+  alert("PIN used by this valve: " + jQuery(thiz).closest('.sprinkler-entry').data('sprinkler').pin );
 }
 
 function deleteStation(thiz)
 {
-  s = jQuery(thiz).parent().parent().data('sprinkler');
+  s = jQuery(thiz).closest('.sprinkler-entry').data('sprinkler');
   if (confirm('Are you sure you wish to delete "' + s.name + '" (PIN ' + s.pin + ')')) {
-    jQuery(thiz).parent().parent().remove();
+    jQuery(thiz).closest('.sprinkler-entry').remove();
     $.ajax({
       type:"POST",
       contentType: "application/json; charset=utf-8",
@@ -126,31 +120,42 @@ function deleteStation(thiz)
   }
 }
 
+function getPlayIcon() {
+  var size = currentView === 'mobile' ? '1.5em' : '1em';
+  return '<svg class="bi bi-play" width="' + size + '" height="' + size + '" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 010 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z" clip-rule="evenodd"/></svg>';
+}
+
+function getStopIcon() {
+  var size = currentView === 'mobile' ? '1.5em' : '1em';
+  return '<svg class="bi bi-stop" width="' + size + '" height="' + size + '" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.5 5A1.5 1.5 0 015 3.5h6A1.5 1.5 0 0112.5 5v6a1.5 1.5 0 01-1.5 1.5H5A1.5 1.5 0 013.5 11V5zM5 4.5a.5.5 0 00-.5.5v6a.5.5 0 00.5.5h6a.5.5 0 00.5-.5V5a.5.5 0 00-.5-.5H5z" clip-rule="evenodd"/></svg>';
+}
+
 function toggleManual(thiz)
 {
   j = jQuery(thiz);
-  s = j.parent().parent().data('sprinkler');
+  s = j.closest('.sprinkler-entry').data('sprinkler');
   if (s.open) {
-    j.removeClass('btn-success').addClass('btn-primary').html('<svg class="bi bi-play" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 010 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z" clip-rule="evenodd"/></svg>');
+    j.removeClass('btn-success').addClass('btn-primary').html(getPlayIcon());
     updateBackend(thiz, false);
   } else {
     // First, remove any other ones
     $('#sprinklers #open').each(function() {
-      $(this).removeClass('btn-success').addClass('btn-primary').html('<svg class="bi bi-play" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 010 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z" clip-rule="evenodd"/></svg>');
-      $(this).parent().parent().data('sprinkler').open = false;
+      $(this).removeClass('btn-success').addClass('btn-primary').html(getPlayIcon());
+      $(this).closest('.sprinkler-entry').data('sprinkler').open = false;
     });
-    j.removeClass('btn-primary').addClass('btn-success').html('<svg class="bi bi-stop" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.5 5A1.5 1.5 0 015 3.5h6A1.5 1.5 0 0112.5 5v6a1.5 1.5 0 01-1.5 1.5H5A1.5 1.5 0 013.5 11V5zM5 4.5a.5.5 0 00-.5.5v6a.5.5 0 00.5.5h6a.5.5 0 00.5-.5V5a.5.5 0 00-.5-.5H5z" clip-rule="evenodd"/></svg>');
+    j.removeClass('btn-primary').addClass('btn-success').html(getStopIcon());
     updateBackend(thiz, true);
   }
 }
 
 function addSprinkler(sprinkler)
 {
-  var e = $('#template').clone().removeAttr('id').removeClass('d-none').attr('id', 'entry');
+  var templateId = currentView === 'mobile' ? '#template-mobile' : '#template-desktop';
+  var e = $(templateId).clone().removeAttr('id').removeClass('d-none').attr('id', 'entry');
   setSprinkler(sprinkler, e);
 
   if (sprinkler.open) {
-    e.find('#open').removeClass('btn-primary').addClass('btn-success').html('<svg class="bi bi-stop" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.5 5A1.5 1.5 0 015 3.5h6A1.5 1.5 0 0112.5 5v6a1.5 1.5 0 01-1.5 1.5H5A1.5 1.5 0 013.5 11V5zM5 4.5a.5.5 0 00-.5.5v6a.5.5 0 00.5.5h6a.5.5 0 00.5-.5V5a.5.5 0 00-.5-.5H5z" clip-rule="evenodd"/></svg>');
+    e.find('#open').removeClass('btn-primary').addClass('btn-success').html(getStopIcon());
   }
 
   e.find('#gpio').text(sprinkler.pin);
@@ -219,7 +224,32 @@ function time2str(m, units) {
   return h + ':' + m;
 }
 
+function updateViewToggleText() {
+  if (currentView === 'mobile') {
+    $('#toggleView').text('Switch to Desktop View');
+  } else {
+    $('#toggleView').text('Switch to Mobile View');
+  }
+}
+
 function setup() {
+  updateViewToggleText();
+  $('#toggleView').click(function(e) {
+    e.preventDefault();
+    currentView = (currentView === 'desktop') ? 'mobile' : 'desktop';
+    localStorage.setItem('viewMode', currentView);
+    updateViewToggleText();
+    
+    // Re-fetch and redraw all sprinklers with the newly selected template
+    $('#sprinklers').empty();
+    $.ajax({
+      url:"/sprinklers",
+      type:"GET",
+    }).done(function(resp){
+      for (s in resp) addSprinkler(resp[s]);
+    });
+  });
+
   $('#add').click(function() {
     name = $('#add_name').val().trim()
     pin = $('#add_pin').val().trim();