Re-add debugger panel, strip down json editor
This commit is contained in:
parent
7aacbec108
commit
46d1ad221f
@ -169,10 +169,9 @@ export default {
|
||||
{id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
|
||||
{id: 'autodetectionSettings', label: 'Autodetection options', icon: 'auto-fix'},
|
||||
// {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
|
||||
// {id: 'debugging', label: 'Debugging', icon: 'bug-outline' }
|
||||
{id: 'changelog', label: 'What\'s new', icon: 'alert-decagram' },
|
||||
{id: 'about', label: 'About', icon: 'information-outline'},
|
||||
// {id: 'resetBackup', label: 'Reset and backup', icon: 'file-restore-outline'},
|
||||
{id: 'debugging', label: 'Debugging', icon: 'bug-outline' },
|
||||
],
|
||||
selectedTab: 'extensionSettings',
|
||||
BrowserDetect: BrowserDetect,
|
||||
|
||||
@ -120,10 +120,10 @@
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<JsonVanillaEditor
|
||||
<JsonEditor
|
||||
v-model="settingsJson"
|
||||
>
|
||||
</JsonVanillaEditor>
|
||||
</JsonEditor>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -135,7 +135,7 @@ import OtherSiteSettings from './PanelComponents/ExtensionSettings/OtherSiteSett
|
||||
import Popup from '@csui/src/components/Popup';
|
||||
import ConfirmButton from '@csui/src/components/ConfirmButton';
|
||||
import UploadJsonFileButton from '@csui/src/components/UploadJsonFileButton';
|
||||
import JsonVanillaEditor from '@csui/src/components/JsonVanillaEditor';
|
||||
import JsonEditor from '@csui/src/components/JsonEditor';
|
||||
|
||||
|
||||
|
||||
@ -164,7 +164,7 @@ export default {
|
||||
Popup,
|
||||
ConfirmButton,
|
||||
UploadJsonFileButton,
|
||||
JsonVanillaEditor
|
||||
JsonEditor
|
||||
},
|
||||
computed: {
|
||||
globalSettings() {
|
||||
|
||||
@ -6,20 +6,12 @@
|
||||
|
||||
<div>Logger configuration:</div>
|
||||
|
||||
<template v-if="loggerPanel.pasteConfMode">
|
||||
|
||||
</template>
|
||||
<template v-else>
|
||||
<JsonObject
|
||||
label="logger-settings"
|
||||
:value="currentSettings"
|
||||
:ignoreKeys="{'allowLogging': false}"
|
||||
@change="updateSettingsUi"
|
||||
></JsonObject>
|
||||
</template>
|
||||
<JsonEditor
|
||||
v-model="lastSettings"
|
||||
></JsonEditor>
|
||||
|
||||
<div class="flex flex-row flex-end">
|
||||
<div class="button" @click="restoreLoggerSettings()">
|
||||
<div class="button" @click="getLoggerSettings()">
|
||||
Revert
|
||||
</div>
|
||||
<div class="button button-primary" @click="saveLoggerSettings()">
|
||||
@ -35,12 +27,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JsonObject from '../components/JsonEditor/JsonObject.vue'
|
||||
import Logger, { baseLoggingOptions } from '../../../ext/lib/Logger';
|
||||
import JsonEditor from '@csui/src/components/JsonEditor';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
JsonObject
|
||||
JsonEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -92,30 +84,13 @@ export default {
|
||||
methods: {
|
||||
loadDefaultConfig() {
|
||||
this.lastSettings = baseLoggingOptions;
|
||||
this.parsedSettings = JSON.stringify(this.lastSettings, null, 2) || '';
|
||||
this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
|
||||
},
|
||||
async getLoggerSettings() {
|
||||
this.lastSettings = await Logger.getConfig() || baseLoggingOptions;
|
||||
this.parsedSettings = JSON.stringify(this.lastSettings, null, 2) || '';
|
||||
this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
|
||||
},
|
||||
updateSettingsUi(val) {
|
||||
try {
|
||||
this.parsedSettings = JSON.stringify(val, null, 2);
|
||||
this.lastSettings = val;
|
||||
this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
},
|
||||
saveLoggerSettings() {
|
||||
Logger.saveConfig({...this.lastSettings});
|
||||
},
|
||||
restoreLoggerSettings() {
|
||||
this.getLoggerSettings();
|
||||
this.confHasError = false;
|
||||
},
|
||||
async startLogging(){
|
||||
this.logStringified = undefined;
|
||||
await Logger.saveConfig({...this.lastSettings, allowLogging: true});
|
||||
|
||||
120
src/csui/src/components/JsonEditor.vue
Normal file
120
src/csui/src/components/JsonEditor.vue
Normal file
@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="flex flex-row w-full">
|
||||
<button
|
||||
v-if="editorMode === 'tree'"
|
||||
@click="() => setEditorMode('text')"
|
||||
>
|
||||
Edit as text
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
@click="() => setEditorMode('tree')"
|
||||
>
|
||||
Show as tree
|
||||
</button>
|
||||
</div>
|
||||
<div ref="refContainer" class="w-full h-full"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createJSONEditor, Mode } from "vanilla-jsoneditor";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: Object // v-model binding
|
||||
},
|
||||
emits: ["update:modelValue"],
|
||||
data() {
|
||||
return {
|
||||
refContainer: null,
|
||||
editor: null,
|
||||
editorMode: Mode.tree,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
modelValue: {
|
||||
deep: true,
|
||||
handler(newValue) {
|
||||
if (this.editor) {
|
||||
this.editor.updateProps({ content: { json: newValue || {} } });
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.$refs.refContainer) {
|
||||
this.editor = createJSONEditor({
|
||||
target: this.$refs.refContainer,
|
||||
props: {
|
||||
mode: Mode.tree,
|
||||
content: { json: this.modelValue || {} },
|
||||
onChange: (updatedContent) => {
|
||||
this.$emit("update:modelValue", updatedContent.json);
|
||||
},
|
||||
onRenderContextMenu: false,
|
||||
navigationBar: false,
|
||||
statusBar: false,
|
||||
mainMenuBar: false
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setEditorMode(mode) {
|
||||
this.editorMode = mode
|
||||
this.editor.updateProps({ mode });
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.editor) {
|
||||
this.editor.destroy();
|
||||
this.editor = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
:root {
|
||||
--jse-panel-background: #111;
|
||||
--jse-background-color: #000;
|
||||
--jse-text-color: #ccc;
|
||||
--jse-key-color: #8c8bef;
|
||||
--jse-selection-background-color: rgba(255, 171, 102, 0.177);
|
||||
--jse-context-menu-pointer-background: rgba(255, 171, 102, 0.177);
|
||||
--jse-delimiter-color: #fa6;
|
||||
--jse-value-color-boolean: rgb(132, 132, 137);
|
||||
}
|
||||
|
||||
.jse-boolean-toggle[role="checkbox"] {
|
||||
&[aria-checked="true"] {
|
||||
color: rgb(218, 244, 238);
|
||||
}
|
||||
|
||||
&[aria-checked="false"] {
|
||||
border: 0px transparent;
|
||||
outline: 0px transparent;
|
||||
color: rgb(241, 107, 25);
|
||||
background-color: rgb(241, 107, 25);
|
||||
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
|
||||
content: '×';
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
color: black;
|
||||
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,83 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-col json-level-indent">
|
||||
<div class="flex flex-row" @click="expanded_internal = !expanded_internal">
|
||||
<div v-if="value_internal.key" class="item-key">
|
||||
"{{value_internal.key}}" <b>:</b>
|
||||
<span v-if="!expanded_internal"><b> [</b> ... <b>]</b>,</span>
|
||||
<template v-else><b>[</b></template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(row, key) of value_internal.value"
|
||||
:key="key"
|
||||
>
|
||||
<JsonArray v-if="Array.isArray(row)"
|
||||
:value="row"
|
||||
:ignoreKeys="ignoreKeys"
|
||||
@change="changeItem(rowKey, $event)"
|
||||
>
|
||||
</JsonArray>
|
||||
<JsonObject v-else-if="typeof row === 'object' && row !== null"
|
||||
:value="row"
|
||||
:label="rowKey"
|
||||
:ignoreKeys="ignoreKeys"
|
||||
@change="changeItem(rowKey, $event)"
|
||||
>
|
||||
</JsonObject>
|
||||
<JsonElement v-else
|
||||
:value="row"
|
||||
:label="rowKey"
|
||||
@change="changeItem(rowKey, $event)"
|
||||
>
|
||||
</JsonElement>
|
||||
</div>
|
||||
<div v-if="expanded_internal"><b>],</b></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JsonObject from './JsonObject';
|
||||
import JsonElement from './JsonElement';
|
||||
|
||||
export default {
|
||||
name: 'JsonArray',
|
||||
props: [
|
||||
'value',
|
||||
'expanded',
|
||||
'ignoreKeys', // this prop is passthrough for JsonArray
|
||||
],
|
||||
components: {
|
||||
JsonObject,
|
||||
JsonElement,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value_internal: undefined,
|
||||
expanded_internal: true,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.value_internal = this.value;
|
||||
},
|
||||
watch: {
|
||||
value: function(val) {
|
||||
this.value_internal = val;
|
||||
},
|
||||
expanded: function(val) {
|
||||
if (val !== undefined && val !== null) {
|
||||
this.expanded_internal = !!val;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeItem(key, value) {
|
||||
this.value_internal[key] = value;
|
||||
this.$emit('change', this.value_internal);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped src="./json.scss">
|
||||
</style>
|
||||
<style lang="scss" scoped src="../../../res/css/flex.scss">
|
||||
</style>
|
||||
@ -1,90 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-row json-level-indent">
|
||||
<div>
|
||||
<b>
|
||||
<span v-if="label" class="item-key"
|
||||
:class="{'item-key-boolean-false': typeof value_internal === 'boolean' && !value_internal}"
|
||||
>
|
||||
"{{label}}"
|
||||
</span>
|
||||
:
|
||||
</b>
|
||||
</div>
|
||||
<div v-if="typeof value_internal === 'boolean'"
|
||||
:class="{'json-value-boolean-true': value_internal, 'json-value-boolean-false': !value_internal}"
|
||||
@click="toggleBoolean"
|
||||
>
|
||||
<template v-if="value_internal">true</template>
|
||||
<template v-else>false</template>
|
||||
</div>
|
||||
<div v-else
|
||||
class="flex flex-row inline-edit"
|
||||
:class="{
|
||||
'json-value-number': typeof value_internal === 'number',
|
||||
'json-value-string': typeof value_internal === 'string'
|
||||
}"
|
||||
>
|
||||
<template v-if="typeof value_internal === 'string'">
|
||||
"<div ref="element-edit-area"
|
||||
contenteditable="true"
|
||||
@keydown.enter="changeValue"
|
||||
>
|
||||
{{value_internal}}
|
||||
</div>"
|
||||
</template>
|
||||
<template v-else>
|
||||
<div ref="element-edit-area"
|
||||
contenteditable="true"
|
||||
@keydown.enter="changeValue"
|
||||
>
|
||||
{{value_internal}}
|
||||
</div>
|
||||
</template>,
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'json-element',
|
||||
props: [
|
||||
'value',
|
||||
'label',
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
value_internal: undefined,
|
||||
editing: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.value_internal = this.value;
|
||||
},
|
||||
watch: {
|
||||
value: function(val) {
|
||||
this.value_internal = val;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleBoolean() {
|
||||
this.value_internal = !this.value_internal;
|
||||
this.$emit('change', this.value_internal);
|
||||
},
|
||||
changeValue() {
|
||||
this.$refs['element-edit-area'].blur();
|
||||
const newValue = this.$refs['element-edit-area'].textContent.replace(/\n/g, '');
|
||||
if (isNaN(newValue)) {
|
||||
this.value_internal = newValue;
|
||||
this.$emit('change', newValue);
|
||||
} else {
|
||||
this.value_internal = +newValue;
|
||||
this.$emit('change', +newValue);
|
||||
}
|
||||
this.editing = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped src="./json.scss">
|
||||
</style>
|
||||
@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-col json-level-indent">
|
||||
<div class="flex flex-row" @click="expanded_internal = !expanded_internal">
|
||||
<div class="item-key-line">
|
||||
<template v-if="label">
|
||||
<b>
|
||||
<span class="item-key">"{{label}}"</span>
|
||||
:
|
||||
</b>
|
||||
</template>
|
||||
<span v-if="!expanded_internal"><b> {</b> ... <b>}</b>,</span>
|
||||
<template v-else><b>{</b></template>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="expanded_internal">
|
||||
<div v-for="(row, rowKey) of value_internal"
|
||||
:key="rowKey"
|
||||
>
|
||||
<template v-if="(ignoreKeys || {})[rowKey] !== true">
|
||||
<JsonArray v-if="Array.isArray(row)"
|
||||
:value="row"
|
||||
:ignoreKeys="(ignoreKeys || {})[rowKey]"
|
||||
@change="changeItem(rowKey, $event)"
|
||||
>
|
||||
</JsonArray>
|
||||
<JsonObject v-else-if="typeof row === 'object' && row !== null"
|
||||
:value="row"
|
||||
:label="rowKey"
|
||||
:ignoreKeys="(ignoreKeys || {})[rowKey]"
|
||||
@change="changeItem(rowKey, $event)"
|
||||
>
|
||||
</JsonObject>
|
||||
<JsonElement v-else
|
||||
:value="row"
|
||||
:label="rowKey"
|
||||
@change="changeItem(rowKey, $event)"
|
||||
>
|
||||
</JsonElement>
|
||||
</template>
|
||||
</div>
|
||||
<div><b>},</b></div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JsonArray from './JsonArray';
|
||||
import JsonElement from './JsonElement';
|
||||
|
||||
export default {
|
||||
name: 'JsonObject',
|
||||
props: [
|
||||
'value',
|
||||
'label',
|
||||
'expanded',
|
||||
'ignoreKeys',
|
||||
],
|
||||
components: {
|
||||
JsonArray,
|
||||
JsonElement,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value_internal: undefined,
|
||||
expanded_internal: true,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.value_internal = this.value;
|
||||
},
|
||||
watch: {
|
||||
value: function(val) {
|
||||
this.value_internal = val;
|
||||
},
|
||||
expanded: function(val) {
|
||||
if (val !== undefined && val !== null) {
|
||||
this.expanded_internal = !!val;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeItem(key, value) {
|
||||
this.value_internal[key] = value;
|
||||
this.$emit('change', this.value_internal);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped src="./json.scss">
|
||||
</style>
|
||||
@ -1,23 +0,0 @@
|
||||
.json-level-indent {
|
||||
padding-left: 2em !important;
|
||||
font-family: 'Overpass Mono', monospace;
|
||||
}
|
||||
.item-key {
|
||||
color: rgb(255, 196, 148);
|
||||
}
|
||||
.item-key-boolean-false {
|
||||
color: rgb(207, 149, 101)
|
||||
}
|
||||
|
||||
.json-value-boolean-true {
|
||||
color: rgb(150, 240, 198);
|
||||
}
|
||||
.json-value-boolean-false {
|
||||
color: rgb(241, 21, 21);
|
||||
}
|
||||
.json-value-number {
|
||||
color: rgb(121, 121, 238);
|
||||
}
|
||||
.json-value-string {
|
||||
color: rgb(226, 175, 7);
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
<template>
|
||||
<div ref="refContainer" class="w-full h-full"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createJSONEditor } from "vanilla-jsoneditor";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: Object // v-model binding
|
||||
},
|
||||
emits: ["update:modelValue"],
|
||||
data() {
|
||||
return {
|
||||
refContainer: null,
|
||||
editor: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
modelValue: {
|
||||
deep: true,
|
||||
handler(newValue) {
|
||||
if (this.editor) {
|
||||
this.editor.updateProps({ content: { json: newValue || {} } });
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('mounted:', this.refContainer, this.$refs.refContainer)
|
||||
if (this.$refs.refContainer) {
|
||||
this.editor = createJSONEditor({
|
||||
target: this.$refs.refContainer,
|
||||
props: {
|
||||
content: { json: this.modelValue || {} },
|
||||
onChange: (updatedContent) => {
|
||||
this.$emit("update:modelValue", updatedContent.json);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.editor) {
|
||||
this.editor.destroy();
|
||||
this.editor = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
--jse-panel-background: #111;
|
||||
--jse-background-color: #000;
|
||||
--jse-text-color: #ccc;
|
||||
--jse-key-color: #8c8bef;
|
||||
--jse-selection-background-color: rgba(255, 171, 102, 0.177);
|
||||
--jse-context-menu-pointer-background: rgba(255, 171, 102, 0.177);
|
||||
--jse-delimiter-color: #fa6;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user