131 lines
3.8 KiB
Vue
131 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import DynamicComponent from '@/components/DynamicComponent.vue';
|
|
import type { OptionalDynamicComponentData } from '@/composables/dynamic.ts';
|
|
import { ref, watchEffect } from 'vue';
|
|
import { parseJsonString, toJsonString } from '@/composables/json.ts';
|
|
|
|
const data = ref<OptionalDynamicComponentData>({ type: 'none' });
|
|
|
|
const panel_id = ref<string | null>(null);
|
|
const panel_name = ref<string>('Untitled Panel');
|
|
const loading = ref(false);
|
|
|
|
const selected = ref<symbol>();
|
|
const panel_list = ref<{ name: string; id: string }[]>([]);
|
|
const load_screen = ref(true);
|
|
|
|
const unselect = () => {
|
|
selected.value = undefined;
|
|
};
|
|
|
|
async function reload_panel_list() {
|
|
const res = await fetch(`/api/panel`);
|
|
panel_list.value = await res.json();
|
|
}
|
|
watchEffect(reload_panel_list);
|
|
|
|
async function load(id: string) {
|
|
data.value = { type: 'none' };
|
|
load_screen.value = false;
|
|
loading.value = true;
|
|
const panel_data = await fetch(`/api/panel/${id}`);
|
|
const panel_json_value = await panel_data.json();
|
|
data.value = parseJsonString(
|
|
panel_json_value['data'],
|
|
) as OptionalDynamicComponentData;
|
|
panel_name.value = panel_json_value['name'];
|
|
panel_id.value = id;
|
|
loading.value = false;
|
|
}
|
|
async function newPanel() {
|
|
data.value = { type: 'none' };
|
|
panel_name.value = 'Untitled Panel';
|
|
panel_id.value = null;
|
|
loading.value = false;
|
|
load_screen.value = false;
|
|
}
|
|
|
|
async function save() {
|
|
loading.value = true;
|
|
const panel_id_value = panel_id.value;
|
|
if (panel_id_value) {
|
|
const res = await fetch(`/api/panel/${panel_id_value}`, {
|
|
method: 'PUT',
|
|
body: toJsonString({
|
|
name: panel_name.value,
|
|
data: toJsonString(data.value),
|
|
}),
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
});
|
|
await res.json();
|
|
} else {
|
|
const res = await fetch('/api/panel', {
|
|
method: 'POST',
|
|
body: toJsonString({
|
|
name: panel_name.value,
|
|
data: toJsonString(data.value),
|
|
}),
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
});
|
|
const uuid = await res.json();
|
|
panel_id.value = uuid as string;
|
|
}
|
|
loading.value = false;
|
|
}
|
|
|
|
async function showLoadScreen() {
|
|
load_screen.value = true;
|
|
await reload_panel_list();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="load_screen" class="column grow">
|
|
<div class="row">
|
|
<button @click.stop.prevent="newPanel">New</button>
|
|
</div>
|
|
<div v-for="panel of panel_list" :key="panel.id" class="row">
|
|
<button @click.stop.prevent="() => load(panel.id)">Load</button>
|
|
<span>
|
|
{{ panel.name }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div v-else class="row grow">
|
|
<div class="panel-content scroll no-min-height" @click="unselect">
|
|
<DynamicComponent
|
|
v-model:data="data"
|
|
:editable="true"
|
|
v-model:selection="selected"
|
|
></DynamicComponent>
|
|
</div>
|
|
<div id="sidebar" class="column">
|
|
<div class="row">
|
|
<label>Name:</label>
|
|
<input :disabled="loading" type="text" v-model="panel_name" />
|
|
</div>
|
|
<div class="row">
|
|
<button :disabled="loading" @click.prevent.stop="save">
|
|
{{ panel_id ? 'Save' : 'New' }}
|
|
</button>
|
|
<button @click.prevent.stop="showLoadScreen">Load</button>
|
|
</div>
|
|
<div id="inspector" class="column"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@use '@/assets/variables';
|
|
|
|
#sidebar {
|
|
width: 25%;
|
|
height: 100vh;
|
|
background: variables.$dark-background-color;
|
|
}
|
|
</style>
|