mirror of https://github.com/Lissy93/dashy.git
Implemented config validation into the JSON editor
This commit is contained in:
Alicia Sykes
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",
|
||||
|
|
@ -76,4 +77,4 @@
|
|||
"> 1%",
|
||||
"last 2 versions"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,217 +1,217 @@
|
|||
/**
|
||||
* This is the schema for the main app configuration (usually ./public/conf.yml)
|
||||
* It enables the users data to be validated when making changes,
|
||||
* and detailed warnings shown, to avoid any unexpected errors or issues
|
||||
*/
|
||||
module.exports = {
|
||||
type: 'object',
|
||||
required: ['sections'],
|
||||
additionalProperties: false,
|
||||
properties: {
|
||||
|
||||
/* Page Info */
|
||||
pageInfo: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
title: {
|
||||
type: 'string',
|
||||
description: 'Title and heading for the app',
|
||||
},
|
||||
description: {
|
||||
type: 'string',
|
||||
description: 'Sub-title, displayed in header',
|
||||
},
|
||||
navLinks: {
|
||||
type: 'array',
|
||||
maxItems: 6,
|
||||
description: 'Quick access links, displayed in header',
|
||||
items: {
|
||||
type: 'object',
|
||||
additionalProperties: false,
|
||||
required: ['title', 'path'],
|
||||
properties: {
|
||||
title: {
|
||||
type: 'string',
|
||||
},
|
||||
path: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
footerText: { type: 'string' },
|
||||
},
|
||||
required: ['title'],
|
||||
additionalProperties: false,
|
||||
},
|
||||
|
||||
/* App Config */
|
||||
appConfig: {
|
||||
type: 'object',
|
||||
description: 'Application configuration',
|
||||
properties: {
|
||||
backgroundImg: {
|
||||
type: 'string',
|
||||
description: 'A URL to an image asset to be displayed as background',
|
||||
},
|
||||
theme: {
|
||||
type: 'string',
|
||||
default: 'Callisto',
|
||||
description: 'A theme to be applied by default on first load',
|
||||
},
|
||||
enableFontAwesome: {
|
||||
type: 'boolean',
|
||||
default: true,
|
||||
description: 'Should load font-awesome assets',
|
||||
},
|
||||
fontAwesomeKey: {
|
||||
type: 'string',
|
||||
pattern: '^[a-z0-9]{10}$',
|
||||
description: 'API key for font-awesome',
|
||||
},
|
||||
cssThemes: {
|
||||
type: 'array',
|
||||
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'
|
||||
],
|
||||
items: {
|
||||
type: 'string',
|
||||
}
|
||||
},
|
||||
customCss: {
|
||||
type: 'string',
|
||||
description: 'Any custom CSS overides, must be minified',
|
||||
},
|
||||
},
|
||||
additionalProperties: false,
|
||||
},
|
||||
|
||||
/* Sections */
|
||||
sections: {
|
||||
type: 'array',
|
||||
description: 'Array of sections, containing items',
|
||||
items: {
|
||||
type: 'object',
|
||||
required: ['name', 'items'],
|
||||
additionalProperties: false,
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
description: 'Title/ heading for a section',
|
||||
},
|
||||
icon: {
|
||||
type: 'string',
|
||||
description: 'Icon will be displayed next to title',
|
||||
},
|
||||
/* Section Display Data */
|
||||
displayData: {
|
||||
type: 'object',
|
||||
additionalProperties: false,
|
||||
description: 'Optional meta data for customizing a section',
|
||||
properties: {
|
||||
collapsed: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
description: 'If true, section needs to be clicked to open',
|
||||
},
|
||||
color: {
|
||||
type: 'string',
|
||||
description: 'Hex code, or HTML color for section fill',
|
||||
},
|
||||
customStyles: {
|
||||
type: 'string',
|
||||
description: 'CSS overides for section container',
|
||||
},
|
||||
itemSize: {
|
||||
enum: ['small', 'medium', 'large'],
|
||||
default: 'medium',
|
||||
description: 'Size of items within the section',
|
||||
},
|
||||
rows: {
|
||||
type: 'number',
|
||||
minimum: 1,
|
||||
maximum: 5,
|
||||
default: 1,
|
||||
description: 'The amount of space that the section spans vertically',
|
||||
},
|
||||
cols: {
|
||||
type: 'number',
|
||||
minimum: 1,
|
||||
maximum: 5,
|
||||
default: 1,
|
||||
description: 'The amount of space that the section spans horizontally',
|
||||
},
|
||||
layout: {
|
||||
enum: ['grid', 'auto'],
|
||||
default: 'auto',
|
||||
description: 'If set to grid, items have uniform width, and itemCount can be set',
|
||||
},
|
||||
itemCountX: {
|
||||
type: 'number',
|
||||
minimum: 1,
|
||||
maximum: 12,
|
||||
description: 'Number of items per column',
|
||||
},
|
||||
itemCountY: {
|
||||
type: 'number',
|
||||
minimum: 1,
|
||||
maximum: 12,
|
||||
description: 'Number of items per row',
|
||||
},
|
||||
},
|
||||
},
|
||||
/* Items within a section */
|
||||
items: {
|
||||
type: 'array',
|
||||
description: 'Array of items to display with a section',
|
||||
items: {
|
||||
type: 'object',
|
||||
additionalProperties: false,
|
||||
required: ['title'],
|
||||
properties: {
|
||||
title: {
|
||||
type: 'string',
|
||||
description: 'Text shown on the item',
|
||||
},
|
||||
description: {
|
||||
type: 'string',
|
||||
nullable: true,
|
||||
description: 'Short description, shown on hover or in a tooltip',
|
||||
},
|
||||
icon: {
|
||||
type: 'string',
|
||||
nullable: true,
|
||||
description: 'An icon, either as a font-awesome identifier, local or remote URL, or auto-fetched favicon',
|
||||
},
|
||||
url: {
|
||||
type: 'string',
|
||||
description: 'The destination to navigate to when item is clicked',
|
||||
},
|
||||
target: {
|
||||
enum: ['newtab', 'sametab', 'iframe'],
|
||||
default: 'newtab',
|
||||
description: 'Opening method, when item is clicked',
|
||||
},
|
||||
color: {
|
||||
type: 'string',
|
||||
description: 'A custom fill color of the item',
|
||||
},
|
||||
provider: {
|
||||
type: 'string',
|
||||
description: 'Provider name, e.g. Microsoft',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
/**
|
||||
* This is the schema for the main app configuration (usually ./public/conf.yml)
|
||||
* It enables the users data to be validated when making changes,
|
||||
* and detailed warnings shown, to avoid any unexpected errors or issues
|
||||
*/
|
||||
module.exports = {
|
||||
type: 'object',
|
||||
required: ['sections'],
|
||||
additionalProperties: false,
|
||||
properties: {
|
||||
|
||||
/* Page Info */
|
||||
pageInfo: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
title: {
|
||||
type: 'string',
|
||||
description: 'Title and heading for the app',
|
||||
},
|
||||
description: {
|
||||
type: 'string',
|
||||
description: 'Sub-title, displayed in header',
|
||||
},
|
||||
navLinks: {
|
||||
type: 'array',
|
||||
maxItems: 6,
|
||||
description: 'Quick access links, displayed in header',
|
||||
items: {
|
||||
type: 'object',
|
||||
additionalProperties: false,
|
||||
required: ['title', 'path'],
|
||||
properties: {
|
||||
title: {
|
||||
type: 'string',
|
||||
},
|
||||
path: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
footerText: { type: 'string' },
|
||||
},
|
||||
required: ['title'],
|
||||
additionalProperties: false,
|
||||
},
|
||||
|
||||
/* App Config */
|
||||
appConfig: {
|
||||
type: 'object',
|
||||
description: 'Application configuration',
|
||||
properties: {
|
||||
backgroundImg: {
|
||||
type: 'string',
|
||||
description: 'A URL to an image asset to be displayed as background',
|
||||
},
|
||||
theme: {
|
||||
type: 'string',
|
||||
default: 'Callisto',
|
||||
description: 'A theme to be applied by default on first load',
|
||||
},
|
||||
enableFontAwesome: {
|
||||
type: 'boolean',
|
||||
default: true,
|
||||
description: 'Should load font-awesome assets',
|
||||
},
|
||||
fontAwesomeKey: {
|
||||
type: 'string',
|
||||
pattern: '^[a-z0-9]{10}$',
|
||||
description: 'API key for font-awesome',
|
||||
},
|
||||
cssThemes: {
|
||||
type: 'array',
|
||||
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',
|
||||
],
|
||||
items: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
customCss: {
|
||||
type: 'string',
|
||||
description: 'Any custom CSS overides, must be minified',
|
||||
},
|
||||
},
|
||||
additionalProperties: false,
|
||||
},
|
||||
|
||||
/* Sections */
|
||||
sections: {
|
||||
type: 'array',
|
||||
description: 'Array of sections, containing items',
|
||||
items: {
|
||||
type: 'object',
|
||||
required: ['name', 'items'],
|
||||
additionalProperties: false,
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
description: 'Title/ heading for a section',
|
||||
},
|
||||
icon: {
|
||||
type: 'string',
|
||||
description: 'Icon will be displayed next to title',
|
||||
},
|
||||
/* Section Display Data */
|
||||
displayData: {
|
||||
type: 'object',
|
||||
additionalProperties: false,
|
||||
description: 'Optional meta data for customizing a section',
|
||||
properties: {
|
||||
collapsed: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
description: 'If true, section needs to be clicked to open',
|
||||
},
|
||||
color: {
|
||||
type: 'string',
|
||||
description: 'Hex code, or HTML color for section fill',
|
||||
},
|
||||
customStyles: {
|
||||
type: 'string',
|
||||
description: 'CSS overides for section container',
|
||||
},
|
||||
itemSize: {
|
||||
enum: ['small', 'medium', 'large'],
|
||||
default: 'medium',
|
||||
description: 'Size of items within the section',
|
||||
},
|
||||
rows: {
|
||||
type: 'number',
|
||||
minimum: 1,
|
||||
maximum: 5,
|
||||
default: 1,
|
||||
description: 'The amount of space that the section spans vertically',
|
||||
},
|
||||
cols: {
|
||||
type: 'number',
|
||||
minimum: 1,
|
||||
maximum: 5,
|
||||
default: 1,
|
||||
description: 'The amount of space that the section spans horizontally',
|
||||
},
|
||||
layout: {
|
||||
enum: ['grid', 'auto'],
|
||||
default: 'auto',
|
||||
description: 'If set to grid, items have uniform width, and itemCount can be set',
|
||||
},
|
||||
itemCountX: {
|
||||
type: 'number',
|
||||
minimum: 1,
|
||||
maximum: 12,
|
||||
description: 'Number of items per column',
|
||||
},
|
||||
itemCountY: {
|
||||
type: 'number',
|
||||
minimum: 1,
|
||||
maximum: 12,
|
||||
description: 'Number of items per row',
|
||||
},
|
||||
},
|
||||
},
|
||||
/* Items within a section */
|
||||
items: {
|
||||
type: 'array',
|
||||
description: 'Array of items to display with a section',
|
||||
items: {
|
||||
type: 'object',
|
||||
additionalProperties: false,
|
||||
required: ['title'],
|
||||
properties: {
|
||||
title: {
|
||||
type: 'string',
|
||||
description: 'Text shown on the item',
|
||||
},
|
||||
description: {
|
||||
type: 'string',
|
||||
nullable: true,
|
||||
description: 'Short description, shown on hover or in a tooltip',
|
||||
},
|
||||
icon: {
|
||||
type: 'string',
|
||||
nullable: true,
|
||||
description: 'An icon, either as a font-awesome identifier, local or remote URL, or auto-fetched favicon',
|
||||
},
|
||||
url: {
|
||||
type: 'string',
|
||||
description: 'The destination to navigate to when item is clicked',
|
||||
},
|
||||
target: {
|
||||
enum: ['newtab', 'sametab', 'iframe'],
|
||||
default: 'newtab',
|
||||
description: 'Opening method, when item is clicked',
|
||||
},
|
||||
color: {
|
||||
type: 'string',
|
||||
description: 'A custom fill color of the item',
|
||||
},
|
||||
provider: {
|
||||
type: 'string',
|
||||
description: 'Provider name, e.g. Microsoft',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue