feature: redesign panel headers
Signed-off-by: meteyou <meteyou@gmail.com>
This commit is contained in:
meteyou
@@ -83,7 +83,7 @@
|
||||
|
||||
<v-main id="content">
|
||||
<v-scroll-y-transition>
|
||||
<v-container fluid id="page-container" class="container">
|
||||
<v-container fluid id="page-container" class="container px-sm-6 px-3">
|
||||
<keep-alive>
|
||||
<router-view></router-view>
|
||||
</keep-alive>
|
||||
|
||||
@@ -1,18 +1,13 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-list-item>
|
||||
<v-list-item-avatar color="grey">
|
||||
<v-icon dark>mdi-alert-circle</v-icon>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="headline">Klippy-Status</v-list-item-title>
|
||||
<v-list-item-title class="subtitle-1">{{ klippy_state }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-divider class="my-2" ></v-divider>
|
||||
<v-card-text class="px-0 pt-0 pb-2 content">
|
||||
<v-toolbar flat dense >
|
||||
<v-toolbar-title>
|
||||
<span class="subheading"><v-icon left>mdi-alert-circle</v-icon>Klippy-State: {{ klippy_state}}</span>
|
||||
</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text class="py-0">
|
||||
<v-layout wrap class=" text-center">
|
||||
<v-flex col class="text-left" v-if="klippy_connected"><pre>{{ klippy_message }}</pre></v-flex>
|
||||
<v-flex col class="text-left" v-if="klippy_connected"><pre style="white-space: pre-wrap;">{{ klippy_message }}</pre></v-flex>
|
||||
<v-flex col class="text-left" v-if="!klippy_connected">
|
||||
<p>Moonraker can't connect to Klippy!<br />Please check if the Klipper service is running and an UDS (Unix Domain Socket) is configured.</p>
|
||||
</v-flex>
|
||||
@@ -21,7 +16,7 @@
|
||||
<v-divider class="my-2" v-if="klippy_connected" ></v-divider>
|
||||
<v-card-text class="px-4 pt-2 pb-4 content text-center text-lg-left" v-if="klippy_connected">
|
||||
<v-btn small @click="doRestart" color="error" class=""><v-icon class="mr-sm-2">mdi-cached</v-icon>Restart</v-btn>
|
||||
<v-btn small @click="doRestartFirmware" class="ml-4" color="error"><v-icon class="mr-sm-2">mdi-cached</v-icon>FIRMWARE_Restart</v-btn>
|
||||
<v-btn small @click="doRestartFirmware" class="ml-4" color="error"><v-icon class="mr-sm-2">mdi-cached</v-icon>FIRMWARE Restart</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
@@ -6,26 +6,24 @@
|
||||
|
||||
<template>
|
||||
<v-card>
|
||||
<v-list-item>
|
||||
<v-list-item-avatar color="grey"><v-icon dark>mdi-view-dashboard</v-icon></v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="headline">Dashboard</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-card-text class="px-0 pt-3 content">
|
||||
<v-toolbar flat dense >
|
||||
<v-toolbar-title>
|
||||
<span class="subheading"><v-icon left>mdi-view-dashboard</v-icon>Dashbaord</span>
|
||||
</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text class="py-3">
|
||||
<v-row>
|
||||
<v-col class="px-10 py-0">
|
||||
<v-col class="py-0">
|
||||
<v-switch v-model="boolShowWebcamOnDashboard" label="Webcam" class="settings_dashboard_switch mt-0"></v-switch>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col class="px-10 py-0">
|
||||
<v-col class="py-0">
|
||||
<v-switch v-model="boolShowTempchartOnDashboard" label="Tempchart" class="settings_dashboard_switch mt-0"></v-switch>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col class="px-10 py-0">
|
||||
<v-col class="py-0">
|
||||
<v-switch v-model="boolShowConsoleOnDashboard" label="Console" class="settings_dashboard_switch mt-0"></v-switch>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
@@ -1,23 +1,21 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-list-item>
|
||||
<v-list-item-avatar color="grey"><v-icon dark>mdi-arrow-expand-vertical</v-icon></v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="headline">Endstops</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-card-text class="px-0 pt-0 pb-2 content">
|
||||
<v-toolbar flat dense >
|
||||
<v-toolbar-title>
|
||||
<span class="subheading"><v-icon left>mdi-arrow-expand-vertical</v-icon>Endstops</span>
|
||||
</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text class="pb-0">
|
||||
<div v-for="(status, index) of sortEndstops" v-bind:key="index">
|
||||
<v-row class="px-6" >
|
||||
<v-col sm-12>
|
||||
<v-row>
|
||||
<v-col class="py-2">
|
||||
<label class="mt-1 d-inline-block">Endstop <b>{{ index.toUpperCase() }}</b></label>
|
||||
<v-chip class="float-right" :color="status === 'open' ? 'green' : 'red' " text-color="white">{{ status }}</v-chip>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<v-row class="px-6" v-if="(Object.keys(endstops).length === 0 && endstops.constructor === Object)" >
|
||||
<v-col sm-12>
|
||||
<v-row v-if="(Object.keys(endstops).length === 0 && endstops.constructor === Object)" >
|
||||
<v-col class="py-0">
|
||||
<p>Press the sync-button on the right-bottom to load the current endstop status.</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
@@ -6,16 +6,14 @@
|
||||
|
||||
<template>
|
||||
<v-card>
|
||||
<v-list-item>
|
||||
<v-list-item-avatar color="grey"><v-icon dark>mdi-cog</v-icon></v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="headline">General</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-card-text class="px-0 pb-0 pt-3 content">
|
||||
<v-toolbar flat dense >
|
||||
<v-toolbar-title>
|
||||
<span class="subheading"><v-icon left>mdi-cog</v-icon>General</span>
|
||||
</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text class="py-0">
|
||||
<v-row>
|
||||
<v-col class="px-10 py-0">
|
||||
<v-col class="py-0">
|
||||
<v-text-field
|
||||
v-model="printerName"
|
||||
label="Printer Name"
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-list-item>
|
||||
<v-list-item-avatar color="grey"><v-icon dark>mdi-exclamation-thick</v-icon></v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="headline">Machine Limits</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-divider class="mt-2"></v-divider>
|
||||
<v-toolbar flat dense >
|
||||
<v-toolbar-title>
|
||||
<span class="subheading"><v-icon left>mdi-speedometer</v-icon>Machine Limits</span>
|
||||
</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<tool-slider label="Velocity" unit="mm/s" :target="current_velocity" :max="max_velocity" command="SET_VELOCITY_LIMIT" attribute-name="VELOCITY=" ></tool-slider>
|
||||
<v-divider></v-divider>
|
||||
<tool-slider label="Acceleration" unit="mm/s²" :target="current_accel" :max="max_accel" command="SET_VELOCITY_LIMIT" attribute-name="ACCEL=" ></tool-slider>
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-list-item>
|
||||
<v-list-item-avatar color="grey"><v-icon dark>mdi-file-document-edit</v-icon></v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="headline">Logfiles</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-card-text class=" text-center text-lg-left">
|
||||
<v-toolbar flat dense >
|
||||
<v-toolbar-title>
|
||||
<span class="subheading"><v-icon left>mdi-file-document-edit</v-icon>Logfiles</span>
|
||||
</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text :class="'text-center text-lg-left pt-4 '+(klippy_state !== 'ready' ? ' pb-3' : 'pb-0')">
|
||||
<v-row>
|
||||
<v-col :class="'py-0'+(klippy_state !== 'ready' ? ' col-6' : '')">
|
||||
<v-btn :href="'//'+hostname+':'+port+'/server/files/klippy.log'" block color="primary"><v-icon class="mr-2">mdi-download</v-icon>Klipper</v-btn>
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
|
||||
<template>
|
||||
<v-card>
|
||||
<v-list-item>
|
||||
<v-list-item-avatar color="grey"><v-icon dark>mdi-code-tags</v-icon></v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="headline">Macros</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-card-text class="px-0 pb-3 pt-3 content">
|
||||
<v-toolbar flat dense >
|
||||
<v-toolbar-title>
|
||||
<span class="subheading"><v-icon left>mdi-code-tags</v-icon>Macros</span>
|
||||
</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text class="py-3">
|
||||
<div v-for="(macro, index) in this['printer/getAllMacros']" v-bind:key="index">
|
||||
<v-row>
|
||||
<v-col class="px-10 py-0">
|
||||
<v-col class="py-0">
|
||||
<settings-macro-switch :name="macro.name"></settings-macro-switch>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
@@ -4,33 +4,41 @@
|
||||
|
||||
<template>
|
||||
<v-card>
|
||||
<v-list-item>
|
||||
<v-list-item-avatar color="grey"><v-icon dark>mdi-webcam</v-icon></v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="headline">Webcam</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-card-text class="px-0 pt-3 content">
|
||||
<v-toolbar flat dense >
|
||||
<v-toolbar-title>
|
||||
<span class="subheading"><v-icon left>mdi-webcam</v-icon>Webcam</span>
|
||||
</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col class="px-10 py-0">
|
||||
<v-col class="py-0">
|
||||
<v-text-field
|
||||
v-model="webcamUrl"
|
||||
hide-details
|
||||
label="Webcam URL"
|
||||
></v-text-field>
|
||||
|
||||
<v-row v-if="rotationEnabled">
|
||||
<v-col sm="auto">
|
||||
<v-switch v-model="rotate" hide-details label="Rotate"></v-switch>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-select :items="[{ text: '90 degrees', value: 90 }, { text: '270 degrees', value: 270 }]" v-model="rotateDegrees" hide-details></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-if="rotationEnabled">
|
||||
<v-col class="py-0" col-auto>
|
||||
<v-switch v-model="rotate" hide-details label="Rotate"></v-switch>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-select :items="[{ text: '90 degrees', value: 90 }, { text: '270 degrees', value: 270 }]" v-model="rotateDegrees" hide-details></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col class="py-0">
|
||||
<v-switch v-model="flipX" hide-details label="Flip webcam horizontally"></v-switch>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col class="py-0">
|
||||
<v-switch v-model="flipY" hide-details label="Flip webcam vertically"></v-switch>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col class="py-0">
|
||||
<v-switch v-model="boolNavi" hide-details label="Show in navigation"></v-switch>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
@@ -6,38 +6,45 @@
|
||||
.statusPanel-image-preview {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.v-btn.minwidth-0 {
|
||||
min-width: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<v-card>
|
||||
<v-list-item>
|
||||
<v-progress-circular
|
||||
:rotate="-90"
|
||||
:size="50"
|
||||
:width="7"
|
||||
:value="printPercent * 100"
|
||||
color="red"
|
||||
class="mr-5 mt-2"
|
||||
v-if="['printing', 'paused', 'error'].includes(printer_state)"
|
||||
>
|
||||
</v-progress-circular>
|
||||
<v-list-item-avatar color="grey" v-if="!['printing', 'paused', 'error'].includes(printer_state)"><v-icon dark>mdi-information-variant</v-icon></v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="headline">{{ ['printing', 'paused', 'error'].includes(printer_state) ? Math.round(printPercent * 100)+"% - " : "" }}{{ display_message ? display_message : (printer_state !== "" ? printer_state.charAt(0).toUpperCase() + printer_state.slice(1) : "Unknown") }}</v-list-item-title>
|
||||
<v-list-item-subtitle class="mr-3" v-if="['printing', 'paused', 'complete', 'error'].includes(printer_state)">{{ "File: "+current_filename }}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-btn-toggle
|
||||
color="primary"
|
||||
dense
|
||||
multiple
|
||||
>
|
||||
<v-btn class="button-min-width-auto orange px-2" v-if="printer_state === 'printing'" @click="btnPauseJob" :loading="loadings.includes('statusPrintPause')" title="Pause print"><v-icon>mdi-pause</v-icon></v-btn>
|
||||
<v-btn class="button-min-width-auto red" v-if="(printer_state === 'paused')" :loading="loadings.includes('statusPrintCancel')" @click="btnCancelJob" title="Cancel print"><v-icon>mdi-stop</v-icon></v-btn>
|
||||
<v-btn class="button-min-width-auto orange" v-if="(printer_state === 'paused')" :loading="loadings.includes('statusPrintResume')" @click="btnResumeJob" title="Resume job"><v-icon>mdi-play</v-icon></v-btn>
|
||||
<v-btn class="button-min-width-auto orange" v-if="(printer_state === 'error')" :loading="loadings.includes('statusPrintClear')" @click="btnClearJob" title="Clear job"><v-icon>mdi-close</v-icon></v-btn>
|
||||
<v-btn class="button-min-width-auto primary" v-if="(printer_state === 'complete')" :loading="loadings.includes('statusPrintReprint')" @click="btnReprintJob" title="Reprint job"><v-icon>mdi-autorenew</v-icon></v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-list-item>
|
||||
<v-toolbar flat dense>
|
||||
<v-toolbar-title>
|
||||
<span class="subheading">
|
||||
<v-icon left>mdi-information</v-icon>Status: {{ (printer_state !== "" ? printer_state.charAt(0).toUpperCase() + printer_state.slice(1) : "Unknown") }}
|
||||
</span>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-item-group class="v-btn-toggle" name="controllers">
|
||||
<v-btn small class="px-2 minwidth-0" color="orange" v-if="printer_state === 'printing'" @click="btnPauseJob" :loading="loadings.includes('statusPrintPause')" title="Pause print"><v-icon small>mdi-pause</v-icon></v-btn>
|
||||
<v-btn small class="px-2 minwidth-0" color="red" v-if="(printer_state === 'paused')" :loading="loadings.includes('statusPrintCancel')" @click="btnCancelJob" title="Cancel print"><v-icon small>mdi-stop</v-icon></v-btn>
|
||||
<v-btn small class="px-2 minwidth-0" color="orange" v-if="(printer_state === 'paused')" :loading="loadings.includes('statusPrintResume')" @click="btnResumeJob" title="Resume job"><v-icon small>mdi-play</v-icon></v-btn>
|
||||
<v-btn small class="px-2 minwidth-0" color="orange" v-if="(printer_state === 'error')" :loading="loadings.includes('statusPrintClear')" @click="btnClearJob" title="Clear job"><v-icon small>mdi-close</v-icon></v-btn>
|
||||
<v-btn small class="px-2 minwidth-0" color="primary" v-if="(printer_state === 'complete')" :loading="loadings.includes('statusPrintReprint')" @click="btnReprintJob" title="Reprint job"><v-icon small>mdi-autorenew</v-icon></v-btn>
|
||||
</v-item-group>
|
||||
</v-toolbar>
|
||||
<v-row v-if="current_filename" class="mx-0">
|
||||
<v-col class="col-auto py-3 pr-0">
|
||||
<v-progress-circular
|
||||
:rotate="-90"
|
||||
:size="50"
|
||||
:width="7"
|
||||
:value="printPercent * 100"
|
||||
color="red"
|
||||
>
|
||||
</v-progress-circular>
|
||||
</v-col>
|
||||
<v-col class="col py-3" style="width: 100px;">
|
||||
<h3 class="font-weight-regular">{{ Math.round(printPercent * 100)+"%" }}{{ display_message ? " - "+display_message : "" }}</h3>
|
||||
<span class="subtitle-2 text-truncate d-block px-0 text--disabled"><v-icon small class="mr-1">mdi-file-outline</v-icon>{{ current_filename }}</span>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider class="mt-0 mb-0" ></v-divider>
|
||||
<v-card-text class="px-0 pt-0 pb-2 content">
|
||||
<v-row>
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<v-card class="fileupload-card" @dragover="dragOverUpload" @dragleave="dragLeaveUpload" @drop.prevent.stop="dragDropUpload">
|
||||
<v-card class="fileupload-card my-3" @dragover="dragOverUpload" @dragleave="dragLeaveUpload" @drop.prevent.stop="dragDropUpload">
|
||||
<v-card-title>
|
||||
G-Code Files
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
@@ -23,7 +23,7 @@ export default new Vuetify({
|
||||
theme: {
|
||||
themes: {
|
||||
dark: {
|
||||
red: '#f7240a'
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -62,7 +62,7 @@ export default {
|
||||
if (value.target) color = colorHot
|
||||
|
||||
if(nameSplit[0].startsWith("extruder")) {
|
||||
let min_extrude_temp = parseFloat(state.configfile.config[key].min_extrude_temp) || 170
|
||||
let min_extrude_temp = key in state.configfile.config ? parseFloat(state.configfile.config[key].min_extrude_temp) : 170
|
||||
if (value.temperature >= min_extrude_temp) icon = "printer-3d-nozzle"
|
||||
} else if (nameSplit[0] === "heater_bed") {
|
||||
icon = "radiator-disabled"
|
||||
|
||||
Reference in New Issue
Block a user