wip: edit dialog for presets

src/App.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, watch, computed, onBeforeUnmount } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faMinus, faPlus, faPlay, faStop, faTrash, faArrowDown, faList, faGrip, faDownload, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { faMinus, faPlus, faPlay, faStop, faTrash, faArrowDown, faList, faGrip, faDownload, faUpload, faCheck } from "@fortawesome/free-solid-svg-icons";
 
 // App Einstellungen
 const view = ref(loadView());
@@ -22,7 +22,8 @@ let nextNoteTime = 0;
 let timerID = null;
 
 const presets = ref(loadPresets());
-let selectedPreset = ref(null);
+const selectedPreset = ref(null);
+const editPreset = ref(null);
 
 // Wie weit im Voraus Audio geplant wird
 const scheduleAheadTime = 0.1; // 100 ms
@@ -130,8 +131,9 @@ function loadPresets() {
 
 function addPreset() {
   const nextId = Math.max(0, ...presets.value.map(p => p.id)) + 1;
-  const preset = { tempo: bpm.value, id: nextId };
+  const preset = { tempo: bpm.value, id: nextId, title: "" };
   presets.value.push(preset);
+  editPreset.value = preset;
 }
 
 function deletePreset() {
@@ -149,6 +151,10 @@ function startPreset(preset) {
   }
 }
 
+function savePreset() {
+  editPreset.value = null;
+}
+
 const sortedPresets = computed(() =>
   [...presets.value].sort((a, b) => a.tempo - b.tempo)
 );
@@ -218,6 +224,15 @@ watch(
 
 <template>
   <input type="file" ref="fileInput" accept="application/json" @change="importPresets" hidden>
+
+  <div id="dialog" ref="dialog" v-if="editPreset">
+    <div id="dialogPreset">
+      <h1>{{ editPreset.tempo }} bpm</h1>
+      <input type="text" placeholder="Title (optional)" name="presetTitle" id="presetTitle" v-model="editPreset.title">
+      <button id="presetDone" @click="savePreset"> <font-awesome-icon :icon="faCheck" size="xl" /></button>
+    </div>
+  </div>
+
   <header>
     <div id="controls">
       <h1>Speed</h1>

src/assets/main.css

@@ -158,7 +158,7 @@ button#stop {
 }
 
 #presetsItems.list .presetItem h2 {
-  margin: 0 4px;
+  margin: 4px;
 }
 
 #presetsItems.list .presetItem h3 {
@@ -173,7 +173,7 @@ button#stop {
 }
 
 #presetsItems.grid .presetItem h2 {
-  margin: 8px;
+  margin: 4px;
 }
 
 #presetsItems.grid .presetItem h3 {
@@ -196,6 +196,45 @@ input[type="number"] {
   appearance: textfield;
 }
 
+.flex {
+  display: flex;
+}
+
 .grow {
   flex-grow: 1;
+}
+
+/* DIALOG */
+#dialog {
+  position: fixed;
+  z-index: 100;
+  height: 100%;
+  width: 100%;
+  background: var(--dark50);
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+}
+
+#dialogPreset {
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--white);
+  margin: 16px;
+  padding: 16px;
+}
+
+#dialogPreset input {
+  border-radius: 2px;
+  border: 1px solid var(--gray);
+  font-size: xx-large;
+}
+
+#dialogPreset button {
+  align-self: flex-end;
+  width: 48px;
+  height: 48px;
+  margin-top: 16px;
+  background-color: var(--success);
 }