mirror of
https://github.com/Lissy93/dashy.git
synced 2025-07-23 13:45:33 +02:00
Implemented config validation into the JSON editor
This commit is contained in:
parent
7d5a99d9d3
commit
89ac1d1e36
@ -13,6 +13,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"ajv": "^8.5.0",
|
||||
"ajv7": "npm:ajv@^7.2.2",
|
||||
"axios": "^0.21.1",
|
||||
"connect": "^3.7.0",
|
||||
"crypto-js": "^4.0.0",
|
||||
|
@ -48,7 +48,7 @@
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem name="Edit Sections">
|
||||
<JsonEditor :sections="sections" />
|
||||
<JsonEditor :config="config" />
|
||||
</TabItem>
|
||||
<TabItem name="Edit Site Meta">
|
||||
<EditSiteMeta :config="config" />
|
||||
|
@ -5,7 +5,17 @@
|
||||
:options="options"
|
||||
height="650px"
|
||||
/>
|
||||
<button class="save-button" @click="save()">Save Changes</button>
|
||||
<button :class="`save-button ${!isValid ? 'err' : ''}`" @click="save()">Save Changes</button>
|
||||
<p class="errors">
|
||||
<ul>
|
||||
<li v-for="(error, index) in errorMessages" :key="index" :class="`type-${error.type}`">
|
||||
{{error.msg}}
|
||||
</li>
|
||||
<li v-if="errorMessages.length < 1" class="type-valid">
|
||||
Config is Valid
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p class="note">
|
||||
It is recommend to backup your existing confiruration before making any changes.
|
||||
<br>
|
||||
@ -19,30 +29,84 @@
|
||||
|
||||
import VJsoneditor from 'v-jsoneditor';
|
||||
import { localStorageKeys } from '@/utils/defaults';
|
||||
import configSchema from '@/utils/ConfigSchema';
|
||||
import Ajv from 'ajv7';
|
||||
|
||||
export default {
|
||||
name: 'JsonEditor',
|
||||
props: {
|
||||
sections: Array,
|
||||
config: Object,
|
||||
},
|
||||
components: {
|
||||
VJsoneditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
jsonData: this.sections,
|
||||
jsonData: this.config,
|
||||
errorMessages: [],
|
||||
options: {
|
||||
schema: configSchema,
|
||||
mode: 'tree',
|
||||
modes: ['tree', 'code', 'preview'],
|
||||
name: 'sections',
|
||||
name: 'config',
|
||||
ajv: new Ajv({
|
||||
allErrors: true,
|
||||
verbose: true,
|
||||
jsPropertySyntax: false,
|
||||
$data: true,
|
||||
}),
|
||||
onValidationError: this.validationErrors,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isValid() {
|
||||
return this.errorMessages.length < 1;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(this.jsonData));
|
||||
const data = this.jsonData;
|
||||
if (data.sections) {
|
||||
localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(data.sections));
|
||||
}
|
||||
if (data.pageInfo) {
|
||||
localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(data.pageInfo));
|
||||
}
|
||||
if (data.appConfig) {
|
||||
localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(data.appConfig));
|
||||
}
|
||||
if (data.appConfig.theme) {
|
||||
localStorage.setItem(localStorageKeys.THEME, data.appConfig.theme);
|
||||
}
|
||||
this.$toasted.show('Changes saved succesfully');
|
||||
},
|
||||
validationErrors(errors) {
|
||||
const errorMessages = [];
|
||||
errors.forEach((error) => {
|
||||
switch (error.type) {
|
||||
case 'validation':
|
||||
errorMessages.push({
|
||||
type: 'validation',
|
||||
msg: `Validatation Warning: ${error.error.keyword} ${error.error.message}`,
|
||||
});
|
||||
break;
|
||||
case 'error':
|
||||
errorMessages.push({
|
||||
type: 'parse',
|
||||
msg: error.message,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
errorMessages.push({
|
||||
type: 'editor',
|
||||
msg: 'Error in JSON',
|
||||
});
|
||||
break;
|
||||
}
|
||||
});
|
||||
this.errorMessages = errorMessages;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -57,6 +121,30 @@ p.note {
|
||||
color: var(--medium-grey);
|
||||
margin: 0.2rem;
|
||||
}
|
||||
p.errors {
|
||||
text-align: left;
|
||||
margin: 0.5rem auto;
|
||||
width: 95%;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
li {
|
||||
&.type-validation {
|
||||
color: var(--warning);
|
||||
&::before { content: "⚠️"; }
|
||||
}
|
||||
&.type-parse {
|
||||
color: var(--danger);
|
||||
&::before { content: "❌"; }
|
||||
}
|
||||
&.type-valid {
|
||||
color: var(--success);
|
||||
&::before { content: "✅"; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
button.save-button {
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0.25rem auto;
|
||||
@ -71,6 +159,15 @@ button.save-button {
|
||||
color: var(--config-settings-color);
|
||||
border-color: var(--config-settings-color);
|
||||
}
|
||||
&.err {
|
||||
opacity: 0.8;
|
||||
cursor: default;
|
||||
&:hover {
|
||||
background: var(--config-settings-color);
|
||||
color: var(--config-settings-background);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jsoneditor-menu {
|
||||
|
@ -74,16 +74,16 @@ module.exports = {
|
||||
description: 'Theme names to be added to the dropdown',
|
||||
items: {
|
||||
type: 'string',
|
||||
}
|
||||
},
|
||||
},
|
||||
externalStyleSheet: {
|
||||
description: 'URL or URLs of external stylesheets to add to dropdown/ load',
|
||||
type: [
|
||||
'string', 'array'
|
||||
'string', 'array',
|
||||
],
|
||||
items: {
|
||||
type: 'string',
|
||||
}
|
||||
},
|
||||
},
|
||||
customCss: {
|
||||
type: 'string',
|
||||
@ -211,7 +211,7 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
Loading…
x
Reference in New Issue
Block a user