Skip to content

Commit

Permalink
Merge pull request #5 from Wondro/develop
Browse files Browse the repository at this point in the history 
feat: Updated SpoolDialog, Style for theming
  • Loading branch information
@MG-longshot
MG-longshot authored Dec 17, 2024
2 parents c47a467 + 45c2974 commit 7e00a06
Show file tree
Hide file tree
Showing 4 changed files with 628 additions and 384 deletions.
167 changes: 160 additions & 7 deletions src/components/dialogs/AfcChangeSpoolDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@
<v-icon>{{ mdiCloseThick }}</v-icon>
</v-btn>
</template>

<v-card-title>
<v-text-field
v-if="spoolManagerUrl"
v-model="search"
:append-icon="mdiMagnify"
:label="$t('Panels.SpoolmanPanel.Search')"
Expand All @@ -29,13 +31,15 @@
<v-icon>{{ mdiEject }}</v-icon>
</v-btn>
<v-btn
v-if="spoolManagerUrl"
:title="$t('Panels.SpoolmanPanel.Refresh')"
class="px-2 minwidth-0 ml-3"
:loading="loadings.includes('refreshSpools')"
@click="refreshSpools">
<v-icon>{{ mdiRefresh }}</v-icon>
</v-btn>
<v-btn
v-if="spoolManagerUrl"
:title="$t('Panels.SpoolmanPanel.OpenSpoolManager')"
class="px-2 minwidth-0 ml-3"
@click="openSpoolManager">
Expand All @@ -44,6 +48,7 @@
</v-card-title>
<v-card-text class="px-0 pb-0">
<v-data-table
v-if="spoolManagerUrl"
:headers="headers"
:items="spools"
item-key="id"
Expand All @@ -66,6 +71,55 @@
@set-spool="setSpool" />
</template>
</v-data-table>

<div v-else>
<v-container>
<v-row align="center">
<!-- Color Picker with Label -->
<v-col cols="12" md="6" class="d-flex justify-center align-center">
<div class="color-picker-container">
<label class="color-picker-label"><h3>Filament Color</h3></label>
<v-color-picker v-model="spoolColor" flat class="color-picker" />
</div>
</v-col>

