80 lines
1.7 KiB
Vue
80 lines
1.7 KiB
Vue
<template>
|
|
<div class="app">
|
|
<div class="app__toolbar">
|
|
<select v-model="selectedSaveSlot">
|
|
<option
|
|
v-for="save in saveSlots"
|
|
:key="save"
|
|
:value="save"
|
|
>{{save}}</option>
|
|
</select>
|
|
<button @click="save">Save</button>
|
|
<button @click="load">Load</button>
|
|
</div>
|
|
<Graph
|
|
class="app__scene"
|
|
:graph="graph"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Graph from './Graph.vue';
|
|
import {load, save} from '../persistent';
|
|
|
|
export default {
|
|
components: {
|
|
Graph,
|
|
},
|
|
data() {
|
|
return {
|
|
graph: [],
|
|
currentSelectedSaveSlot: localStorage.getItem('IFP__SELECTED_SAVE_SLOT') || 'FIRST',
|
|
saveSlots: [
|
|
'FIRST',
|
|
'SECOND',
|
|
'THIRD',
|
|
],
|
|
}
|
|
},
|
|
computed: {
|
|
selectedSaveSlot: {
|
|
get() {
|
|
return this.currentSelectedSaveSlot;
|
|
},
|
|
set(val) {
|
|
this.currentSelectedSaveSlot = val;
|
|
localStorage.setItem('IFP__SELECTED_SAVE_SLOT', val);
|
|
}
|
|
},
|
|
|
|
},
|
|
methods: {
|
|
load() {
|
|
this.graph = load(this.selectedSaveSlot);
|
|
},
|
|
save() {
|
|
save(this.selectedSaveSlot, this.graph);
|
|
}
|
|
},
|
|
mounted() {
|
|
this.load();
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.app {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
right: 0;
|
|
font-family: sans-serif;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.app__toolbar {
|
|
padding: 10px;
|
|
text-align: right;
|
|
}
|
|
</style>
|