fix: store only name of icon instead of svg in moonraker db (#833)
* refactor: create mixin to convert webcam icons from string to icon Signed-off-by: Stefan Dej <meteyou@gmail.com> * fix: icons in interface settings to store names instead of SVG in moonraker db Signed-off-by: Stefan Dej <meteyou@gmail.com> * fix: icons in webcam panel to convert string to icon Signed-off-by: Stefan Dej <meteyou@gmail.com> * fix: icons in farm printer panel to convert string to icon Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
Stefan Dej
GitHub
37
src/components/mixins/webcam.ts
Normal file
37
src/components/mixins/webcam.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import Vue from 'vue'
|
||||
import Component from 'vue-class-component'
|
||||
import {
|
||||
mdiAlbum,
|
||||
mdiCampfire,
|
||||
mdiDoor,
|
||||
mdiRadiatorDisabled,
|
||||
mdiPrinter3d,
|
||||
mdiPrinter3dNozzle,
|
||||
mdiRaspberryPi,
|
||||
mdiWebcam,
|
||||
} from '@mdi/js'
|
||||
|
||||
@Component
|
||||
export default class WebcamMixin extends Vue {
|
||||
convertWebcamIcon(iconName: string): string {
|
||||
switch (iconName) {
|
||||
case 'mdiAlbum':
|
||||
return mdiAlbum
|
||||
case 'mdiCampfire':
|
||||
return mdiCampfire
|
||||
case 'mdiDoor':
|
||||
return mdiDoor
|
||||
case 'mdiRadiatorDisabled':
|
||||
return mdiRadiatorDisabled
|
||||
case 'mdiPrinter3d':
|
||||
return mdiPrinter3d
|
||||
case 'mdiPrinter3dNozzle':
|
||||
return mdiPrinter3dNozzle
|
||||
case 'mdiRaspberryPi':
|
||||
return mdiRaspberryPi
|
||||
|
||||
default:
|
||||
return mdiWebcam
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -18,8 +18,8 @@
|
||||
</template>
|
||||
<v-list dense class="py-0">
|
||||
<v-list-item link @click="currentCamId = 'off'">
|
||||
<v-list-item-icon class="mr-0">
|
||||
<v-icon small>{{ mdiWebcamOff }}</v-icon>
|
||||
<v-list-item-icon class="mr-2">
|
||||
<v-icon small class="mt-1">{{ mdiWebcamOff }}</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ $t('Panels.FarmPrinterPanel.WebcamOff') }}</v-list-item-title>
|
||||
@@ -30,8 +30,8 @@
|
||||
:key="webcam.index"
|
||||
link
|
||||
@click="currentCamId = webcam.id">
|
||||
<v-list-item-icon class="mr-0">
|
||||
<v-icon small>{{ webcam.icon }}</v-icon>
|
||||
<v-list-item-icon class="mr-2">
|
||||
<v-icon small class="mt-1">{{ convertWebcamIcon(webcam.icon) }}</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="webcam.name"></v-list-item-title>
|
||||
@@ -138,6 +138,7 @@ import Panel from '@/components/ui/Panel.vue'
|
||||
import { mdiPrinter3d, mdiWebcam, mdiMenuDown, mdiWebcamOff, mdiFileOutline } from '@mdi/js'
|
||||
import { Debounce } from 'vue-debounce-decorator'
|
||||
import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
|
||||
import WebcamMixin from '@/components/mixins/webcam'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
@@ -148,7 +149,7 @@ import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
|
||||
'mainsail-logo': MainsailLogo,
|
||||
},
|
||||
})
|
||||
export default class FarmPrinterPanel extends Mixins(BaseMixin) {
|
||||
export default class FarmPrinterPanel extends Mixins(BaseMixin, WebcamMixin) {
|
||||
mdiPrinter3d = mdiPrinter3d
|
||||
mdiWebcam = mdiWebcam
|
||||
mdiMenuDown = mdiMenuDown
|
||||
|
||||
@@ -11,23 +11,25 @@
|
||||
<v-menu :offset-y="true" title="Webcam">
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn text tile v-bind="attrs" v-on="on">
|
||||
<v-icon v-if="'icon' in currentCam" small class="mr-2">{{ currentCam.icon }}</v-icon>
|
||||
<v-icon v-if="'icon' in currentCam" small class="mr-2">
|
||||
{{ convertWebcamIcon(currentCam.icon) }}
|
||||
</v-icon>
|
||||
<span class="d-none d-md-block">{{ 'name' in currentCam ? currentCam.name : 'unknown' }}</span>
|
||||
<v-icon small>{{ mdiMenuDown }}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list dense class="py-0">
|
||||
<v-list-item link @click="currentCamId = 'all'">
|
||||
<v-list-item-icon class="mr-0">
|
||||
<v-icon small>{{ mdiViewGrid }}</v-icon>
|
||||
<v-list-item-icon class="mr-2">
|
||||
<v-icon small class="mt-1">{{ mdiViewGrid }}</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ $t('Panels.WebcamPanel.All') }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item v-for="webcam of webcams" :key="webcam.id" link @click="currentCamId = webcam.id">
|
||||
<v-list-item-icon class="mr-0">
|
||||
<v-icon small>{{ webcam.icon }}</v-icon>
|
||||
<v-list-item-icon class="mr-2">
|
||||
<v-icon small class="mt-1">{{ convertWebcamIcon(webcam.icon) }}</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="webcam.name"></v-list-item-title>
|
||||
@@ -78,6 +80,7 @@ import BaseMixin from '../mixins/base'
|
||||
import Panel from '@/components/ui/Panel.vue'
|
||||
import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
|
||||
import { mdiMenuDown, mdiViewGrid, mdiWebcam } from '@mdi/js'
|
||||
import WebcamMixin from '@/components/mixins/webcam'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
@@ -89,7 +92,7 @@ import { mdiMenuDown, mdiViewGrid, mdiWebcam } from '@mdi/js'
|
||||
'webcam-grid': WebcamGrid,
|
||||
},
|
||||
})
|
||||
export default class WebcamPanel extends Mixins(BaseMixin) {
|
||||
export default class WebcamPanel extends Mixins(BaseMixin, WebcamMixin) {
|
||||
@Prop({ default: 'dashboard' }) declare currentPage?: string
|
||||
|
||||
mdiWebcam = mdiWebcam
|
||||
|
||||
@@ -32,7 +32,10 @@
|
||||
<h3 class="text-h5 mb-3">{{ $t('Settings.WebcamsTab.Webcams') }}</h3>
|
||||
<div v-for="webcam in webcams" :key="webcam.id">
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<settings-row :title="webcam.name" :icon="webcam.icon" :sub-title="getSubtitle(webcam)">
|
||||
<settings-row
|
||||
:title="webcam.name"
|
||||
:icon="convertWebcamIcon(webcam.icon)"
|
||||
:sub-title="getSubtitle(webcam)">
|
||||
<v-btn small outlined @click="editWebcam(webcam)">
|
||||
<v-icon small left>{{ mdiPencil }}</v-icon>
|
||||
{{ $t('Settings.Edit') }}
|
||||
@@ -76,7 +79,7 @@
|
||||
v-on="on"
|
||||
@blur="selectIcon = !selectIcon"
|
||||
@focus="selectIcon = !selectIcon">
|
||||
<v-icon>{{ form.icon }}</v-icon>
|
||||
<v-icon>{{ convertWebcamIcon(form.icon) }}</v-icon>
|
||||
<v-icon
|
||||
:class="!selectIcon ? '' : '_rotate-180'"
|
||||
:color="!selectIcon ? '' : 'primary'"
|
||||
@@ -91,8 +94,10 @@
|
||||
:key="icon.value"
|
||||
link
|
||||
@click="setFormIcon(icon.value)">
|
||||
<v-list-item-icon class="mr-0">
|
||||
<v-icon small>{{ icon.value }}</v-icon>
|
||||
<v-list-item-icon class="mr-2">
|
||||
<v-icon small class="mt-1">
|
||||
{{ convertWebcamIcon(icon.value) }}
|
||||
</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="icon.text"></v-list-item-title>
|
||||
@@ -224,19 +229,8 @@ import Mjpegstreamer from '@/components/webcams/Mjpegstreamer.vue'
|
||||
import MjpegstreamerAdaptive from '@/components/webcams/MjpegstreamerAdaptive.vue'
|
||||
import Uv4lMjpeg from '@/components/webcams/Uv4lMjpeg.vue'
|
||||
import Ipstreamer from '@/components/webcams/Ipstreamer.vue'
|
||||
import {
|
||||
mdiAlbum,
|
||||
mdiCampfire,
|
||||
mdiDoor,
|
||||
mdiMenuDown,
|
||||
mdiDelete,
|
||||
mdiPencil,
|
||||
mdiPrinter3d,
|
||||
mdiPrinter3dNozzle,
|
||||
mdiRadiatorDisabled,
|
||||
mdiRaspberryPi,
|
||||
mdiWebcam,
|
||||
} from '@mdi/js'
|
||||
import { mdiMenuDown, mdiDelete, mdiPencil, mdiWebcam } from '@mdi/js'
|
||||
import WebcamMixin from '@/components/mixins/webcam'
|
||||
|
||||
interface webcamForm {
|
||||
bool: boolean
|
||||
@@ -261,7 +255,7 @@ interface webcamForm {
|
||||
'webcam-ipstreamer': Ipstreamer,
|
||||
},
|
||||
})
|
||||
export default class SettingsWebcamsTab extends Mixins(BaseMixin) {
|
||||
export default class SettingsWebcamsTab extends Mixins(BaseMixin, WebcamMixin) {
|
||||
mdiPencil = mdiPencil
|
||||
mdiDelete = mdiDelete
|
||||
mdiMenuDown = mdiMenuDown
|
||||
@@ -297,14 +291,14 @@ export default class SettingsWebcamsTab extends Mixins(BaseMixin) {
|
||||
|
||||
get iconItems() {
|
||||
return [
|
||||
{ value: mdiPrinter3d, text: this.$t('Settings.WebcamsTab.IconPrinter') },
|
||||
{ value: mdiPrinter3dNozzle, text: this.$t('Settings.WebcamsTab.IconNozzle') },
|
||||
{ value: mdiRadiatorDisabled, text: this.$t('Settings.WebcamsTab.IconBed') },
|
||||
{ value: mdiWebcam, text: this.$t('Settings.WebcamsTab.IconCam') },
|
||||
{ value: mdiAlbum, text: this.$t('Settings.WebcamsTab.IconFilament') },
|
||||
{ value: mdiDoor, text: this.$t('Settings.WebcamsTab.IconDoor') },
|
||||
{ value: mdiRaspberryPi, text: this.$t('Settings.WebcamsTab.IconMcu') },
|
||||
{ value: mdiCampfire, text: this.$t('Settings.WebcamsTab.IconHot') },
|
||||
{ value: 'mdiPrinter3d', text: this.$t('Settings.WebcamsTab.IconPrinter') },
|
||||
{ value: 'mdiPrinter3dNozzle', text: this.$t('Settings.WebcamsTab.IconNozzle') },
|
||||
{ value: 'mdiRadiatorDisabled', text: this.$t('Settings.WebcamsTab.IconBed') },
|
||||
{ value: 'mdiWebcam', text: this.$t('Settings.WebcamsTab.IconCam') },
|
||||
{ value: 'mdiAlbum', text: this.$t('Settings.WebcamsTab.IconFilament') },
|
||||
{ value: 'mdiDoor', text: this.$t('Settings.WebcamsTab.IconDoor') },
|
||||
{ value: 'mdiRaspberryPi', text: this.$t('Settings.WebcamsTab.IconMcu') },
|
||||
{ value: 'mdiCampfire', text: this.$t('Settings.WebcamsTab.IconHot') },
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user