You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

98 lines
1.6 KiB
Vue

<template>
<header>
<h1>Story Baobab</h1>
2 years ago
<div class="intro">
Drag and drop images and video to sketch a print-friendly storyboard.
</div>
</header>
<main>
2 years ago
<div class="insert-scene">
<input v-model="title" placeholder="Title">
<button @click="add">Add Scene</button>
</div>
<div class="load-scene">
<label >Load scene</label>
<input type="file" multiple @change="load">
</div>
<SceneEntry v-for="scene in scenes" :title="scene.title" :series="scene.series"/>
</main>
</template>
<script setup>
import SceneEntry from './components/SceneEntry.vue'
import {ref} from 'vue'
const scenes = ref([])
const title = ref('')
const add = () => {
scenes.value.push({
title: title.value,
series: []
})
title.value = ""
}
const load = (e) => {
let files = e.target.files
new Promise.all(files.forEach(async (file) =>{
const reader = new FileReader()
reader.readAsText(file)
reader.onloadend = (e) => {
if (e.target.readyState == FileReader.DONE) {
try {
let scene = JSON.parse(reader.result)
scenes.value.push(scene)
} catch (e) {
console.log(e)
}
}
}
})
)
}
</script>
2 years ago
<style>
header {
margin: 32px;
}
2 years ago
header h1 {
margin: 0;
}
main {
margin: 32px;
}
2 years ago
.insert-scene {
display: inline-flex;
gap: 8px;
padding: 16px;
background-color: #F3F3F3;
}
@media print {
header, .insert-scene, .add-shot {
display: none
}
}
</style>