DayStartAdjustmentSetting

website/client/src/components/ui/selectList.vue

@@ -23,11 +23,11 @@
         v-for="item in items"
         :key="keyProp ? item[keyProp] : item"
         :disabled="typeof item[disabledProp] === 'undefined' ? false : item[disabledProp]"
-        :active="activeKeyProp ? item[activeKeyProp] === selected : item === selected"
+        :active="isSelected(item)"
         :class="{
-          active: activeKeyProp ? item[activeKeyProp] === selected : item === selected,
+          active: isSelected(item),
           selectListItem: true,
-          showIcon: !hideIcon && item === selected
+          showIcon: !hideIcon && isSelected(item)
         }"
         @click="selectItem(item)"
       >
@@ -135,6 +135,13 @@ export default {
       this.selected = item;
       this.$emit('select', item);
     },
+    isSelected (item) {
+      if (this.activeKeyProp) {
+        return item[this.activeKeyProp] === this.selected;
+      }
+
+      return item === this.selected;
+    },
   },
 };
 </script>

website/client/src/pages/settings-overview.vue

@@ -97,7 +97,7 @@
         font-weight: bold;
         color: $gray-50;
 
-        width: 20%;
+        width: 23%;
       }
 
       .input-area .settings-label {

website/client/src/pages/settings/generalSettings.vue

@@ -44,11 +44,7 @@
       <table class="table">
         <language-setting />
         <date-format-setting />
-        <tr>
-          <td colspan="3">
-            Day Start TODO
-          </td>
-        </tr>
+        <day-start-adjustment-setting />
         <tr>
           <td colspan="3">
             Audio TODO
@@ -109,6 +105,11 @@
     width: 100%;
     margin-top: 5px;
   }
+
+  .standard-page {
+    padding-left: 0;
+    padding-right: 0;
+  }
 </style>
 
 <script>
@@ -122,9 +123,11 @@ import DeleteAccount from './inlineSettings/deleteAccount';
 import { sharedInlineSettingStore } from './components/inlineSettingMixin';
 import LanguageSetting from './inlineSettings/languageSetting';
 import DateFormatSetting from '@/pages/settings/inlineSettings/dateFormatSetting';
