From 47a20cf550cb404450c1bc0b40dcfe0234725f44 Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Sat, 26 Mar 2022 21:35:26 +0900
Subject: [PATCH] =?UTF-8?q?refac:=20isEditMode=EB=A5=BC=20state=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=EC=9E=90=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/ts/PartialReservedCommand.vue          |  9 ++----
 hwe/ts/components/ChiefReservedCommand.vue |  7 ++---
 hwe/ts/util/StoredActionsHelper.ts         | 34 +++++++++++++---------
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/hwe/ts/PartialReservedCommand.vue b/hwe/ts/PartialReservedCommand.vue
index 47db9210..eebad327 100644
--- a/hwe/ts/PartialReservedCommand.vue
+++ b/hwe/ts/PartialReservedCommand.vue
@@ -398,15 +398,14 @@ setTimeout(() => {
   updateNow();
 }, 1000 - serverNow.value.getMilliseconds());
 
-
-const editModeKey = `sammo_edit_mode_key`;
-
 const queryActionHelper = new QueryActionHelper(staticValues.maxTurn);
+const storedActionsHelper = new StoredActionsHelper(staticValues.serverNick, 'general', staticValues.mapName, staticValues.unitSet);
+
 const reservedCommandList = queryActionHelper.reservedCommandList;
 const prevSelectedTurnList = queryActionHelper.prevSelectedTurnList;
 const selectedTurnList = queryActionHelper.selectedTurnList;
 
-const isEditMode = ref(localStorage.getItem(editModeKey) === '1');
+const isEditMode = storedActionsHelper.isEditMode;
 
 const flippedMaxTurn = 14;
 
@@ -656,7 +655,6 @@ function toggleQuickReserveForm(turnIdx: number) {
 
 
 watch(isEditMode, newEditMode => {
-  localStorage.setItem(editModeKey, newEditMode ? '1' : '0');
   if (newEditMode) {
     commandQuickReserveForm.value?.close();
     currentQuickReserveTarget.value = -1;
@@ -668,7 +666,6 @@ watch(isEditMode, newEditMode => {
 
 const emptyTurnObj: TurnObj = { action: '휴식', brief: '휴식', arg: {} };
 
-const storedActionsHelper = new StoredActionsHelper(staticValues.serverNick, 'general', staticValues.mapName, staticValues.unitSet);
 
 const recentActions = storedActionsHelper.recentActions;
 const storedActions = storedActionsHelper.storedActions;
diff --git a/hwe/ts/components/ChiefReservedCommand.vue b/hwe/ts/components/ChiefReservedCommand.vue
index 8363c8ce..64611c25 100644
--- a/hwe/ts/components/ChiefReservedCommand.vue
+++ b/hwe/ts/components/ChiefReservedCommand.vue
@@ -172,7 +172,7 @@ queryActionHelper.selectTurn(...$event);
               >{{ turnObj.time }}</div>
             </DragSelect>
             <DragSelect
-              :style="{ ...rowGridStyle, display: isEditMode ? 'block' : 'none' }"
+              :style="{ ...rowGridStyle, display: isEditMode ? 'grid' : 'none' }"
               attribute="turnIdx"
               :disabled="!isEditMode"
               @dragStart="isDragToggle = true"
@@ -309,8 +309,6 @@ import { BButton, BDropdownItem, BDropdownText, BButtonGroup, BDropdownDivider,
 import addMilliseconds from "date-fns/addMilliseconds";
 import CommandSelectForm from "@/components/CommandSelectForm.vue";
 
-const editModeKey = `sammo_edit_mode_key`;
-const isEditMode = ref(localStorage.getItem(editModeKey) === '1');
 
 type TurnObjWithTime = TurnObj & {
   time: string;
@@ -877,9 +875,8 @@ function toggleQuickReserveForm(turnIdx: number) {
   commandQuickReserveForm.value?.show();
 }
 
-
+const isEditMode = storedActionsHelper.isEditMode;
 watch(isEditMode, newEditMode => {
-  localStorage.setItem(editModeKey, newEditMode ? '1' : '0');
   if (newEditMode) {
     commandQuickReserveForm.value?.close();
     currentQuickReserveTarget.value = -1;
diff --git a/hwe/ts/util/StoredActionsHelper.ts b/hwe/ts/util/StoredActionsHelper.ts
index c91b3ad3..4c7aab74 100644
--- a/hwe/ts/util/StoredActionsHelper.ts
+++ b/hwe/ts/util/StoredActionsHelper.ts
@@ -7,38 +7,46 @@ export class StoredActionsHelper {
     public readonly storedActions = ref(new Map<string, [number[], TurnObj][]>());
     public readonly clipboard = ref<[number[], TurnObj][] | undefined>(undefined);
     public readonly activatedCategory = ref<string>("");
+    public readonly isEditMode = ref(false);
 
     public readonly recentActionsKey: string;
     public readonly storedActionsKey: string;
     public readonly clipboardKey: string;
     public readonly activatedCategoryKey: string;
+    public readonly editModeKey: string;
 
     constructor(protected serverNick: string, protected type: 'general' | 'nation', protected mapName: string, protected unitSet: string, protected maxRecent = 10) {
-        this.recentActionsKey = `${serverNick}_${mapName}_${unitSet}_${type}RecentActions`;
-        this.storedActionsKey = `${serverNick}_${mapName}_${unitSet}_${type}StoredActions`;
-        this.clipboardKey = `${serverNick}_${mapName}_${unitSet}_${type}Clipboard`;
-        this.activatedCategoryKey = `${serverNick}_${mapName}_${unitSet}_${type}ActivatedCategory`;
+        const typeKey = `${serverNick}_${mapName}_${unitSet}_${type}`;
+        this.recentActionsKey = `${typeKey}RecentActions`;
+        this.storedActionsKey = `${typeKey}StoredActions`;
+        this.clipboardKey = `${typeKey}Clipboard`;
+        this.activatedCategoryKey = `${typeKey}ActivatedCategory`;
+        this.editModeKey = `${serverNick}_${type}_isEditMode`;
+
         this.loadRecentActions();
         this.loadStoredActions();
 
         const rawClipboard = localStorage.getItem(this.clipboardKey);
-        if(rawClipboard !== null){
+        if (rawClipboard !== null) {
             this.clipboard.value = JSON.parse(rawClipboard);
         }
-
-        const rawActivatedCategory = localStorage.getItem(this.activatedCategoryKey);
-        if(rawActivatedCategory !== null){
-            this.activatedCategory.value = JSON.parse(rawActivatedCategory);
-        }
-
-        watch(this.clipboard, (newValue)=>{
+        watch(this.clipboard, (newValue) => {
             console.log(newValue);
             localStorage.setItem(this.clipboardKey, JSON.stringify(newValue));
         });
 
-        watch(this.activatedCategory, (newValue)=>{
+        const rawActivatedCategory = localStorage.getItem(this.activatedCategoryKey);
+        if (rawActivatedCategory !== null) {
+            this.activatedCategory.value = JSON.parse(rawActivatedCategory);
+        }
+        watch(this.activatedCategory, (newValue) => {
             localStorage.setItem(this.activatedCategoryKey, JSON.stringify(newValue));
         });
+
+        this.isEditMode.value = localStorage.getItem(this.editModeKey) === '1';
+        watch(this.isEditMode, (newValue) => {
+            localStorage.setItem(this.editModeKey, newValue ? '1' : '0')
+        })
     }
 
     loadRecentActions() {