<!-- Right Aligned Text Boxes and Button -->
<v-col cols="12" md="6">
<div class="text-box-container" style="display: flex; flex-direction: row">
<!-- Text Boxes -->
<v-row>
<v-col cols="12">
<v-text-field
v-model="spoolColor"
:label="$t('Panels.AfcSpoolmanPanel.SpoolColor')"
outlined />
</v-col>
<v-col cols="12">
<v-text-field
v-model="filamentType"
:label="$t('Panels.AfcSpoolmanPanel.FilamentType')"
outlined />
</v-col>
<v-col cols="12">
<v-text-field
v-model="remainingWeight"
:label="$t('Panels.AfcSpoolmanPanel.RemainingWeight')"
outlined
type="number" />
</v-col>
</v-row>
</div>
</v-col>
</v-row>
<v-row style="width: 100%; margin-top: 16px">
<v-col cols="12">
<v-btn color="primary" block @click="updateSpool">
{{ $t('Panels.AfcSpoolmanPanel.UpdateSpool') }}
</v-btn>
</v-col>
</v-row>
</v-container>
</div>
</v-card-text>
</panel>
</v-dialog>
Expand Down Expand Up @@ -93,6 +147,10 @@ export default class AfcChangeSpoolDialog extends Mixins(BaseMixin) {
mdiRefresh = mdiRefresh
mdiEject = mdiEject
filamentType = ''
remainingWeight = 0
spoolColor = '#ffffff'
@Prop({ required: true }) declare readonly showDialog: boolean
search = ''
Expand Down Expand Up @@ -145,6 +203,53 @@ export default class AfcChangeSpoolDialog extends Mixins(BaseMixin) {
return this.$store.state.server.config.config?.spoolman?.server ?? null
}
updateSpool() {
console.log('Updating spool with the following data:')
console.log('Filament Type:', this.filamentType)
console.log('Remaining Weight:', this.remainingWeight)
console.log('Spool Color:', this.spoolColor)
if (this.laneData != null) {
const cleanedColor = this.spoolColor.replace('#', '')
const setColor = `SET_COLOR LANE=${this.laneData.laneName} COLOR=${cleanedColor}`
const setWeight = `SET_WEIGHT LANE=${this.laneData.laneName} WEIGHT=${this.remainingWeight}`
const setMaterial = `SET_MATERIAL LANE=${this.laneData.laneName} MATERIAL=${this.filamentType}`
this.$nextTick(async () => {
try {
await this.$store.dispatch('printer/sendGcode', setColor)
await this.$store.dispatch('printer/sendGcode', setWeight)
await this.$store.dispatch('printer/sendGcode', setMaterial)
} catch (error) {
console.error('Failed to send G-code:', error)
}
})
this.close()
}
}
manualyClearSpool() {
if (this.laneData != null) {
const cleanedColor = this.spoolColor.replace('#', '')

Check warning on line 235 in src/components/dialogs/AfcChangeSpoolDialog.vue

View workflow job for this annotation

GitHub Actions / ESLint

src/components/dialogs/AfcChangeSpoolDialog.vue#L235 

'cleanedColor' is assigned a value but never used (@typescript-eslint/no-unused-vars)
const setColor = `SET_COLOR LANE=${this.laneData.laneName} COLOR=000000`
const setWeight = `SET_WEIGHT LANE=${this.laneData.laneName} WEIGHT=0`
const setMaterial = `SET_MATERIAL LANE=${this.laneData.laneName} MATERIAL=`
this.$nextTick(async () => {
try {
await this.$store.dispatch('printer/sendGcode', setColor)
await this.$store.dispatch('printer/sendGcode', setWeight)
await this.$store.dispatch('printer/sendGcode', setMaterial)
} catch (error) {
console.error('Failed to send G-code:', error)
}
})
}
}
openSpoolManager() {
window.open(this.spoolManagerUrl, '_blank')
}
Expand All @@ -163,20 +268,30 @@ export default class AfcChangeSpoolDialog extends Mixins(BaseMixin) {
ejectSpool() {
if (this.laneData != null) {
const gcode = `SET_SPOOL_ID LANE=${this.laneData.laneName} SPOOL_ID=`
console.log('Dispatching G-code:', gcode)
const setSpoolId = `SET_SPOOL_ID LANE=${this.laneData.laneName} SPOOL_ID=`
const unloadLane = `LANE_UNLOAD LANE=${this.laneData.laneName}`
console.log('Dispatching G-code:', setSpoolId)
console.log('Dispatching G-code:', unloadLane)
this.$nextTick(async () => {
try {
await this.$store.dispatch('printer/sendGcode', gcode)
console.log('G-code sent successfully')
await this.$store.dispatch('printer/sendGcode', setSpoolId)
console.log('SET_SPOOL_ID sent successfully')
await this.$store.dispatch('printer/sendGcode', unloadLane)
console.log('UNLOAD_LANE sent successfully')
} catch (error) {
console.error('Failed to send G-code:', error)
}
})
this.$emit('fetch-spool')
this.close()
// Spoolman not active manualy clear the spool info
if (!this.spoolManagerUrl) {
this.manualyClearSpool()
}
this.$emit('fetch-spool')
this.close()
}
}
Expand Down Expand Up @@ -227,9 +342,47 @@ export default class AfcChangeSpoolDialog extends Mixins(BaseMixin) {
this.close()
}
initializeFields() {
if (this.laneData) {
console.log('Initializing with laneData:', this.laneData)
this.filamentType = this.laneData.material || ''
this.remainingWeight = this.laneData.weight || 0
this.spoolColor = this.laneData.color || '#ffffff'
}
}
resetFields() {
this.filamentType = ''
this.remainingWeight = 0
this.spoolColor = '#ffffff'
}
@Watch('showDialog')
onShowDialogChanged(newVal: boolean) {
if (newVal) this.search = ''
if (newVal) {
if (this.spoolManagerUrl) {
this.search = ''
}
}
}
@Watch('laneData', { immediate: true })
onLaneDataChanged() {
if (this.showDialog && this.laneData && !this.spoolManagerUrl) {
this.initializeFields()
}
}
}
</script>
<style scoped>
.color-picker-container {
display: flex;
flex-direction: column;
margin: 10px;
}
.color-picker-label {
font-weight: bold;
margin-bottom: 8px;
}
</style>
Loading

0 comments on commit 7e00a06

Please sign in to comment.