diff --git a/public/CHANGELOG.md b/public/CHANGELOG.md index 5aab225d..3c61189e 100644 --- a/public/CHANGELOG.md +++ b/public/CHANGELOG.md @@ -1,6 +1,7 @@ # v4.0.16-beta (04.02.2024) ## Settings - Optimization Panel and Template Settings +- Add rawMode # v4.0.15-beta (31.01.2024) ## Component Colorpicker - Develpoment diff --git a/src/components/SettingsProps.vue b/src/components/SettingsProps.vue index 9fffa5dd..ca449f99 100644 --- a/src/components/SettingsProps.vue +++ b/src/components/SettingsProps.vue @@ -7,6 +7,17 @@ import VueJsonPretty from 'vue-json-pretty' import 'vue-json-pretty/lib/styles.css' + import { PrismEditor } from 'vue-prism-editor' + import 'vue-prism-editor/dist/prismeditor.min.css' // import the styles somewhere + + // import highlighting library (you can use any library you want just return html string) + import { highlight, languages } from 'prismjs/components/prism-core' + import 'prismjs/components/prism-clike' + import 'prismjs/components/prism-javascript' + import 'prismjs/themes/prism-tomorrow.css' // import syntax highlighting styles + + import useClipboard from 'vue-clipboard3' + import PanelCard from '../components/PanelCard.vue' import SettingsPropsList from './SettingsPropsList.vue' import SettingsPropsMain from './SettingsPropsMain.vue' @@ -21,6 +32,8 @@ const { mobile } = useDisplay() + const { toClipboard } = useClipboard() + const preLang = '_app.settings.' + props.type + '.' const headers = computed(() => { @@ -118,6 +131,10 @@ return res }) + const jsonHeight = computed(() => { + return (window.innerHeight - 350) + 'px' + }) + const settings = ref({ search: '', newItem: '', @@ -126,7 +143,9 @@ rawMode: false, section: 'panel', panel: null, - preview: 'panel' + preview: 'panel', + jsonDef: null, + jsonError: null }) function updatePanel(panel) { @@ -168,11 +187,32 @@ settings.value.itemIdx = idx settings.value.extended = items.value[items.value.map((e) => e.idx).indexOf(idx)].advanced !== '-' ? true : false + + if(typeof item.value === 'object') { + settings.value.jsonDef = JSON.stringify(item.value, null, '\t') + settings.value.jsonError = null + } } function deleteItem(idx) { fhem.app.config[props.type].splice(idx, 1) } + + function highlighter(code) { + return highlight(code, languages.js) + } + + function changed() { + let res = fhem.stringToJson(settings.value.jsonDef, true) + + settings.value.jsonError = res.error + + if(!settings.value.jsonError) fhem.app.config[props.type][settings.value.itemIdx] = res.result + } + + function copyBtn() { + toClipboard(settings.value.jsonDef) + }