feat: custom start time (#261)

README.md

@@ -47,7 +47,7 @@
   - CN - [PRTS Wiki](http://prts.wiki/)
   - US - [GamePress](https://gamepress.gg/arknights/)
   - JP - [Wikiru](https://arknights.wikiru.jp/)
-  - KR - [Namu Wiki](https://namu.wiki/)
+  - KR - [Namu Wiki](https://namu.wiki/w/%EB%AA%85%EC%9D%BC%EB%B0%A9%EC%A3%BC)
 
 ## 版权声明
 

package.json

@@ -40,13 +40,15 @@
     "vue-i18n": "^8.28.2",
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.6.5",
+    "vue2-datepicker": "^3.11.1",
     "vue2-teleport": "^1.0.1"
   },
   "devDependencies": {
     "@actions/core": "^1.10.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@types/lodash": "^4.14.194",
+    "@types/vue2-datepicker": "^3.3.6",
     "@vue/cli-plugin-babel": "^4.5.19",
     "@vue/cli-plugin-eslint": "^4.5.19",
     "@vue/cli-plugin-pwa": "^4.5.19",

src/components/material/IreneCalculatorDialog.vue

@@ -29,7 +29,36 @@
           </div>
         </div>
       </div>
-      <div class="mdui-m-t-1">
+      <div class="mdui-valign flex-wrap settings-wrap mdui-m-t-1">
+        <mdui-switch v-model="settingsNotSave.enableCustomStartTime" :truncate="true">{{
+          $t('ireneCalc.settings.customStartTime')
+        }}</mdui-switch>
+        <DatePicker
+          v-if="settingsNotSave.enableCustomStartTime"
+          v-model="customStartTime"
+          type="datetime"
+          :lang="dataPickerI18n"
+          :show-time-panel="settingsNotSave.showTimePanel"
+          :clearable="false"
+          :show-second="false"
+          :disabled-date="date => curTimeStartOfDay.isAfter(date)"
+          @close="settingsNotSave.showTimePanel = false"
+        >
+          <template v-slot:footer>
+            <button
+              class="mx-btn mx-btn-text"
+              @click="settingsNotSave.showTimePanel = !settingsNotSave.showTimePanel"
+            >
+              {{
+                settingsNotSave.showTimePanel
+                  ? $t('ireneCalc.datePicker.selectDate')
+                  : $t('ireneCalc.datePicker.selectTime')
+              }}
+            </button>
+          </template>
+        </DatePicker>
+      </div>
+      <div class="mdui-m-t-2">
         <template v-if="settings.lazyMode">
           <mdui-number-input
             class="elite-acc-input"
@@ -106,13 +135,16 @@
 </template>
 
 <script setup>
+import 'vue2-datepicker/index.css';
 import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+import DatePicker from 'vue2-datepicker';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import isToday from 'dayjs/plugin/isToday';
 import isTomorrow from 'dayjs/plugin/isTomorrow';
 import SimpleAlert from '@/components/SimpleAlert.vue';
 import NamespacedLocalStorage from '@/utils/NamespacedLocalStorage';
+import { useDatePickerI18n } from '@/utils/datePickerI18n';
 import { MDUI_DIALOG_EMITS, useMduiDialog } from '@/mixins/mduiDialog';
 import { t } from '@/i18n';
 
@@ -136,13 +168,36 @@ const dialogRef = ref();
 const dialog = useMduiDialog(emit, dialogRef);
 defineExpose(dialog);
 
+const dataPickerI18n = useDatePickerI18n();
+
 const settings = reactive({
   lazyMode: false,
   isGuardOrSniper: false,
   startStage: 1,
   eliteAcc: ['', '', ''],
 });
 
+const settingsNotSave = reactive({
+  enableCustomStartTime: false,
+  customStartTime: null,
+  showTimePanel: false,
+});
+
+const customStartTime = computed({
+  get: () => {
+    if (settingsNotSave.customStartTime) {
+      return settingsNotSave.customStartTime;
+    }
+
+    const time = new Date();
+    time.setSeconds(0, 0);
+    return time;
+  },
+  set: val => {
+    settingsNotSave.customStartTime = val;
+  },
+});
+
 const restoreSettings = () => {
   if (!nls.has(SETTING_STORE_KEY)) return;
   const storedSettings = nls.getObject(SETTING_STORE_KEY);
@@ -224,6 +279,13 @@ const realLazyTimeArray = [realLazyTime1, realLazyTime2];
 const curTime = ref(Date.now());
 let curTimeUpdateTimer;
 
+const calcStartTime = computed(() =>
+  settingsNotSave.enableCustomStartTime && settingsNotSave.customStartTime
+    ? settingsNotSave.customStartTime.getTime()
+    : curTime.value,
+);
+const curTimeStartOfDay = computed(() => dayjs(curTime.value).startOf('day'));
+
 /**
  * @param {duration.Duration} dur
  * @param {'floor' | 'round' | 'ceil'} [opt]
@@ -246,10 +308,7 @@ const formatTime = time => {
   const timeStr = time.format(FORMAT_STR);
   if (time.isToday()) return timeStr;
   if (time.isTomorrow()) return t('common.format.tomorrow', { time: timeStr });
-  const dur = dayjs.duration(time.diff(dayjs().startOf('day')));
-  const day = dur.days();
-  if (day === 2) return t('common.format.2DaysLater', { time: timeStr });
-  return `+${day}${t('common.format.day')} ${timeStr}`;
+  return `${time.date()}${t('common.format.date')} ${timeStr}`;
 };
 
 /**
@@ -306,7 +365,7 @@ const getLazyTimeTableRow = (startTime, nth) => {
 
 const calcResult = computed(() => {
   const rows = [];
-  const firstStartTIme = dayjs(curTime.value);
+  const firstStartTIme = dayjs(calcStartTime.value);
   let finishTime;
   for (let i = settings.startStage, startTime = firstStartTIme; i <= 3; i++) {
     const { nextStartTime, row } = settings.lazyMode
@@ -414,3 +473,17 @@ onBeforeUnmount(() => {
   }
 }
 </style>
+
+<style lang="scss">
+.mx-datepicker-popup {
+  z-index: 7000;
+}
+
+.mx-input-wrapper {
+  padding: 1px 0;
+}
+
+.mx-time-content {
+  height: calc(100% - 35px);
+}
+</style>

src/i18n.d.ts

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { ComputedRef } from 'vue';
 import VueI18n from 'vue-i18n';
 
 declare module 'vue/types/vue' {
@@ -12,3 +12,5 @@ declare const i18n: VueI18n;
 export default i18n;
 
 export const t: typeof i18n.t;
+
+export const useLocale: () => ComputedRef<string>;

src/i18n.js

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { computed } from 'vue';
 import VueI18n from 'vue-i18n';
 import _ from 'lodash';
 
@@ -58,3 +58,5 @@ const i18n = new VueI18n(option);
 export default i18n;
 
 export const t = i18n.t.bind(i18n);
+
+export const useLocale = () => computed(() => i18n.locale);

src/locales/cn/common.json

@@ -70,6 +70,7 @@
   },
   "format": {
     "day": "天",
+    "date": "日",
     "tomorrow": "明天 {time}",
     "2DaysLater": "后天 {time}",
     "durationHM": "H时m分",

src/locales/cn/ireneCalc.json

@@ -4,7 +4,12 @@
     "lazyMode": "懒人模式",
     "isGuardOrSniper": "近卫/狙击",
     "initSpLv": "起始专精",
-    "spBonus": "专{i}加成%"
+    "spBonus": "专{i}加成%",
+    "customStartTime": "自定义开始时间"
+  },
+  "datePicker": {
+    "selectTime": "选择时间",
+    "selectDate": "选择日期"
   },
   "tip": {
     "lazyMode": "普通模式：专精一二时先用其他干员加速，再用艾丽妮工作 5 小时<br><br>懒人模式：专精一二全程使用艾丽妮，专三再换其他干员",

src/locales/jp/common.json

@@ -69,6 +69,7 @@
   },
   "format": {
     "day": "日",
+    "date": "日",
     "tomorrow": "明日 {time}",
     "2DaysLater": "+2日 {time}",
     "durationHM": "H時m分",

src/locales/jp/ireneCalc.json

@@ -4,7 +4,12 @@
     "lazyMode": "レイジーモード",
     "isGuardOrSniper": "前衛/狙撃",
     "initSpLv": "初期ランク",
-    "spBonus": "ランク{i}加速%"
+    "spBonus": "ランク{i}加速%",
+    "customStartTime": "カスタム開始時間"
+  },
+  "datePicker": {
+    "selectTime": "選択時間",
+    "selectDate": "選択日付"
   },
   "tip": {
     "lazyMode": "通常モード：ランク1、2の場合は他のオペレーターで加速し、その後アイリーニを使用して5時間作業<br><br>レイジーモード：ランク1、2の全過程でアイリーニを使い、ランク3の場合は他のオペレータに切り替えます",

src/locales/tw/common.json

@@ -70,6 +70,7 @@
   },
   "format": {
     "day": "天",
+    "date": "日",
     "tomorrow": "明天 {time}",
     "2DaysLater": "後天 {time}",
     "durationHM": "H時m分",

src/locales/tw/ireneCalc.json

@@ -4,7 +4,12 @@
     "lazyMode": "懶人模式",
     "isGuardOrSniper": "近衛/狙擊",
     "initSpLv": "起始專精",
-    "spBonus": "專{i}加成%"
+    "spBonus": "專{i}加成%",
+    "customStartTime": "自訂開始時間"
+  },
+  "datePicker": {
+    "selectTime": "選擇時間",
+    "selectDate": "選擇日期"
   },
   "tip": {
     "lazyMode": "普通模式：專精一二時先用其他幹員加速，再用艾麗妮工作 5 小時<br><br>懶人模式：專精一二全程使用艾麗妮，專三再換其他幹員",

src/locales/us/common.json

@@ -70,6 +70,7 @@
   },
   "format": {
     "day": "days",
+    "date": ",",
     "tomorrow": "Tmw. {time}",
     "2DaysLater": "+2days {time}",
     "durationHM": "H[h]m[m]",

src/locales/us/ireneCalc.json

@@ -4,7 +4,12 @@
     "lazyMode": "Lazy mode",
     "isGuardOrSniper": "Guard/Sniper",
     "initSpLv": "Initial level",
-    "spBonus": "Lv.{i} speed+%"
+    "spBonus": "Lv.{i} speed+%",
+    "customStartTime": "Custom start time"
+  },
+  "datePicker": {
+    "selectTime": "Select Time",
+    "selectDate": "Select Date"
   },
   "tip": {
     "lazyMode": "Normal mode: Use other operators to speed up first when training this skill to Specialization Level 1 or 2, and then switch to Irene to work for 5 hours.<br><br>Lazy mode: Use Irene for the whole process when training this skill to Specialization Level 1 or 2, and then switch to other operators to complete Specialization Level 3.",

src/utils/datePickerI18n.js

@@ -0,0 +1,26 @@
+import { useLocale } from '@/i18n';
+import { shallowRef, watch } from 'vue';
+
+const importMap = {
+  cn: () => import('vue2-datepicker/locale/zh-cn'),
+  us: () => import('vue2-datepicker/locale/en'),
+  jp: () => import('vue2-datepicker/locale/ja'),
+  kr: () => import('vue2-datepicker/locale/ko'),
+  tw: () => import('vue2-datepicker/locale/zh-tw'),
+};
+
+export const useDatePickerI18n = () => {
+  const localeData = shallowRef();
+  const locale = useLocale();
+
+  watch(
+    locale,
+    async val => {
+      if (!(val in importMap)) return;
+      localeData.value = (await importMap[val]()).default;
+    },
+    { immediate: true },
+  );
+
+  return localeData;
+};

src/views/Home.vue

@@ -99,10 +99,15 @@
         <li>
           Wiki
           <ul>
-            <li>CN &amp; TW - <a href="http://prts.wiki" target="_blank">PRTS Wiki</a></li>
+            <li>CN - <a href="http://prts.wiki/" target="_blank">PRTS Wiki</a></li>
             <li>EN - <a href="https://gamepress.gg/arknights/" target="_blank">GamePress</a></li>
             <li>JP - <a href="https://arknights.wikiru.jp/" target="_blank">Wikiru</a></li>
-            <li>KR - <a href="https://namu.wiki/" target="_blank">Namu Wiki</a></li>
+            <li
+              >KR -
+              <a href="https://namu.wiki/w/%EB%AA%85%EC%9D%BC%EB%B0%A9%EC%A3%BC" target="_blank"
+                >Namu Wiki</a
+              ></li
+            >
           </ul>
         </li>
       </ul>

yarn.lock

@@ -1581,6 +1581,13 @@
   dependencies:
     source-map "^0.6.1"
 
+"@types/vue2-datepicker@^3.3.6":
+  version "3.3.6"
+  resolved "https://mirrors.tencent.com/npm/@types/vue2-datepicker/-/vue2-datepicker-3.3.6.tgz#3c0e8ff4817fcdcb7fc0444045cda641110092fd"
+  integrity sha512-qM+TujJVg7shflf8O9nROSWpS9/3qK9URVVRPX542j1LLN/G9uubsMsGQcu0/68L/Vmxc4pYiFa26d+BzKlNxQ==
+  dependencies:
+    vue "^2.5.0"
+
 "@types/webpack-dev-server@^3.11.0":
   version "3.11.6"
   resolved "https://registry.yarnpkg.com/@types/webpack-dev-server/-/webpack-dev-server-3.11.6.tgz#d8888cfd2f0630203e13d3ed7833a4d11b8a34dc"
@@ -1876,6 +1883,15 @@
     postcss "^8.4.14"
     source-map "^0.6.1"
 
+"@vue/[email protected]":
+  version "2.7.15"
+  resolved "https://mirrors.tencent.com/npm/@vue/compiler-sfc/-/compiler-sfc-2.7.15.tgz#62135fb2f69559fc723fd9c56b8e8b0ac7864a0b"
+  integrity sha512-FCvIEevPmgCgqFBH7wD+3B97y7u7oj/Wr69zADBf403Tui377bThTjBvekaZvlRr4IwUAu3M6hYZeULZFJbdYg==
+  dependencies:
+    "@babel/parser" "^7.18.4"
+    postcss "^8.4.14"
+    source-map "^0.6.1"
+
 "@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.1.2":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
@@ -3800,6 +3816,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-format-parse@^0.2.7:
+  version "0.2.7"
+  resolved "https://mirrors.tencent.com/npm/date-format-parse/-/date-format-parse-0.2.7.tgz#a2f78bca857a821785b48abedd4426c65aa7b918"
+  integrity sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ==
+
 dateformat@^4.6.3:
   version "4.6.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-4.6.3.tgz#556fa6497e5217fedb78821424f8a1c22fa3f4b5"
@@ -10264,11 +10285,26 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue2-datepicker@^3.11.1:
+  version "3.11.1"
+  resolved "https://mirrors.tencent.com/npm/vue2-datepicker/-/vue2-datepicker-3.11.1.tgz#b2124e15f694d0fd43a92558f6929ec29338d241"
+  integrity sha512-6PU/+pnp2mgZAfnSXmbdwj9516XsEvTiw61Q5SNrvvdy8W/FCxk1GAe9UZn/m9YfS5A47yK6XkcjMHbp7aFApA==
+  dependencies:
+    date-format-parse "^0.2.7"
+
 vue2-teleport@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/vue2-teleport/-/vue2-teleport-1.0.1.tgz#1b7f9f69c1223f522cf6cd81c39b8d6019e1cf66"
   integrity sha512-hbY/Q0x8qXGFxo6h4KU4YYesUcN+uUjliqqC0PoNSgpcbS2QRb3qXi+7XMTgLYs0a8i7o1H6Mu43UV4Vbgkhgw==
 
+vue@^2.5.0:
+  version "2.7.15"
+  resolved "https://mirrors.tencent.com/npm/vue/-/vue-2.7.15.tgz#94cd34e6e9f22cd2d35a02143f96a5beac1c1f54"
+  integrity sha512-a29fsXd2G0KMRqIFTpRgpSbWaNBK3lpCTOLuGLEDnlHWdjB8fwl6zyYZ8xCrqkJdatwZb4mGHiEfJjnw0Q6AwQ==
+  dependencies:
+    "@vue/compiler-sfc" "2.7.15"
+    csstype "^3.1.0"
+
 vue@^2.6.10, vue@^2.6.11, vue@^2.7.14:
   version "2.7.14"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"