mirror of
https://github.com/Lissy93/dashy.git
synced 2025-12-24 01:15:08 +01:00
85 lines
1.9 KiB
Vue
85 lines
1.9 KiB
Vue
<template>
|
|
<div class="json-editor-outer">
|
|
<v-jsoneditor
|
|
v-model="jsonData"
|
|
:options="options"
|
|
height="650px"
|
|
/>
|
|
<button class="save-button" @click="save()">Save Changes</button>
|
|
<p class="note">
|
|
It is recommend to backup your existing confiruration before making any changes.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import VJsoneditor from 'v-jsoneditor';
|
|
import { localStorageKeys } from '@/utils/defaults';
|
|
|
|
export default {
|
|
name: 'JsonEditor',
|
|
props: {
|
|
sections: Array,
|
|
},
|
|
components: {
|
|
VJsoneditor,
|
|
},
|
|
data() {
|
|
return {
|
|
jsonData: this.sections,
|
|
options: {
|
|
mode: 'tree',
|
|
modes: ['tree', 'code', 'preview'],
|
|
name: 'sections',
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
save() {
|
|
localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(this.jsonData));
|
|
this.$toasted.show('Changes seved succesfully');
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.json-editor-outer {
|
|
text-align: center;
|
|
}
|
|
p.note {
|
|
font-size: 0.8rem;
|
|
color: var(--medium-grey);
|
|
margin: 0.2rem;
|
|
}
|
|
button.save-button {
|
|
padding: 0.5rem 1rem;
|
|
margin: 0.25rem auto;
|
|
font-size: 1.2rem;
|
|
background: var(--config-settings-color);
|
|
color: var(--config-settings-background);
|
|
border: 1px solid var(--config-settings-background);
|
|
border-radius: var(--curve-factor);
|
|
cursor: pointer;
|
|
&:hover {
|
|
background: var(--config-settings-background);
|
|
color: var(--config-settings-color);
|
|
}
|
|
}
|
|
|
|
.jsoneditor-menu {
|
|
background: var(--config-settings-background);
|
|
color: var(--config-settings-color);
|
|
}
|
|
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
|
|
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,
|
|
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {
|
|
background: var(--config-settings-color);
|
|
color: var(--config-settings-background);
|
|
}
|
|
.jsoneditor-poweredBy {
|
|
display: none;
|
|
}
|
|
</style>
|