add support save and change (prep)

h1romas4 · Nov 27, 2023 · 8a89f54 · 8a89f54
1 parent ed21e75
commit 8a89f54
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 53 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -17,13 +17,26 @@ const toolTipColorMIDITab = ref("success")
 const isBusy = ref(null)
 const sequencer = ref(null) // refs
 const saveStateSequencer = reactive([])
-const saveStateMIDISetting = reactive({})
+const saveStateMIDISetting = reactive({
+  outputDeviceId: null,
+  inputDeviceId: null,
+  pcChannel: null,
+  pcMSB: null,
+  pcLSB: null,
+})
 
 /**
  * Vue Event
  */
 onMounted(async () => {
   isBusy.value = false
+  // set default sequence save state
+  for(let i = 0; i < 4; i++) {
+    saveStateSequencer.push({
+      name: `Song ${i + 1}`,
+      sequence: null,
+    })
+  }
 })
 
 /**
@@ -68,19 +81,28 @@ function onMIDISaveAndChange(outputDeviceId, inputDeviceId, pcChannel, pcMSB, pc
     toastMessageHead.value = "MIDI Setting"
     toastMessageBody.value = "Setting complited"
     new Toast(toastMessage.value).show()
+    // MIDI setting save state
+    saveStateMIDISetting.outputDeviceId = outputDeviceId
+    saveStateMIDISetting.inputDeviceId = inputDeviceId
+    saveStateMIDISetting.pcChannel = pcChannel
+    saveStateMIDISetting.pcMSB = pcMSB
+    saveStateMIDISetting.pcLSB = pcLSB
   }
 }
 
 /**
  * Vue Emets (from Sequencer)
  *
+ * @param {*} index
  * @param {*} sequence
  */
-function onSequenceSaveAndChange(sequence) {
-  console.log(sequence)
+function onSequenceSaveAndChange(index, sequence) {
+  saveStateSequencer[index].sequence = sequence
   toastMessageHead.value = "Sequencer"
-  // toastMessageBody.value = "Save complited"
-  toastMessageBody.value = "Sorry, not implimented yet!"
+  toastMessageBody.value = "Save complited."
+  if(sequence === null) {
+    toastMessageBody.value = "Save cleard."
+  }
   new Toast(toastMessage.value).show()
 }
 

diff --git a/src/components/Sequencer.vue b/src/components/Sequencer.vue
@@ -45,7 +45,6 @@ const patternBankList = ref([])
 const patternNoList = ref([])
 const patternScaleList = ref([])
 const sequence = reactive([])
-const saveSequence = reactive([])
 
 /**
  * Vue Event
@@ -248,16 +247,53 @@ function onClear() {
 
 /**
  * onSave
+ *
+ * @param {*} index
  */
-function onSave() {
-  emit("save-and-change", sequence)
+function onSave(index) {
+  let serial = []
+  if(sequence.length > 0) {
+    // serialize
+    for(let i = 0; i < sequence.length; i++) {
+      const seq = sequence[i]
+      serial.push({
+        bank: seq.bank,
+        no: seq.no,
+        scale: seq.scale,
+        step: seq.step,
+        now: 0,
+        nextPCed: false,
+      })
+    }
+  } else {
+    serial = null
+  }
+  emit("save-and-change", index, serial)
 }
 
 /**
  * onLoad
+ *
+ * @param {*} index
  */
- function onLoad() {
-  emit("save-and-change", sequence)
+ function onLoad(index) {
+  const saveState = props.saveState
+  if(saveState[index] && saveState[index].sequence != null) {
+    onClear()
+    for(let i = 0; i < saveState[index].sequence.length; i++) {
+      const seq = saveState[index].sequence[i]
+      // deserialize
+      sequence.push({
+        bank: seq.bank,
+        no: seq.no,
+        scale: seq.scale,
+        step: seq.step,
+        now: 0,
+        nextPCed: false,
+      })
+    }
+  }
+  pcFirstStep()
 }
 
 /**
@@ -340,64 +376,41 @@ function defaultValue() {
     <div class="col-3">
       <div class="btn-group me-2" role="group">
         <button
-          v-bind:disabled="isPlaying || sequence.length == 0"
+          v-bind:disabled="isPlaying"
           class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown"
           type="button">
           <b class="bi bi-box-arrow-up-left me-1"></b>
           Save
         </button>
         <ul class="dropdown-menu">
-          <li><a
-            v-on:click="onSave"
-            class="dropdown-item" href="#">
-            Song 1
-          </a></li>
-          <li><a
-            v-on:click="onSave"
-            class="dropdown-item" href="#">
-            Song 2
-          </a></li>
-          <li><a
-            v-on:click="onSave"
-            class="dropdown-item" href="#">
-            Song 3
-          </a></li>
-          <li><a
-            v-on:click="onSave"
-            class="dropdown-item" href="#">
-            Song 4
-          </a></li>
+          <li v-for="(seq, index) in saveState">
+            <a
+              v-on:click="onSave(index)"
+              class="dropdown-item"
+              href="#">
+              {{ seq.name }}
+            </a>
+          </li>
         </ul>
       </div>
       <div class="btn-group me-2" role="group">
         <button
-          v-bind:disabled="isPlaying"
+          v-bind:disabled="isPlaying || saveState.every((state) => state.sequence === null)"
           class="btn btn-outline-primary outline dropdown-toggle" data-bs-toggle="dropdown"
           type="button">
-          <b class="bi bi-box-arrow-up-left me-1"></b>
+          <b class="bi bi-box-arrow-in-down-right me-1"></b>
           Load
         </button>
         <ul class="dropdown-menu">
-          <li><a
-            v-on:click="onLoad"
-            class="dropdown-item" href="#">
-            Song 1
-          </a></li>
-          <li><a
-            v-on:click="onLoad"
-            class="dropdown-item" href="#">
-            Song 2
-          </a></li>
-          <li><a
-            v-on:click="onLoad"
-            class="dropdown-item" href="#">
-            Song 3
-          </a></li>
-          <li><a
-            v-on:click="onLoad"
-            class="dropdown-item" href="#">
-            Song 4
-          </a></li>
+          <li v-for="(seq, index) in saveState">
+            <a
+              v-on:click="onLoad(index)"
+              class="dropdown-item"
+              v-bind:class="{ 'disabled': seq.sequence == null }"
+              href="#">
+              {{ seq.name }}
+            </a>
+          </li>
         </ul>
       </div>
       <button