Web: Sleep schedule UX updates

web/app/src/assets/base.css

@@ -223,7 +223,7 @@ h2.column-title {
   color: var(--color-text-hint);
   font-size: var(--font-size-base);
   margin: 0;
-  padding-bottom: var(--spacer-xs);
+  padding-bottom: var(--spacer-sm);
 }
 
 h3.sub-title {

web/app/src/components/SwitchCheckbox.vue

@@ -0,0 +1,84 @@
+<template>
+  <label>
+    <span class="switch">
+      <input type="checkbox" :checked="isChecked" @change="$emit('switchToggle')">
+      <span class="slider round"></span>
+    </span>
+    <span class="switch-label">{{ label }}</span>
+  </label>
+</template>
+
+<script setup>
+const props = defineProps(['isChecked', 'label']);
+</script>
+
+<style scoped>
+
+label {
+  display: inline-block;
+}
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 32px;
+  height: 14px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--color-text-muted);
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 10px;
+  width: 10px;
+  left: 4px;
+  bottom: 2px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: var(--color-accent);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px var(--color-accent);
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(14px);
+  -ms-transform: translateX(14px);
+  transform: translateX(14px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 10px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+.switch-label {
+  margin-left: 0.5rem;
+  cursor: pointer;
+}
+
+</style>

web/app/src/components/workers/WorkerDetails.vue

@@ -35,35 +35,18 @@
     </dl>
 
     <section class="sleep-schedule" :class="{'is-schedule-active': workerSleepSchedule.is_active}">
-      <h3 class="sub-title">Sleep Schedule</h3>
-      <div class="btn-bar-group">
-        <div class="btn-bar">
-          <label for="toggle-sleep-schedule" v-if="!isScheduleEditing">
-            <input
-              v-model="workerSleepSchedule.is_active"
-              @change="toggleWorkerSleepSchedule"
-              class="toggle-sleep-schedule"
-              id="toggle-sleep-schedule"
-              type="checkbox">
-            <span class="btn btn-primary" v-if="workerSleepSchedule.is_active">
-              Turn Schedule Off
-            </span>
-            <span class="btn" v-else>
-              Turn Schedule On
-            </span>
-          </label>
-
-          <button v-if="isScheduleEditing" @click="cancelEditWorkerSleepSchedule" class="btn">Cancel</button>
-          <button v-if="isScheduleEditing" @click="saveWorkerSleepSchedule" class="btn btn-primary">Save Schedule</button>
-          <button v-else @click="isScheduleEditing = true" class="btn btn-secondary">Edit</button>
+      <h3 class="sub-title">
+        <switch-checkbox
+          :isChecked="workerSleepSchedule.is_active"
+          @switch-toggle="toggleWorkerSleepSchedule" >
+        </switch-checkbox>
+        Sleep Schedule
+        <div v-if="!isScheduleEditing" class="sub-title-buttons">
+          <button @click="isScheduleEditing = true">Edit</button>
         </div>
-      </div>
+      </h3>
+      <p>Time of the day (and on which days) this worker should go to sleep. </p>
 
-      <div v-if="isScheduleEditing">
-        <p>
-          Adjust at which time of the day (and on which days) this worker should go to sleep.
-        </p>
-      </div>
       <div class="sleep-schedule-edit" v-if="isScheduleEditing">
         <div>
           <label>Days of the week</label>
@@ -86,13 +69,18 @@
         <span class="input-help-text">
           Use 24-hour format.
         </span>
+        <div class="btn-bar-group">
+          <div class="btn-bar">
+            <button v-if="isScheduleEditing" @click="cancelEditWorkerSleepSchedule" class="btn">Cancel</button>
+            <button v-if="isScheduleEditing" @click="saveWorkerSleepSchedule" class="btn btn-primary">Save Schedule</button>
+          </div>
+        </div>
       </div>
 
       <dl v-if="!isScheduleEditing">
         <dt>Status</dt>
         <dd>
-          <span v-if="workerSleepSchedule.is_active">enabled</span>
-          <span v-else>disabled</span>
+          {{ workerSleepScheduleStatusLabel }}
         </dd>
         <dt>Days of Week</dt>
         <dd>
@@ -123,6 +111,7 @@ import { WorkerMgtApi, WorkerSleepSchedule } from '@/manager-api';
 import { apiClient } from '@/stores/api-query-count';
 import { workerStatus } from "../../statusindicator";
 import LinkWorkerTask from '@/components/LinkWorkerTask.vue';
+import SwitchCheckbox from '@/components/SwitchCheckbox.vue';
 
 export default {
   props: [
@@ -130,6 +119,7 @@ export default {
   ],
   components: {
     LinkWorkerTask,
+    SwitchCheckbox,
   },
   data() {
     return {
@@ -172,6 +162,9 @@ export default {
         'end_time': this.workerSleepSchedule.end_time === '' ? '24:00' : this.workerSleepSchedule.end_time,
       }
     },
+    workerSleepScheduleStatusLabel() {
+      return this.workerSleepSchedule.is_active ? 'Enabled' : 'Disabled';
+    },
   },
   methods: {
     fetchWorkerSleepSchedule() {
@@ -195,7 +188,8 @@ export default {
         this.notifs.add(notifMessage));
     },
     toggleWorkerSleepSchedule() {
-      let verb = this.workerSleepSchedule.is_active ? 'Enabled' : 'Disabled';
+      this.workerSleepSchedule.is_active = !this.workerSleepSchedule.is_active;
+      let verb = this.workerSleepScheduleStatusLabel;
       this.setWorkerSleepSchedule(`${verb} schedule for worker ${this.workerData.name}`);
     },
     saveWorkerSleepSchedule() {
@@ -214,6 +208,21 @@ export default {
 </script>
 
 <style scoped>
+
+.sub-title {
+  position: relative;
+}
+
+.switch {
+  top: 1px;
+}
+
+.sub-title-buttons {
+  position: absolute;
+  right: var(--spacer);
+  bottom: var(--spacer-xs);
+}
+
 .sleep-schedule .btn-bar label+.btn {
   margin-left: var(--spacer-sm);
 }