From 3456371e39de6581bc8de4cff2aa2ae9afc911ba Mon Sep 17 00:00:00 2001
From: km0 <luzzanafrancesco@gmail.com>
Date: Tue, 23 May 2023 11:32:19 +0200
Subject: [PATCH] remove scenes

---
 src/App.vue                   | 13 ++++++++++---
 src/components/SceneEntry.vue | 33 ++++++++++++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7f0bfa4..bf4ef50 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,9 +20,12 @@
     </div>
 
 
-
-
-        <SceneEntry v-for="scene in scenes" :title="scene.title" :series="scene.series"/>
+        <SceneEntry 
+            v-for="(scene, index) in scenes" 
+            :title="scene.title" 
+            :series="scene.series"
+            @remove="remove(index)" 
+            />
 
     </main>
 </template>
@@ -45,6 +48,10 @@ const add = () => {
     title.value = ""
     }
 
+const remove = (index) => {
+    scenes.value.splice(index, 1)
+}
+
 const load = (e) => {
     let files = e.target.files
     files.forEach((file) =>{
diff --git a/src/components/SceneEntry.vue b/src/components/SceneEntry.vue
index 0c3252e..2a56402 100644
--- a/src/components/SceneEntry.vue
+++ b/src/components/SceneEntry.vue
@@ -1,7 +1,10 @@
 <template>
     <section class="scene">
 
+    <div class="header">
     <h2>{{title}}</h2>
+    <button class="remove" @click="removeScene">remove</button>
+    </div>
     
     <draggable
         tag="transition-group"
@@ -61,6 +64,8 @@ const props = defineProps({
     series: Array
     })
 
+const emit = defineEmits(['remove'])
+
 const shots = ref(props.series || [])
 
 const drag = ref(false)
@@ -82,6 +87,10 @@ const remove = (index) => {
     shots.value.splice(index, 1)
 }
 
+const removeScene = () => {
+    emit('remove')
+}
+
 const serialize = async () => {
 
     let series = await Promise.all(shots.value.map(async (shot) => {
@@ -113,6 +122,8 @@ const serialize = async () => {
     gap: 16px;
 }
 
+
+
 .ghost {
     opacity: 0.5;
 }
@@ -121,10 +132,30 @@ const serialize = async () => {
     margin-block: 32px;
 }
 
-.scene h2 {
+.header {
     margin-block: 32px;
+    display: flex;
+    gap: 8px;
     }
 
+.header h2 {
+    margin: 0;
+}
+
+.header .remove {
+    position: relative;
+    color: currentColor;
+    opacity: 0.5;
+    font-size: 0.8rem;
+
+}
+
+.header .remove:hover {
+    opacity: 1;
+    background: none;
+    color: currentColor;
+}
+
 @media print {