-
-
Notifications
You must be signed in to change notification settings - Fork 455
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Adds flash message for save and errors
- Loading branch information
Showing
10 changed files
with
239 additions
and
141 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| <template> | ||
| <v-app-bar | ||
| app | ||
| clipped-left | ||
| > | ||
| <!-- <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> --> | ||
| <!-- <img src="./assets/logo.svg" class="logo" /> --> | ||
| <v-icon large color="#1970b5">mdi-printer-3d-nozzle</v-icon> | ||
| <v-toolbar-title class="title text-h4"> | ||
| Fluidd | ||
| </v-toolbar-title> | ||
| <v-spacer /> | ||
| <v-btn color="secondary" class="mr-2" to="/"><v-icon small class="mr-2">mdi-home</v-icon> Dashboard</v-btn> | ||
| <!-- <v-btn color="secondary" class="mr-2" to="/configuration"><v-icon small class="mr-2">mdi-tune</v-icon> Configuration</v-btn> --> | ||
| <v-spacer /> | ||
| <v-tooltip bottom v-if="printerConnected && klippyConnected"> | ||
| <template v-slot:activator="{ on, attrs }"> | ||
| <v-btn @click="emergencyStop()" v-bind="attrs" v-on="on" icon color="error"><v-icon>mdi-car-brake-alert</v-icon></v-btn> | ||
| </template> | ||
| Emergency Stop | ||
| </v-tooltip> | ||
| <v-btn icon color="white" class="mr-2" to="/settings"><v-icon small>mdi-cog</v-icon></v-btn> | ||
| </v-app-bar> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { Component, Mixins, Watch } from 'vue-property-decorator' | ||
| import UtilsMixin from '@/mixins/utils' | ||
| import { SocketActions } from '@/socketActions' | ||
| @Component({ | ||
| components: {} | ||
| }) | ||
| export default class AppBar extends Mixins(UtilsMixin) { | ||
| get printerConnected () { | ||
| return this.$store.getters['socket/getConnectionState'] | ||
| } | ||
| get klippyState () { | ||
| return this.$store.state.socket.printer.info.state | ||
| } | ||
| get klippyConnected () { | ||
| if (this.klippyState !== 'ready') { | ||
| return false | ||
| } | ||
| return true | ||
| } | ||
| get currentFile () { | ||
| return this.$store.state.socket.printer.print_stats.filename | ||
| } | ||
| // Watch currentfile and refresh its metadata to ensure | ||
| // our status has the correct data. | ||
| @Watch('currentFile') | ||
| oncurrentFileChanged (val: string) { | ||
| if (val && val.length > 0) { | ||
| SocketActions.serverFilesMetaData(val) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .title { | ||
| background: -webkit-linear-gradient(45deg, #1970b5, #9accf5); | ||
| background-clip: text; | ||
| -webkit-text-fill-color: transparent;} | ||
| .logo { | ||
| margin-right: 12px; | ||
| max-height: 40px; | ||
| max-width: 40px; | ||
| object-fit: contain; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <template> | ||
| <v-container style="height: 400px;"> | ||
| <v-row | ||
| class="fill-height" | ||
| align-content="center" | ||
| justify="center" | ||
| > | ||
| <v-col | ||
| class="subtitle-1 text-center" | ||
| cols="12" | ||
| v-if="!printerConnected" | ||
| > | ||
| Connecting to printer... | ||
| </v-col> | ||
| <v-col cols="6" v-if="!klippyConnected"> | ||
| <v-alert type="error" v-if="!klippyConnected"> | ||
| Klippy has disconnected or is shutdown.<br /> | ||
| <span v-html=klippyError></span> | ||
| </v-alert> | ||
| <v-btn block color="warning" @click="sendGcode('FIRMWARE_RESTART')" class="me-2 mb-2">Firmware Restart</v-btn> | ||
| </v-col> | ||
| <v-col cols="6" v-if="!printerConnected"> | ||
| <v-progress-linear | ||
| color="warning" | ||
| indeterminate | ||
| rounded | ||
| height="6" | ||
| ></v-progress-linear> | ||
| </v-col> | ||
| </v-row> | ||
| </v-container> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { Component, Mixins } from 'vue-property-decorator' | ||
| import UtilsMixin from '@/mixins/utils' | ||
| @Component({ | ||
| components: {} | ||
| }) | ||
| export default class AppDisconnected extends Mixins(UtilsMixin) { | ||
| get printerConnected () { | ||
| return this.$store.getters['socket/getConnectionState'] | ||
| } | ||
| get klippyState () { | ||
| return this.$store.state.socket.printer.info.state | ||
| } | ||
| get klippyConnected () { | ||
| if (this.klippyState !== 'ready') { | ||
| return false | ||
| } | ||
| return true | ||
| } | ||
| get klippyError () { | ||
| const message = this.$store.state.socket.printer.info.state_message | ||
| if (message) { | ||
| return message.replace(/(?:\r\n|\r|\n)/g, '<br />') | ||
| } | ||
| return '' | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <template> | ||
| <v-snackbar | ||
| v-model="open" | ||
| :color="type" | ||
| :timeout="timeout" | ||
| top | ||
| > | ||
| {{ text }} | ||
|
|
||
| <template v-slot:action="{ attrs }"> | ||
| <v-btn | ||
| dark | ||
| text | ||
| v-bind="attrs" | ||
| @click="open = false" | ||
| > | ||
| Close | ||
| </v-btn> | ||
| </template> | ||
| </v-snackbar> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import Vue from 'vue' | ||
| import { Component, Prop } from 'vue-property-decorator' | ||
| @Component({}) | ||
| export default class FlashMessage extends Vue { | ||
| @Prop({ type: Boolean }) | ||
| value!: boolean; | ||
| @Prop({ type: String, default: 'success' }) | ||
| type!: string; | ||
| @Prop({ type: String, default: 'Saved!' }) | ||
| text!: string; | ||
| @Prop({ type: Number, default: 4000 }) | ||
| timeout!: number; | ||
| get open () { | ||
| return this.$props.value | ||
| } | ||
| set open (value: boolean) { | ||
| this.$emit('input', value) | ||
| } | ||
| } | ||
| </script> |
Oops, something went wrong.