add network

src/components/settings/SpaceSettings.vue

@@ -1,10 +1,149 @@
 <script setup lang="ts">
 
+import {onMounted, ref} from "vue";
+import {Divider, ToggleSwitch} from "primevue";
+import {spaceService} from "@/services/space-service";
+import {SettingType} from "@/models/enums";
+
+const spacePeriodStarts = ref(10)
+const spaceSubPeriodStarts = ref(25)
+
+const isNotificationsEnabled = ref(true)
+const days = ref([
+  {key: 'Mon', isSelected: false},
+  {key: 'Tue', isSelected: false},
+  {key: 'Wed', isSelected: false},
+  {key: 'Thu', isSelected: false},
+  {key: 'Fri', isSelected: false},
+  {key: 'Sat', isSelected: false},
+  {key: 'Sun', isSelected: false}
+]);
+const selectDay = (day: string) => {
+  let dayValue = days.value.find(i => i.key === day)
+  if (dayValue) {
+    dayValue.isSelected = !dayValue.isSelected
+    settingChanged(SettingType.NOTIFICATIONS_DAYS)
+  }
+}
+const selectAllDay = () => {
+  if (days.value.filter(i => i.isSelected).length < 7) {
+    days.value.forEach(i => i.isSelected = true)
+  } else {
+    days.value.forEach(i => i.isSelected = false)
+  }
+}
+
+
+const fetchData = async () => {
+  let settings: Record<string, string>[] = await spaceService.getSettings()
+  let periodStartsSetting = settings.find((i) => i.key === "period-start")
+  spacePeriodStarts.value = periodStartsSetting ? Number(periodStartsSetting.value) : 5
+  let subPeriodStartsSetting = settings.find((i) => i.key === "sub-period-start")
+  spaceSubPeriodStarts.value = subPeriodStartsSetting ? Number(subPeriodStartsSetting.value) : 20
+  let notificationEnabledSetting = settings.find((i) => i.key === 'notifications-enabled')
+  isNotificationsEnabled.value = notificationEnabledSetting ? notificationEnabledSetting.value == '1' : false
+  let notificationsDaysSettings = settings.find((i) => i.key === 'notifications-days')
+  if (notificationsDaysSettings) {
+    notificationsDaysSettings.value.split(',').forEach((element) => {
+      days.value.forEach((day) => {
+        if (day.key == element) {
+          day.isSelected = true
+        }
+      })
+    })
+  }
+}
+
+const settingChanged = async (setting: SettingType) => {
+  let newValue;
+  switch (setting) {
+    case SettingType.PERIOD_START:
+      newValue = spacePeriodStarts.value
+      await spaceService.setSetting(SettingType.PERIOD_START, newValue)
+      break
+    case SettingType.SUB_PERIOD_START:
+
+      newValue = spaceSubPeriodStarts.value
+      await spaceService.setSetting(SettingType.SUB_PERIOD_START, newValue)
+
+      break
+    case SettingType.NOTIFICATIONS_ENABLED:
+      newValue = isNotificationsEnabled.value ? '1' : '0'
+      await spaceService.setSetting(SettingType.NOTIFICATIONS_ENABLED, newValue)
+
+      break;
+    case SettingType.NOTIFICATIONS_DAYS:
+      newValue = Array.isArray(days.value)
+          ? days.value.filter(day => day.isSelected).map(day => day.key).join(',')
+          : '';
+
+      await spaceService.setSetting(SettingType.NOTIFICATIONS_DAYS, newValue)
+
+      break;
+    case SettingType.NOTIFICATIONS_TIME:
+      newValue = '19:30'
+      await spaceService.setSetting(SettingType.NOTIFICATIONS_TIME, newValue)
+  }
+
+}
+
+onMounted(async () => {
+  await fetchData()
+})
+
 </script>
 
 <template>
-  <div class="card">
-    Not implemented
+  <div class="flex !pb-4 !w-full">
+    <div class="flex flex-col w-full gap-4">
+      <div class="flex periods flex-col !w-full">
+        <span class="text-sm !pl-2">Space period dates</span>
+        <div class="flex card flex-col !w-full justify-between">
+          <div class="flex flex-row !w-full  justify-between pl-2 pt-2">
+            <span>Space period start</span>
+            <select class="custom-select" v-model="spacePeriodStarts"
+                    @change="settingChanged(SettingType.PERIOD_START)">
+              <option v-for="i in 31">{{ i }}</option>
+            </select>
+          </div>
+          <Divider/>
+          <div class="flex flex-row !w-full  justify-between pl-2 pb-2">
+            <span>Space sub-period start</span>
+            <select class="custom-select" v-model="spaceSubPeriodStarts"
+                    @change="settingChanged(SettingType.SUB_PERIOD_START)">
+              <option v-for="i in 31">{{ i }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="flex notifications flex-col !w-full">
+        <span class="text-sm !pl-2">Space notifications</span>
+        <div class="flex card flex-col !w-full justify-between">
+          <div class="flex flex-row !w-full  justify-between px-2 pt-2">
+            <span>Notification enabled</span>
+            <ToggleSwitch v-model="isNotificationsEnabled" @change="settingChanged(SettingType.NOTIFICATIONS_ENABLED)"/>
+          </div>
+          <Divider/>
+          <div class="flex flex-row !w-full  justify-between px-2 pb-2 items-center">
+            <span>Days reminders</span>
+            <div class="flex flex-row  items-center gap-2">
+              <button
+                  @click="isNotificationsEnabled ? selectAllDay() : ''">
+                All
+              </button>
+              <div class="flex gap-1">
+                <button v-for="day in days" class="border border-gray-200 rounded-md shadow-sm p-1"
+                        @click="isNotificationsEnabled ? selectDay(day.key): ''"
+                        :class="isNotificationsEnabled ? day.isSelected ? 'bg-green-100' : '' : 'bg-gray-100'">
+                  {{ day.key.substring(0, 1) }}
+                </button>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>