Henrik Muehe
94072253d4
Replaces the legacy side-menu chrome with a 4-tab top header. - index.pug: tablet/kiosk fit-to-viewport script, header tab nav, estop/state badges in header. - app.js: route hash to (control|program|console|<settings-family>), multi-section settings shell. - control-view: header DRO, jog grid, MDI/probe/macros panels. - program-view + program-mixin: file browser + toolpath preview + run/pause/stop, replaces the legacy 'macros' tab content. - console-view: MDI shell, message log, indicators. - settings-shell-view: rail-driven inner pages (Display & Units, Probing, G-code & Motion, Macros, Network, etc.). - settings-view: filter Svelte SettingsView to one rail section. - SettingsView.svelte: tag every section with data-sec=… so the filter above can hide non-matching ones. - style.styl: ~2700 lines of V09 layout, DRO, jog grid, status strip, and tablet/kiosk variants. No A-axis / auxiliary-axis content lives on this branch.
143 lines
6.3 KiB
Plaintext
143 lines
6.3 KiB
Plaintext
script#program-view-template(type="text/x-template")
|
|
.program-page
|
|
|
|
// ----- Modal dialogs -----
|
|
message(:show.sync="showGcodeMessage")
|
|
h3(slot="header") Processing New File
|
|
div(slot="body")
|
|
h3 Please wait..
|
|
p Simulating GCode to check for errors, calculate ETA and generate 3D view.
|
|
div(slot="footer")
|
|
label Simulating {{(toolpath_progress || 0) | percent}}
|
|
|
|
message(:show.sync="GCodeNotFound")
|
|
h3(slot="header") File not found
|
|
div(slot="body")
|
|
p It seems like the file you selected cannot be found. Try uploading again.
|
|
div(slot="footer")
|
|
button.pure-button.button-error(@click="GCodeNotFound=false") OK
|
|
|
|
message(:show.sync="uploading_files")
|
|
h3(slot="header") Files uploading
|
|
div(slot="body")
|
|
h3 Please wait...
|
|
p
|
|
p The files are currently being uploaded.
|
|
p Do not close the window.
|
|
div(slot="footer")
|
|
|
|
message.error-message(:show.sync="deleteGCode")
|
|
h3(slot="header") Select files to delete:
|
|
div(slot="body")
|
|
input.search-bar(type="text", v-model="search_query", placeholder="Search Files...")
|
|
.container
|
|
.folders
|
|
h3 Folders
|
|
div(v-for="(index, folder) in state.gcode_list", :key="index",
|
|
@click="populateFiles(index)",
|
|
class="folder-item",
|
|
:class="{ selected: index === selected_folder_index }") {{ folder.name }}
|
|
.files
|
|
h3 Files
|
|
label.file-item(v-for="item in gcode_filtered_files", :key="item")
|
|
input(type="checkbox", :value="item", v-model="selected_items_to_delete")
|
|
| {{ item }}
|
|
div(slot="footer")
|
|
button.pure-button(@click="cancel_delete", style="height:50px") Cancel
|
|
button.pure-button.button-success(@click="delete_current", style="height:50px")
|
|
.fa.fa-trash
|
|
| Selected
|
|
|
|
message(:show.sync="create_folder")
|
|
h3(slot="header") Enter folder name:
|
|
div(slot="body")
|
|
input.input-name(type="text", minlength="1", maxlength="15",
|
|
style="margin-top:1rem;margin-bottom:2rem;",
|
|
id="folder-name", v-model="folder_name", @keypress="edited_folder_name")
|
|
div(slot="footer")
|
|
button.pure-button(@click="cancel_new_folder") Cancel
|
|
button.pure-button.button-success(@click="create_new_folder", :disabled="!edited") Create
|
|
|
|
message(:show.sync="confirmDelete")
|
|
h3(slot="header") Delete Folder?
|
|
div(slot="body")
|
|
p Are you sure to delete the folder?
|
|
div(slot="footer")
|
|
button.pure-button(@click="confirmDelete=false") Cancel
|
|
button.pure-button.button-error(@click="delete_folder") Folder only
|
|
button.pure-button.button-success(@click="delete_folder_and_files") Folder and files
|
|
|
|
.program-card
|
|
|
|
// Action bar (RUN / STOP / Upload / Download / Delete)
|
|
.action-bar
|
|
button.action-btn.run(:class="{'attention': is_holding}",
|
|
@click="start_pause", :disabled="!state.selected",
|
|
:title="is_running ? 'Pause program.' : 'Start program.'")
|
|
.fa.fa-play.ico(v-if="!is_running")
|
|
.fa.fa-pause.ico(v-else)
|
|
span {{is_running ? 'PAUSE' : 'RUN'}}
|
|
button.action-btn.stop(@click="stop", title="Stop program.")
|
|
.fa.fa-stop.ico
|
|
span STOP
|
|
button.action-btn(@click="open_folder", :disabled="!is_ready",
|
|
title="Upload a new GCode folder.")
|
|
.fa.fa-folder-plus.ico
|
|
span UPLOAD FOLDER
|
|
form.gcode-folder-input.file-upload
|
|
input#folderInput(type="file", @change="upload_folder",
|
|
:disabled="!is_ready", webkitdirectory, directory)
|
|
button.action-btn(@click="open_file", :disabled="!is_ready",
|
|
title="Upload a new GCode program.")
|
|
.fa.fa-file-arrow-up.ico
|
|
span UPLOAD FILE
|
|
form.gcode-file-input.file-upload
|
|
input(type="file", @change="upload_file", :disabled="!is_ready",
|
|
accept=".nc,.ngc,.gcode,.gc", multiple)
|
|
a(:href="state.selected ? '/api/file/' + state.selected : '#'",
|
|
download, :class="{disabled: !state.selected}",
|
|
title="Download the selected GCode program.")
|
|
button.action-btn(:disabled="!state.selected")
|
|
.fa.fa-file-arrow-down.ico
|
|
span DOWNLOAD FILE
|
|
button.action-btn.danger(@click="deleteGCode = true",
|
|
:disabled="!state.selected || !is_ready",
|
|
title="Delete current GCode program.")
|
|
.fa.fa-trash.ico
|
|
span DELETE
|
|
|
|
// File / folder selectors
|
|
.file-bar
|
|
button.file-btn(@click="create_folder=true", :disabled="!is_ready")
|
|
.fa.fa-folder-plus
|
|
| Create Folder
|
|
button.file-btn(@click="confirmDelete=true", :disabled="!is_ready")
|
|
.fa.fa-folder-minus
|
|
| Delete Folder
|
|
select.file-select(title="Select previously uploaded GCode folder.",
|
|
v-model="state.folder", @change="reset_gcode", :disabled="!is_ready")
|
|
option(selected, value="default") Default folder
|
|
option(v-for="file in gcode_folders", :value="file") {{file}}
|
|
select.file-select.primary(title="Select previously uploaded GCode programs.",
|
|
v-model="state.selected", @change="load", :disabled="!is_ready")
|
|
option(value="") (no file)
|
|
option(v-for="file in gcode_files", :value="file") {{file}}
|
|
button.file-btn(@click="toggle_sorting", :disabled="!is_ready")
|
|
.fa.fa-arrow-down-wide-short
|
|
| {{files_sortby}}
|
|
|
|
// Body: gcode listing on the left, 3D viewer on the right.
|
|
// The 3D path-viewer is suppressed when the UI is loaded by
|
|
// the Pi's onboard kiosk browser — the VideoCore IV cannot
|
|
// run three.js at a usable frame rate. Off-Pi clients still
|
|
// see the full split.
|
|
.program-body(:class="{'no-preview': is_kiosk}")
|
|
gcode-viewer
|
|
path-viewer(v-if="!is_kiosk", :toolpath="toolpath",
|
|
:state="state", :config="config")
|
|
|
|
.progress-bar(v-if="toolpath_progress && toolpath_progress < 1",
|
|
title="Simulating GCode to check for errors, calculate ETA and generate 3D view.")
|
|
div(:style="'width:' + (toolpath_progress || 0) * 100 + '%'")
|
|
label Simulating {{(toolpath_progress || 0) | percent}}
|