Skip to content

Commit

Permalink
V3.6.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@jemu75
jemu75 committed Apr 6, 2021
1 parent 9ec2523 commit 2d3d03f
Show file tree
Hide file tree
Showing 41 changed files with 1,145 additions and 443 deletions.
6 changes: 3 additions & 3 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ module.exports = {
node: true
},
'extends': [
'plugin:vue/essential',
'plugin:vue/strongly-recommended',
'eslint:recommended'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
'no-console': 'off',
'no-debugger': 'off'
}
}
17 changes: 17 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ In den Template-Dateien können folgende Eigenschaften definiert werden. Die Zuw
"description": "kurze Beschreibung"
"author": "name",
"date": "YYYY-MM-DD",
"size": "col-12 col-sm-6 col-md-4 col-lg-4",
"status": {
"bar": ["reading:value:level:color:invert"],
"error": ["reading:value:level:color:text"]
Expand Down Expand Up @@ -245,6 +246,22 @@ Beispiele:
|main|rightMenu|text:cmd|definiert für das **rechte Menü** die Texte und FHEM-Kommandos. Wenn dieses Element zugewiesen wird, klappt bei Klick auf die rechte Taste ein Menü auf. *Hinweis:* rightClick, rightLong und rightLongRelease stehen bei Zuweisung des Menüs nicht zur Verfügung.|
|info|left1..2,<br>mid1..2,<br>right1..2|reading:wert:text:icon|definiert welches **Icon** und welcher **Text** in der Infozeile anzeigeigt wird|

## Breite von Templates
Die Templates von **FHEMApp** sind optimal an die verschiedenen Displayformate angepasst. Es gibt dennoch die Möglichkeit, die relative Breite von Templates anzupassen. Der Anzeigebereich von **FHEMApp** ist dabei in 12 gleiche "Teile" untergliedert. Wenn man einem Template z.B. alle 12 Teile zuweist, dann nimmt es die volle Breite ein. Wieviele "Teile" ein Template einnehmen soll, kann zusätzlich unter Berücksichtigung des Displayformates definiert werden. z.B. alle 12 Teile bei schmalen Displays und 3 Teile (25%) bei breiten Displays. Folgende Displayformate werden unterschieden.

|Device|Code|Type|Range|
|-----------|----|------------------------|---------|
Extra small | xs | Small to large phone | < 600px |
Small | sm | Small to medium tablet | 600px > < 960px |
Medium | md | Large tablet to laptop | 960px > < 1264px |
Large | lg | Desktop | 1264px > < 1904px |
Extra large | xl | 4k and ultra-wide | > 1904px |

Die Definition der Templatebreite erfolgt mit dem Parameter `size`. Der String muss mind. 1 Definition enhalten. Eine Definition beginnt jeweils mit `col-`. Danach folgt (optional) der Displaycode (s.o.) und endet mit den "Teilen" (1-12) Folgendes Beispiel zeigt die voreingestellte Definition für Standard Templates.
```
"size": "col-12 col-sm-6 col-md-4 col-lg-4"
```

# Übersicht der verfügbaren Templates
| Template | Beschreibung | Beispiel |
|----------|--------------|----------|
Expand Down
169 changes: 120 additions & 49 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,155 @@
<template>
<v-app>
<v-overlay :value="app.options.loading">
<v-progress-circular indeterminate size="64">
</v-progress-circular>
<v-progress-circular
indeterminate
size="64"
/>
</v-overlay>

<v-app-bar app color="primary" dark clipped-left>
<v-app-bar
app
color="primary"
dark
clipped-left
>
<div class="hidden-lg-and-up">
<v-app-bar-nav-icon v-if="!back" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-btn v-if="back" icon @click.stop="goTo">
<v-app-bar-nav-icon
v-if="!back"
@click.stop="drawer = !drawer"
/>
<v-btn
v-if="back"
icon
@click.stop="goTo"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
</div>
<h2 class="hidden-md-and-down">{{ app.options.clock }}</h2>
<v-spacer></v-spacer>
<h2 class="hidden-md-and-down">
{{ app.options.clock }}
</h2>
<v-spacer />
<div class="hidden-lg-and-up text-h5">
{{ app.data.header }}
</div>
<v-spacer></v-spacer>
<v-spacer />
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-icon class="ml-3" small :color="status.color" v-text="status.icon" v-bind="attrs" v-on="on"></v-icon>
<v-icon
class="ml-3"
small
:color="status.color"
v-bind="attrs"
v-on="on"
v-text="status.icon"
/>
</template>
<div v-text="status.text"></div>
<div v-text="status.time"></div>
<div v-text="status.text" />
<div v-text="status.time" />
</v-tooltip>
</v-app-bar>

<v-navigation-drawer app color="secondary" :dark="this.$vuetify.theme.dark" clipped v-model="drawer">
<v-img src="./assets/FHEM_Logo.png"></v-img>
<v-divider></v-divider>
<v-navigation-drawer
v-model="drawer"
app
color="secondary"
:dark="this.$vuetify.theme.dark"
clipped
>
<v-img src="./assets/FHEM_Logo.png" />
<v-divider />

<v-list nav>
<v-list-item key="home" link to="/">
<v-list-item
key="home"
link
to="/"
>
<v-list-item-icon>
<v-icon>mdi-home</v-icon>
</v-list-item-icon>

<v-list-item-content>
<v-list-item-title class="text-left">Home</v-list-item-title>
<v-list-item-title class="text-left">
Home
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-divider />

<v-list-group color="secondary lighten-4" prepend-icon="mdi-lightbulb-group" v-if="showGroups">
<v-list-group
v-if="showGroups"
color="secondary lighten-4"
prepend-icon="mdi-lightbulb-group"
>
<template v-slot:activator>
<v-list-item-title>Gruppen</v-list-item-title>
</template>
<v-chip class="ma-2" v-for="group in app.data.groupList" :key="group.title" link :to="group.route">{{ group.title }}</v-chip>
<v-chip
v-for="group in app.data.groupList"
:key="group.title"
class="ma-2"
link
:to="group.route"
>
{{ group.title }}
</v-chip>
</v-list-group>

<v-list-group color="secondary lighten-4" prepend-icon="mdi-floor-plan" v-if="showRooms">
<v-list-group
v-if="showRooms"
color="secondary lighten-4"
prepend-icon="mdi-floor-plan"
>
<template v-slot:activator>
<v-list-item-title>Bereiche</v-list-item-title>
</template>
<v-chip class="ma-2" v-for="room in app.data.roomList" :key="room.title" link :to="room.route">{{ room.title }}</v-chip>
<v-chip
v-for="room in app.data.roomList"
:key="room.title"
class="ma-2"
link
:to="room.route"
>
{{ room.title }}
</v-chip>
</v-list-group>
<v-divider></v-divider>
<v-divider />

<v-list-item key="dashboard" link to="/dashboard">
<v-list-item
key="dashboard"
link
to="/dashboard"
>
<v-list-item-icon>
<v-icon>mdi-view-dashboard</v-icon>
</v-list-item-icon>

<v-list-item-content>
<v-list-item-title class="text-left">Dashboard</v-list-item-title>
<v-list-item-title class="text-left">
Dashboard
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-divider />

<v-list-item key="system" link to="/system">
<v-list-item
key="system"
link
to="/system"
>
<v-list-item-icon>
<v-icon>mdi-tools</v-icon>
</v-list-item-icon>

<v-list-item-content>
<v-list-item-title class="text-left">System</v-list-item-title>
<v-list-item-title class="text-left">
System
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-divider />
<v-list-item>
<v-list-item-content>
<v-list-item-subtitle>
Expand All @@ -91,8 +162,8 @@

<v-main>
<v-container fluid>
<Broadcaster></Broadcaster>
<router-view></router-view>
<Broadcaster />
<router-view />
</v-container>
</v-main>
</v-app>
Expand All @@ -102,6 +173,10 @@
import Broadcaster from '@/components/Broadcaster.vue'
export default {
components: {
Broadcaster
},
data: () => ({
drawer: null,
back: false,
Expand All @@ -119,7 +194,7 @@
header: ''
}
},
version: 'v3.5.5',
version: 'v3.6.0',
status: {
color: 'secondary',
icon: 'mdi-circle',
Expand All @@ -128,8 +203,13 @@
}
}),
components: {
Broadcaster
computed: {
showRooms() {
return this.app.data.roomList.length > 0 ? true : false;
},
showGroups() {
return this.app.data.groupList.length > 0 ? true : false;
}
},
watch: {
Expand All @@ -144,13 +224,13 @@
}
},
computed: {
showRooms() {
return this.app.data.roomList.length > 0 ? true : false;
},
showGroups() {
return this.app.data.groupList.length > 0 ? true : false;
}
mounted() {
this.app.session = this.$fhem.app.session;
this.app.options = this.$fhem.app.options;
this.app.data = this.$fhem.app.data;
this.$fhem.on('connect', () => this.loadRoutes())
this.$fhem.init();
this.loadRoutes();
},
methods: {
Expand All @@ -164,15 +244,6 @@
goTo() {
this.$router.go(-1);
},
},
mounted() {
this.app.session = this.$fhem.app.session;
this.app.options = this.$fhem.app.options;
this.app.data = this.$fhem.app.data;
this.$fhem.on('connect', () => this.loadRoutes())
this.$fhem.init();
this.loadRoutes();
}
};
</script>
34 changes: 23 additions & 11 deletions src/components/Broadcaster.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
<template>
<v-alert :value="alert" :type="type" dense text outlined>
<v-alert
:value="alert"
:type="type"
dense
text
outlined
>
<v-row align="center">
<v-col>
<div>
Expand All @@ -10,8 +16,14 @@
</div>
</v-col>
<v-col class="shrink">
<v-btn icon small @click="clearMessage()">
<v-icon :color="type">mdi-close-circle</v-icon>
<v-btn
icon
small
@click="clearMessage()"
>
<v-icon :color="type">
mdi-close-circle
</v-icon>
</v-btn>
</v-col>
</v-row>
Expand Down Expand Up @@ -44,14 +56,6 @@ export default {
}
},
methods: {
clearMessage() {
if(this.msgList.length > 0) {
this.msgList.splice(0, 1)
}
}
},
mounted() {
this.$fhem.on('message', (msg) => {
let target = {
Expand All @@ -64,6 +68,14 @@ export default {
this.msgList.unshift(target);
})
},
methods: {
clearMessage() {
if(this.msgList.length > 0) {
this.msgList.splice(0, 1)
}
}
}
}
</script>
Loading

0 comments on commit 2d3d03f

Please sign in to comment.