v.4.0.16-beta

jemu75 · Feb 4, 2024 · 59f8e13 · 59f8e13
1 parent df5ce4b
commit 59f8e13
Show file tree

Hide file tree

Showing 16 changed files with 114 additions and 54 deletions.
diff --git 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
@@ -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)
+    }
  </script>
 
 <template>
@@ -252,7 +292,7 @@
                         <v-btn variant="plain" icon="mdi-arrow-up-left" @click="item = null"></v-btn>
 
                         <v-col cols="10" md="">
-                            <v-autocomplete 
+                            <v-autocomplete v-if="!settings.rawMode"
                                 v-model="settings.section"                                
                                 :items="sections"
                                 :disabled="settings.extended || props.type === 'templates' ? false : true"
@@ -271,6 +311,15 @@
                                 @update:modelValue="!$event ? settings.section = 'panel' : null">
                             </v-switch>
                         </v-col>
+                        <v-snackbar 
+                            v-if="settings.rawMode"
+                            :timeout="2000"              
+                            rounded="pill">
+                            <template v-slot:activator="{ props }">
+                                <v-btn v-bind="props" variant="text" icon="mdi-clipboard-multiple-outline" size="small" @click="copyBtn"></v-btn>
+                            </template>
+                            {{ $t('_app.messages.clipboard.text') }}
+                        </v-snackbar>
                         <v-col cols="6" md="auto" class="pl-5">
                             <v-switch
                                 v-model="settings.rawMode"
@@ -281,7 +330,7 @@
                             </v-switch>
                         </v-col>
                     </v-row>
-                    <v-row no-gutters>
+                    <v-row v-if="!settings.rawMode" no-gutters>
                         <v-col>
                             <SettingsPropsList 
                                 v-if="settings.section !== 'main'" 
@@ -298,6 +347,19 @@
                             </SettingsPropsMain>
                         </v-col>
                     </v-row>
+                    <v-row v-if="settings.rawMode" no-gutters>
+                        <v-col>
+                            <v-card :variant="settings.jsonError ? 'tonal' : 'outlined'" :color="settings.jsonError ? 'error' : ''"  class="pa-1 mt-2" :height="jsonHeight">
+                                <prism-editor
+                                    v-model="settings.jsonDef"
+                                    :highlight="highlighter"            
+                                    line-numbers
+                                    @input="changed">
+                                </prism-editor>
+                                <v-alert v-if="settings.jsonError" color="error" density="compact">{{ settings.jsonError }}</v-alert>
+                            </v-card>
+                        </v-col>
+                    </v-row>
                 </v-col>
                 <v-divider :vertical="!mobile"></v-divider>
                 <v-col cols="12" lg="4">

diff --git a/src/components/SettingsPropsItem.vue b/src/components/SettingsPropsItem.vue
@@ -44,43 +44,41 @@
 </script>
 
 <template>
-    <v-list>
+    <v-list class="pa-0">
         <v-list-item v-if="fhem.app.config[props.type][props.typeIdx][props.section][props.prop]" class="pa-0">
-            <v-row v-for="(def, idx) of fhem.app.config[props.type][props.typeIdx][props.section][props.prop]" :key="idx" no-gutters class="pt-3">
+            <v-row v-for="(def, idx) of fhem.app.config[props.type][props.typeIdx][props.section][props.prop]" :key="idx" no-gutters class="pt-3 align-center">
                 <v-col>
                     <v-text-field
                         density="compact" 
                         variant="outlined" 
                         persistent-placeholder
+                        hide-details
                         :placeholder="props.propDef"
                         :label="'Definition ' + (idx + 1)"
                         v-model="fhem.app.config[props.type][props.typeIdx][props.section][props.prop][idx]">
                     </v-text-field>
                 </v-col>
-                <v-col cols="1" class="text-right">
-                    <v-btn variant="text" icon="mdi-delete" @click="deleteDef(idx)"></v-btn>
-                </v-col>
+                <v-btn variant="plain" icon="mdi-delete" @click="deleteDef(idx)"></v-btn>
             </v-row>
         </v-list-item>
         <v-list-item class="pa-0">
             <v-form ref="form">