+import DayStartAdjustmentSetting from '@/pages/settings/inlineSettings/dayStartAdjustmentSetting.vue';
 
 export default {
   components: {
+    DayStartAdjustmentSetting,
     DateFormatSetting,
     LanguageSetting,
     DeleteAccount,

website/client/src/pages/settings/inlineSettings/dayStartAdjustmentSetting.vue

@@ -0,0 +1,188 @@
+<template>
+  <fragment>
+    <tr
+      v-if="!modalVisible"
+    >
+      <td class="settings-label">
+        {{ $t("dayStartAdjustment") }}
+      </td>
+      <td class="settings-value">
+        {{ selectedDayStartLabel(user.preferences.dayStart) }}
+      </td>
+      <td class="settings-button">
+        <a
+          class="edit-link"
+          @click.prevent="openModal()"
+        >
+          {{ $t('edit') }}
+        </a>
+      </td>
+    </tr>
+    <tr
+      v-if="modalVisible"
+      class="expanded"
+    >
+      <td colspan="3">
+        <div
+          v-once
+          class="dialog-title"
+        >
+          {{ $t("dayStartAdjustment") }}
+        </div>
+        <div
+          v-once
+          class="dialog-disclaimer"
+          v-html="$t('customDayStartInfo1')"
+        >
+        </div>
+
+        <div class="input-area">
+          <div class="settings-label">
+            {{ $t("adjustment") }}
+          </div>
+          <div class="form-group">
+            <select-list
+              :items="dayStartOptions"
+              :value="newDayStart"
+              key-prop="value"
+              active-key-prop="value"
+              :hide-icon="false"
+              @select="changeDayStart($event)"
+            >
+              <template #item="{ item }">
+                <span v-if="item === newDayStart">
+                  {{ selectedDayStartLabel(newDayStart) }}
+                </span>
+                <span v-else>
+                  {{ item?.name }}
+                </span>
+              </template>
+            </select-list>
+          </div>
+        </div>
+        <small
+          class="timezone-explain"
+        >
+          <p v-html="$t('timezoneUTC', {utc: timezoneOffsetToUtc})"></p>
+          <p v-html="$t('timezoneInfo')"></p>
+        </small>
+
+        <div class="input-area">
+          <save-cancel-buttons
+            :disable-save="newDayStart === user.preferences.dayStart"
+            @saveClicked="saveDayStart()"
+            @cancelClicked="closeModal()"
+          />
+        </div>
+      </td>
+    </tr>
+  </fragment>
+</template>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+.timezone-explain {
+  font-size: 12px;
+  line-height: 1.33;
+
+  color: $gray-100;
+  text-align: center;
+}
+</style>
+
+<script>
+import axios from 'axios';
+import moment from 'moment/moment';
+import { mapState } from '@/libs/store';
+
+import { InlineSettingMixin } from '../components/inlineSettingMixin';
+import SaveCancelButtons from '../components/saveCancelButtons.vue';
+import SelectList from '@/components/ui/selectList.vue';
+import getUtcOffset from '../../../../../common/script/fns/getUtcOffset';
+
+
+export default {
+  components: { SelectList, SaveCancelButtons },
+  mixins: [InlineSettingMixin],
+  data () {
+    const dayStartOptions = [];
+    for (let number = 0; number <= 12; number += 1) {
+      const meridian = number < 12 ? 'AM' : 'PM';
+      const hour = number % 12;
+      const timeWithMeridian = `(${hour || 12}:00 ${meridian})`;
+      const option = {
+        value: number,
+        name: `+${number} hours ${timeWithMeridian}`,
+      };
+
+      if (number === 0) {
+        option.name = `Default ${timeWithMeridian}`;
+      }
+
+      dayStartOptions.push(option);
+    }
+
+    return {
+      newDayStart: 0,
+      dayStartOptions,
+    };
+  },
+  mounted () {
+    this.newDayStart = this.user.preferences.dayStart;
+  },
+  computed: {
+    ...mapState({
+      user: 'user.data',
+    }),
+    timezoneOffsetToUtc () {
+      const offsetString = moment().utcOffset(getUtcOffset(this.user)).format('Z');
+      return `UTC${offsetString}`;
+    },
+    dayStart () {
+      return this.user.preferences.dayStart;
+    },
+  },
+  methods: {
+    changeDayStart ($event) {
+      this.newDayStart = $event.value;
+    },
+    async saveDayStart () {
+      this.user.preferences.dayStart = this.newDayStart;
+      await axios.post('/api/v4/user/custom-day-start', {
+        dayStart: this.newDayStart,
+      });
+
+      this.closeModal();
+    },
+    selectedDayStartLabel (dayStartValue) {
+      if (!this.dayStartOptions) {
+        return '';
+      }
+
+      return this.dayStartOptions.find(l => l.value === dayStartValue)?.name ?? '';
+    },
+    openDayStartModal () {
+      const nextCron = this.calculateNextCron();
+      // @TODO: Add generic modal
+      if (!window.confirm(this.$t('sureChangeCustomDayStartTime', { time: nextCron }))) return; // eslint-disable-line no-alert
+      this.saveDayStart();
+      // $rootScope.openModal('change-day-start', { scope: $scope });
+    },
+    calculateNextCron () {
+      let nextCron = moment()
+        .hours(this.newDayStart)
+        .minutes(0)
+        .seconds(0)
+        .milliseconds(0);
+
+      const currentHour = moment().format('H');
+      if (currentHour >= this.newDayStart) {
+        nextCron = nextCron.add(1, 'day');
+      }
+
+      return nextCron.format(`${this.user.preferences.dateFormat.toUpperCase()} @ h:mm a`);
+    },
+  },
+};
+</script>