started config editor
This commit is contained in:
parent
63978a522c
commit
015a89fe2b
82
src/components/ConfigEditor.vue
Normal file
82
src/components/ConfigEditor.vue
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
v-if="template.type === 'object'"
|
||||||
|
class="editor"
|
||||||
|
>
|
||||||
|
<p v-text="template.name" />
|
||||||
|
<ConfigEditor
|
||||||
|
v-for="(prop,key) of template.properties"
|
||||||
|
:key="key"
|
||||||
|
:template="prop"
|
||||||
|
:config="config[prop.name]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="template.type === 'array'"
|
||||||
|
class="editor"
|
||||||
|
>
|
||||||
|
<ConfigEditor
|
||||||
|
v-for="(child,key) of config"
|
||||||
|
:key="key"
|
||||||
|
:config="child"
|
||||||
|
:template="template.child"
|
||||||
|
/>
|
||||||
|
<button type="button">
|
||||||
|
add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="template.type === 'string'"
|
||||||
|
class="editor"
|
||||||
|
>
|
||||||
|
<label v-text="template.name || ''" />
|
||||||
|
<input
|
||||||
|
v-model="config"
|
||||||
|
type="text"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="template.type === 'number'"
|
||||||
|
class="editor"
|
||||||
|
>
|
||||||
|
<label v-text="template.name || ''" />
|
||||||
|
<input
|
||||||
|
v-model="config"
|
||||||
|
type="number"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="template.type === 'boolean'"
|
||||||
|
class="editor"
|
||||||
|
>
|
||||||
|
<label v-text="template.name || ''" />
|
||||||
|
<input
|
||||||
|
v-model="config"
|
||||||
|
type="checkbox"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<pre v-else>
|
||||||
|
invalid config
|
||||||
|
</pre>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ConfigEditor',
|
||||||
|
props: {
|
||||||
|
// eslint-disable-next-line vue/require-prop-types
|
||||||
|
config: { required: true },
|
||||||
|
template: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.editor {
|
||||||
|
border: 1px solid black;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
34
src/template.js
Normal file
34
src/template.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
export default {
|
||||||
|
type: 'array',
|
||||||
|
child: {
|
||||||
|
type: 'object',
|
||||||
|
properties: [
|
||||||
|
{
|
||||||
|
type: 'string',
|
||||||
|
name: 'type'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'columns',
|
||||||
|
type: 'array',
|
||||||
|
child: { type: 'string' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'x',
|
||||||
|
type: 'string'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'y',
|
||||||
|
type: 'array',
|
||||||
|
child: {
|
||||||
|
type: 'object',
|
||||||
|
properties: [
|
||||||
|
{ type: 'string', name: 'label' },
|
||||||
|
{ type: 'string', name: 'field' },
|
||||||
|
{ type: 'string', name: 'color' },
|
||||||
|
{ type: 'string', name: 'fill' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
@ -2,9 +2,12 @@
|
|||||||
<div
|
<div
|
||||||
class="grid"
|
class="grid"
|
||||||
>
|
>
|
||||||
<textarea v-model="config" />
|
<ConfigEditor
|
||||||
|
:config="config"
|
||||||
|
:template="template"
|
||||||
|
/>
|
||||||
<ViewComponent
|
<ViewComponent
|
||||||
v-for="(item,key) of parsed_config"
|
v-for="(item,key) of config"
|
||||||
:key="key"
|
:key="key"
|
||||||
:config="item"
|
:config="item"
|
||||||
:data="parsed_log"
|
:data="parsed_log"
|
||||||
@ -14,25 +17,20 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Vuex from 'vuex';
|
import Vuex from 'vuex';
|
||||||
import hjson from 'hjson';
|
|
||||||
import ViewComponent from '../components/ViewComponent.vue';
|
import ViewComponent from '../components/ViewComponent.vue';
|
||||||
|
import ConfigEditor from '../components/ConfigEditor.vue';
|
||||||
import default_config from '../default';
|
import default_config from '../default';
|
||||||
|
import default_template from '../template';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { ViewComponent },
|
components: { ViewComponent, ConfigEditor },
|
||||||
data () {
|
data () {
|
||||||
return { config: hjson.stringify (default_config) };
|
return {
|
||||||
|
config: default_config,
|
||||||
|
template: default_template
|
||||||
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
parsed_config () {
|
|
||||||
try {
|
|
||||||
return hjson.parse (this.config);
|
|
||||||
}
|
|
||||||
catch {
|
|
||||||
// noop
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
},
|
|
||||||
parsed_log () {
|
parsed_log () {
|
||||||
return this.log.map ((l) => {
|
return this.log.map ((l) => {
|
||||||
l.data = JSON.parse (l.data);
|
l.data = JSON.parse (l.data);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user