Skip to content

Commit

Permalink
improve fan and outputs panel layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@HelgeKeck
HelgeKeck committed Jul 26, 2024
1 parent d1ba830 commit 7de5c41
Show file tree
Hide file tree
Showing 4 changed files with 178 additions and 63 deletions.
2 changes: 1 addition & 1 deletion components.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}

/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
ActionCommandPromptDialog: typeof import('./src/components/common/ActionCommandPromptDialog.vue')['default']
Expand Down
221 changes: 165 additions & 56 deletions src/components/widgets/outputs/Outputs.vue
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,155 @@
<template>
<v-card-text>
<v-row>
<v-col
cols="12"
sm="6"
md="12"
lg="6"
>
<template v-for="(item, i) in all.col1">
<OutputItem
:key="item.key"
:item="item"
/>

<v-divider
v-if="i < all.col1.length - 1 || $vuetify.breakpoint.mdAndDown"
:key="`divider-0${i}`"
class="my-2"
/>
</template>
</v-col>
<v-col
cols="12"
sm="6"
md="12"
lg="6"
>
<template v-for="(item, i) in all.col2">
<OutputItem
:key="item.key"
:item="item"
/>

<v-divider
v-if="i < all.col2.length - 1"
:key="`divider-1${i}`"
class="my-2"
/>
</template>
</v-col>
</v-row>
</v-card-text>
<div>
<v-expansion-panels
accordion
multiple
>
<v-expansion-panel>
<v-expansion-panel-header
v-if="all.controllableFans.length > 0"
>
<template #actions>
<v-icon
small
class="mr-2"
>
$expand
</v-icon>
</template>
<div>
{{ $t('app.general.title.controllable_fans') }}
<v-chip
small
class="ml-2"
>
{{ all.controllableFans.length }}
</v-chip>
</div>
</v-expansion-panel-header>
<v-expansion-panel-content>
<template v-for="(item, i) in all.controllableFans">
<OutputItem
:key="item.key"
:item="item"
/>
<v-divider
v-if="i < all.controllableFans.length - 1"
:key="`divider-controllableFans${i}`"
class="my-2"
/>
</template>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header
v-if="all.unControllableFans.length > 0"
>
<template #actions>
<v-icon
small
class="mr-2"
>
$expand
</v-icon>
</template>
<div>
{{ $t('app.general.title.other_fans') }}
<v-chip
small
class="ml-2"
>
{{ all.unControllableFans.length }}
</v-chip>
</div>
</v-expansion-panel-header>
<v-expansion-panel-content>
<template v-for="(item, i) in all.unControllableFans">
<OutputItem
:key="item.key"
:item="item"
/>
<v-divider
v-if="i < all.unControllableFans.length - 1"
:key="`divider-unControllableFans${i}`"
class="my-2"
/>
</template>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header
v-if="all.pins.length > 0"
>
<template #actions>
<v-icon
small
class="mr-2"
>
$expand
</v-icon>
</template>
<div>
{{ $t('app.general.title.output_pins') }}
<v-chip
small
class="ml-2"
>
{{ all.pins.length }}
</v-chip>
</div>
</v-expansion-panel-header>
<v-expansion-panel-content>
<template v-for="(item, i) in all.pins">
<OutputItem
:key="item.key"
:item="item"
/>
<v-divider
v-if="i < all.pins.length - 1"
:key="`divider-pins${i}`"
class="my-2"
/>
</template>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header
v-if="all.leds.length > 0"
>
<template #actions>
<v-icon
small
class="mr-2"
>
$expand
</v-icon>
</template>
<div>
{{ $t('app.general.title.leds') }}
<v-chip
small
class="ml-2"
>
{{ all.leds.length }}
</v-chip>
</div>
</v-expansion-panel-header>
<v-expansion-panel-content>
<template v-for="(item, i) in all.leds">
<OutputItem
:key="item.key"
:item="item"
/>
<v-divider
v-if="i < all.leds.length - 1"
:key="`divider-leds${i}`"
class="my-2"
/>
</template>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</div>
</template>

<script lang="ts">
Expand All @@ -56,23 +165,23 @@ import type { Fan, Led, OutputPin } from '@/store/printer/types'
})
export default class Outputs extends Mixins(StateMixin) {
get all () {
const items: Array<Fan | Led | OutputPin> = [
...this.$store.getters['printer/getAllFans'],
...this.$store.getters['printer/getPins'],
const controllableFans: Array<Fan> = [
...this.$store.getters['printer/getControllableFans']
]
const unControllableFans: Array<Fan> = [
...this.$store.getters['printer/getUnctrollableFans']
]
const pins: Array<OutputPin> = [
...this.$store.getters['printer/getPins']
]
const leds: Array<Led> = [
...this.$store.getters['printer/getAllLeds']
]
let col1: Array<Fan | Led | OutputPin> = []
let col2: Array<Fan | Led | OutputPin> = []
if (items.length > 1) {
const half = Math.ceil(items.length / 2)
col1 = items.splice(0, half)
col2 = items
} else {
col1 = items
}
return {
col1,
col2
controllableFans,
unControllableFans,
pins,
leds
}
}
}
Expand Down
15 changes: 10 additions & 5 deletions src/store/printer/getters.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -524,13 +524,18 @@ export const getters: GetterTree<PrinterState, RootState> = {
])
},

getAllFans: (_, getters) => {
getControllableFans: (_, getters) => {
return getters.getOutputs([
'fan',
'fan_generic'
])
},

getUnctrollableFans: (_, getters) => {
return getters.getOutputs([
'temperature_fan',
'controller_fan',
'heater_fan',
'fan_generic',
'fan'
'temperature_fan',
'heater_fan'
])
},

Expand Down
3 changes: 2 additions & 1 deletion src/views/Dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,8 @@ export default class Dashboard extends Mixins(StateMixin) {
get hasOutputs () {
return (
this.$store.getters['printer/getAllFans'].length > 0 ||
this.$store.getters['printer/getControllableFans'].length > 0 ||
this.$store.getters['printer/getUnctrollableFans'].length > 0 ||
this.$store.getters['printer/getPins'].length > 0 ||
this.$store.getters['printer/getAllLeds'].length > 0
)
Expand Down

0 comments on commit 7de5c41

Please sign in to comment.