-                <v-row no-gutters class="pt-3">
-                    <v-col>
+                <v-row no-gutters class="pt-3 align-center">
+                    <v-col cols="10">
                         <v-text-field
                             v-model="newDef"    
                             density="compact" 
                             variant="outlined" 
                             persistent-placeholder
+                            hide-details
                             :placeholder="props.propDef"
                             label="new Definition"
                             :append-inner-icon="props.propHelp ? 'mdi-help-circle' : ''"
                             clearable
                             @click:append-inner="fhem.help(propHelp)">
                         </v-text-field>                        
                     </v-col>
-                    <v-col cols="1" class="text-right">                                                
-                        <v-btn variant="text" icon="mdi-plus" :disabled="!newDef" @click="addDef()"></v-btn>
-                    </v-col>
+                    <v-btn variant="plain" icon="mdi-plus" :disabled="!newDef" @click="addDef()"></v-btn>
                 </v-row>
             </v-form>
         </v-list-item>

diff --git a/src/components/SettingsPropsMainItem.vue b/src/components/SettingsPropsMainItem.vue
@@ -48,43 +48,41 @@
 </script>
 
 <template>
-    <v-list>
+    <v-list class="pa-0">
         <v-list-item v-if="fhem.app.config[props.type][props.typeIdx][props.section][props.mainIdx][props.mainSection][props.prop]" class="pa-0">
-            <v-row v-for="(def, idx) of fhem.app.config[props.type][props.typeIdx][props.section][props.mainIdx][props.mainSection][props.prop]" :key="idx" no-gutters class="pt-3">
+            <v-row v-for="(def, idx) of fhem.app.config[props.type][props.typeIdx][props.section][props.mainIdx][props.mainSection][props.prop]" :key="idx" no-gutters class="pt-3 align-center">
                 <v-col>
                     <v-text-field
                         density="compact" 
                         variant="outlined" 
                         persistent-placeholder
+                        hide-details
                         :placeholder="props.propDef"
                         :label="'Definition ' + (idx + 1)"
                         v-model="fhem.app.config[props.type][props.typeIdx][props.section][props.mainIdx][props.mainSection][props.prop][idx]">
                     </v-text-field>
                 </v-col>
-                <v-col cols="1" class="text-right">
-                    <v-btn variant="text" icon="mdi-delete" @click="deleteDef(idx)"></v-btn>
-                </v-col>
+                <v-btn variant="plain" icon="mdi-delete" @click="deleteDef(idx)"></v-btn>
             </v-row>
         </v-list-item>
         <v-list-item class="pa-0">
             <v-form ref="form">
-                <v-row no-gutters class="pt-3">
-                    <v-col>
+                <v-row no-gutters class="pt-3 align-center">
+                    <v-col cols="10">
                         <v-text-field
                             v-model="newDef"    
                             density="compact" 
                             variant="outlined" 
                             persistent-placeholder
+                            hide-details
                             :placeholder="props.propDef"
                             label="new Definition"
                             :append-inner-icon="props.propHelp ? 'mdi-help-circle' : ''"
                             clearable
                             @click:append-inner="fhem.help(propHelp)">
                         </v-text-field>                        
                     </v-col>
-                    <v-col cols="1" class="text-right">                                                
-                        <v-btn variant="text" icon="mdi-plus" :disabled="!newDef" @click="addDef()"></v-btn>
-                    </v-col>
+                    <v-btn variant="plain" icon="mdi-plus" :disabled="!newDef" @click="addDef()"></v-btn>
                 </v-row>
             </v-form>
         </v-list-item>

diff --git a/www/fhemapp4/CHANGELOG.md b/www/fhemapp4/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/www/fhemapp4/assets/DevicesView-1803bce7.js → www/fhemapp4/assets/DevicesView-4cb1b4b6.js b/www/fhemapp4/assets/DevicesView-1803bce7.js → www/fhemapp4/assets/DevicesView-4cb1b4b6.js