Skip to content

Commit

Permalink
feat: allow selecting fields to show in spoolman card
Browse files Browse the repository at this point in the history
Signed-off-by: Mathis Mensing <[email protected]>
  • Loading branch information
matmen committed Jan 18, 2025
1 parent 99a70bd commit 4470ee9
Show file tree
Hide file tree
Showing 6 changed files with 100 additions and 63 deletions.
44 changes: 44 additions & 0 deletions src/components/settings/SpoolmanSettings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,23 @@
/>
</app-setting>

<v-divider />
<app-setting
:title="$t('app.spoolman.setting.card_fields')"
>
<v-select
v-model="fieldsToShowInSpoolmanCard"
multiple
filled
dense
hide-details="auto"
:rules="[
$rules.lengthGreaterThanOrEqual(1),
]"
:items="availableFieldsToShowInSpoolmanCard"
/>
</app-setting>

<v-divider />
<app-setting :title="$t('app.setting.label.reset')">
<app-btn
Expand Down Expand Up @@ -221,6 +238,33 @@ export default class SpoolmanSettings extends Mixins(StateMixin) {
})
}
get availableFieldsToShowInSpoolmanCard () {
return [
'id',
'vendor',
'filament_name',
'remaining_weight',
'location',
'material',
'lot_nr',
'first_used',
'last_used',
'comment'
].map(field => ({ value: field, text: this.$t(`app.spoolman.label.${field}`) }))
}
get fieldsToShowInSpoolmanCard (): string[] {
return this.$store.state.config.uiSettings.spoolman.selectedCardFields
}
set fieldsToShowInSpoolmanCard (value: string[]) {
this.$store.dispatch('config/saveByPath', {
path: 'uiSettings.spoolman.selectedCardFields',
value,
server: true
})
}
handleReset () {
this.$store.dispatch('config/saveByPath', {
path: 'uiSettings.spoolman',
Expand Down
109 changes: 49 additions & 60 deletions src/components/widgets/spoolman/SpoolmanCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -100,66 +100,31 @@
<v-card-text>
<v-row>
<template v-if="activeSpool">
<v-col align-self="center">
<status-label
:label="$t('app.spoolman.label.vendor')"
:label-width="labelWidth"
>
<span>{{ activeSpool.filament.vendor?.name || '-' }}</span>
</status-label>
<status-label
:label="$t('app.spoolman.label.filament_name')"
:label-width="labelWidth"
>
<span>{{ activeSpool.filament.name }}</span>
</status-label>
<status-label
:label="$t('app.spoolman.label.remaining_weight')"
:label-width="labelWidth"
>
<span v-if="remainingFilamentUnit === 'weight'">
{{ $filters.getReadableWeightString(activeSpool.remaining_weight) }}
<small>/ {{ $filters.getReadableWeightString(activeSpool.filament.weight) }}</small>
</span>
<span v-else-if="remainingFilamentUnit === 'length'">
{{ $filters.getReadableLengthString(activeSpool.remaining_length) }}
<small>/ {{ $filters.getReadableLengthString($filters.convertFilamentWeightToLength(activeSpool.filament.weight ?? 0, activeSpool.filament.density, activeSpool.filament.diameter)) }}</small>
</span>
</status-label>
<status-label
:label="$t('app.spoolman.label.location')"
:label-width="labelWidth"
>
<span>{{ activeSpool.location || '-' }}</span>
</status-label>
</v-col>
<v-col align-self="center">
<status-label
:label="$t('app.spoolman.label.material')"
:label-width="labelWidth"
>
<span>{{ activeSpool.filament.material || '-' }}</span>
</status-label>
<status-label
:label="$t('app.spoolman.label.lot_nr')"
:label-width="labelWidth"
>
<span>{{ activeSpool.lot_nr || '-' }}</span>
</status-label>
<status-label
:label="$t('app.spoolman.label.first_used')"
:label-width="labelWidth"
>
<span>{{
activeSpool.first_used ? $filters.formatRelativeTimeToNow(activeSpool.first_used) : $tc('app.setting.label.never')
}}</span>
</status-label>
<status-label
:label="$t('app.spoolman.label.comment')"
:label-width="labelWidth"
>
<span>{{ activeSpool.comment || '-' }}</span>
</status-label>
<v-col
v-for="(fields, i) in selectedCardFields"
:key="`spoolman-card-col-${i}`"
align-self="center"
>
<template v-for="field in fields">
<status-label
:key="`spoolman-card-${field}`"
:label="$t(`app.spoolman.label.${field}`)"
:label-width="labelWidth"
>
<template v-if="field === 'remaining_weight'">
<span v-if="remainingFilamentUnit === 'weight'">
{{ $filters.getReadableWeightString(activeSpool.remaining_weight) }}
<small>/ {{ $filters.getReadableWeightString(activeSpool.filament.weight) }}</small>
</span>
<span v-else-if="remainingFilamentUnit === 'length'">
{{ $filters.getReadableLengthString(activeSpool.remaining_length) }}
<small>/ {{ $filters.getReadableLengthString($filters.convertFilamentWeightToLength(activeSpool.filament.weight ?? 0, activeSpool.filament.density, activeSpool.filament.diameter)) }}</small>
</span>
</template>

<span v-else>{{ formatField(field) }}</span>
</status-label>
</template>
</v-col>
</template>

Expand Down Expand Up @@ -230,6 +195,13 @@ export default class SpoolmanCard extends Mixins(StateMixin) {
})
}
get selectedCardFields (): string[] {
const fields = this.$store.state.config.uiSettings.spoolman.selectedCardFields
const NUM_COLUMNS = fields.length > 1 ? 2 : 1
const elementsPerColumn = Math.ceil(fields.length / NUM_COLUMNS)
return new Array(NUM_COLUMNS).fill(undefined).map((_, i) => fields.slice(i * elementsPerColumn, (i + 1) * elementsPerColumn))
}
get activeSpool (): Spool | null {
if (!this.isConnected) return null
return this.$store.getters['spoolman/getActiveSpool']
Expand Down Expand Up @@ -262,5 +234,22 @@ export default class SpoolmanCard extends Mixins(StateMixin) {
getSpoolColor (spool?: Spool) {
return `#${spool?.filament.color_hex ?? (this.$vuetify.theme.dark ? 'fff' : '000')}`
}
formatField (field: string) {
if (!this.activeSpool) return '-'
switch (field) {
case 'vendor': return this.activeSpool.filament.vendor?.name || '-'
case 'filament_name': return this.activeSpool.filament.name
case 'location': return this.activeSpool.location || '-'
case 'material': return this.activeSpool.filament.material || '-'
case 'lot_nr': return this.activeSpool.lot_nr || '-'
case 'first_used': return this.activeSpool.first_used ? this.$filters.formatRelativeTimeToNow(this.activeSpool.first_used) : this.$tc('app.setting.label.never')
case 'last_used': return this.activeSpool.last_used ? this.$filters.formatRelativeTimeToNow(this.activeSpool.last_used) : this.$tc('app.setting.label.never')
case 'comment': return this.activeSpool.comment || '-'
default:
return field
}
}
}
</script>
3 changes: 2 additions & 1 deletion src/locales/de.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -800,7 +800,7 @@ app:
suchen
canbus_warning: Nur unzugewiesene CAN-Bus-Knoten werden erkannt.<br>Es ist empfohlen,
nur ein unzugewiesenes Gerät an den CAN-Bus anzuschließen, um Kommunikationsprobleme
zu vermeiden.<br>Mehr Informationen finden Sie <a target="_blank"
zu vermeiden.<br>Mehr Informationen finden Sie <a target="_blank"
href="https://moonraker.readthedocs.io/en/latest/web_api/#query-unassigned-canbus-uuids">hier.</a>
tool:
btn:
Expand Down Expand Up @@ -984,6 +984,7 @@ app:
auto_open_qr_camera: Kamera automatisch zur QR-Code-Erkennung öffnen
auto_select_spool_on_match: Spulenauswahl bei QR-Code-Übereinstimmung automatisch
übernehmen
card_fields: Felder, die in der Spoolman-Karte angezeigt werden
prefer_device_camera: Gerätekamera, wenn verfügbar zur QR-Code-Erkennung verwenden
show_spool_selection_dialog_on_print_start: Spulenauswahl-Dialog automatisch
bei Druckstart anzeigen
Expand Down
1 change: 1 addition & 0 deletions src/locales/en.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -941,6 +941,7 @@ app:
setting:
auto_open_qr_camera: Automatically open camera for QR code detection
auto_select_spool_on_match: Automatically commit spool selection on QR code match
card_fields: Fields to show in the Spoolman card
prefer_device_camera: Use device camera for QR code detection if available
show_spool_selection_dialog_on_print_start: Show spool selection dialog on print start
warn_on_not_enough_filament: >-
Expand Down
3 changes: 2 additions & 1 deletion src/store/config/state.ts
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,8 @@ export const defaultState = (): ConfigState => {
key: 'last_used',
desc: false
},
remainingFilamentUnit: 'weight'
remainingFilamentUnit: 'weight',
selectedCardFields: ['vendor', 'filament_name', 'remaining_weight', 'location', 'material', 'lot_nr', 'first_used', 'comment']
}
}
}
Expand Down
3 changes: 2 additions & 1 deletion src/store/config/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ export interface SpoolmanConfig {
key: string | null;
desc: boolean | null;
},
remainingFilamentUnit: 'weight' | 'length'
remainingFilamentUnit: 'weight' | 'length';
selectedCardFields: string[];
}

export interface HostConfig {
Expand Down

0 comments on commit 4470ee9

Please sign in to comment.