208 lines
8.6 KiB
Vue
208 lines
8.6 KiB
Vue
<template>
|
|
<v-card>
|
|
<v-toolbar flat dense >
|
|
<v-toolbar-title>
|
|
<span class="subheading"><v-icon left>mdi-update</v-icon>Update</span>
|
|
</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-tooltip top>
|
|
<template v-slot:activator="{ on, attrs }">
|
|
<v-btn small class="px-2 minwidth-0" color="primary" @click="btnSync" v-bind="attrs" v-on="on"><v-icon small>mdi-refresh</v-icon></v-btn>
|
|
</template>
|
|
<span>Check for updates</span>
|
|
</v-tooltip>
|
|
</v-toolbar>
|
|
<v-card-text class="px-0 pt-0 pb-0 content">
|
|
<v-row v-if="'version' in klipper">
|
|
<v-col class="pl-6 py-2 text-no-wrap">
|
|
<strong>Klipper</strong><br />
|
|
{{ klipper.version }}
|
|
</v-col>
|
|
<v-col class="pr-6 py-2 text-right">
|
|
<v-chip
|
|
small
|
|
label
|
|
outlined
|
|
:color="getColor(klipper)"
|
|
@click="updateKlipper"
|
|
:disabled="is_disabled(klipper)"
|
|
class="minwidth-0 mt-2 px-2 text-uppercase"
|
|
><v-icon small class="mr-1">mdi-{{ getIcon(klipper) }}</v-icon>{{ getText(klipper) }}</v-chip>
|
|
</v-col>
|
|
</v-row>
|
|
<div v-if="'version' in moonraker">
|
|
<v-divider class="mt-0 mb-0" ></v-divider>
|
|
<v-row>
|
|
<v-col class="pl-6 py-2 text-no-wrap">
|
|
<strong>Moonraker</strong><br />
|
|
{{ moonraker.version }}
|
|
</v-col>
|
|
<v-col class="pr-6 py-2 text-right">
|
|
<v-chip
|
|
small
|
|
label
|
|
outlined
|
|
:color="getColor(moonraker)"
|
|
@click="updateMoonraker"
|
|
:disabled="is_disabled(moonraker)"
|
|
class="minwidth-0 mt-2 px-2 text-uppercase"
|
|
><v-icon small class="mr-1">mdi-{{ getIcon(moonraker) }}</v-icon>{{ getText(moonraker) }}</v-chip>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
<div v-if="mainsail !== false && 'version' in mainsail">
|
|
<v-divider class="mt-0 mb-0" ></v-divider>
|
|
<v-row>
|
|
<v-col class="pl-6 py-2 text-no-wrap">
|
|
<strong>Mainsail</strong><br />
|
|
{{ 'v'+package_version }}
|
|
<span v-if="!is_disabled(mainsail)"> > {{ mainsail.remote_version.replace('Version ', 'v') }}</span>
|
|
</v-col>
|
|
<v-col class="pr-6 py-2 text-right">
|
|
<v-chip
|
|
small
|
|
label
|
|
outlined
|
|
:color="getColor(mainsail)"
|
|
@click="updateMainsail"
|
|
:disabled="is_disabled(mainsail)"
|
|
class="minwidth-0 mt-2 px-2 text-uppercase"
|
|
><v-icon small class="mr-1">mdi-{{ getIcon(mainsail) }}</v-icon>{{ getText(mainsail) }}</v-chip>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
<v-divider class="mt-0 mb-0 border-top-2" ></v-divider>
|
|
<v-row>
|
|
<v-col class="pl-6 py-2 text-no-wrap">
|
|
<strong>System</strong><br />
|
|
OS-Packages
|
|
</v-col>
|
|
<v-col class="pr-6 py-2 text-right">
|
|
<v-chip
|
|
small
|
|
label
|
|
outlined
|
|
color="gray"
|
|
@click="updateSystem"
|
|
class="minwidth-0 mt-2 px-2 text-uppercase"
|
|
><v-icon small class="mr-1">mdi-progress-upload</v-icon>upgrade</v-chip>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
|
|
export default {
|
|
components: {
|
|
|
|
},
|
|
data: function() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
package_version: state => state.packageVersion,
|
|
klipper: state => state.server.updateManager.klipper,
|
|
moonraker: state => state.server.updateManager.moonraker,
|
|
}),
|
|
mainsail:{
|
|
get() {
|
|
if ('name' in this.$store.state.server.updateManager.client)
|
|
return this.$store.state.server.updateManager.client
|
|
|
|
return false
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
btnSync() {
|
|
this.$socket.sendObj('machine.update.status', { refresh: true }, 'server/updateManager/getStatus')
|
|
},
|
|
getColor(object) {
|
|
if (typeof object === 'object' && object !== false) {
|
|
if ('is_valid' in object && !object.is_valid) return 'red'
|
|
if ('is_dirty' in object && object.is_dirty) return 'red'
|
|
|
|
if ('current_hash' in object && 'remote_hash' in object && object.current_hash !== object.remote_hash) return 'primary'
|
|
|
|
if ('name' in object && object.name === "mainsail") {
|
|
let remote_version = object.remote_version.split(' ')
|
|
remote_version = (remote_version.length > 1) ? remote_version[1] : remote_version[0]
|
|
|
|
if (this.package_version !== remote_version) return 'primary'
|
|
}
|
|
|
|
return 'green'
|
|
}
|
|
|
|
return 'red'
|
|
},
|
|
getText(object) {
|
|
if (typeof object === 'object' && object !== false) {
|
|
if ('is_valid' in object && !object.is_valid) return 'invalid'
|
|
if ('is_dirty' in object && object.is_dirty) return 'dirty'
|
|
|
|
if ('current_hash' in object && 'remote_hash' in object && object.current_hash !== object.remote_hash) return 'update'
|
|
|
|
if ('name' in object && object.name === "mainsail") {
|
|
let remote_version = object.remote_version.split(' ')
|
|
remote_version = (remote_version.length > 1) ? remote_version[1] : remote_version[0]
|
|
|
|
if (this.package_version !== remote_version) return 'update'
|
|
}
|
|
|
|
return 'up-to-date'
|
|
}
|
|
|
|
return 'ERROR'
|
|
},
|
|
getIcon(object) {
|
|
if (typeof object === 'object' && object !== false) {
|
|
if ('is_valid' in object && !object.is_valid) return 'alert-circle'
|
|
if ('is_dirty' in object && object.is_dirty) return 'alert-circle'
|
|
|
|
if ('current_hash' in object && 'remote_hash' in object && object.current_hash !== object.remote_hash) return 'progress-upload'
|
|
|
|
if ('name' in object && object.name === "mainsail") {
|
|
let remote_version = object.remote_version.split(' ')
|
|
remote_version = (remote_version.length > 1) ? remote_version[1] : remote_version[0]
|
|
|
|
if (this.package_version !== remote_version) return 'progress-upload'
|
|
}
|
|
|
|
return 'check'
|
|
}
|
|
|
|
return 'ERROR'
|
|
},
|
|
is_disabled(object) {
|
|
if (typeof object === 'object' && object !== false) {
|
|
if ('current_hash' in object && 'remote_hash' in object && object.current_hash !== object.remote_hash) return false
|
|
|
|
if ('name' in object && object.name === "mainsail") {
|
|
if ('v'+this.package_version !== object.remote_version.replace('Version ', 'v')) return false
|
|
}
|
|
}
|
|
|
|
return true
|
|
},
|
|
updateKlipper() {
|
|
this.$socket.sendObj('machine.update.klipper', { })
|
|
},
|
|
updateMoonraker() {
|
|
this.$socket.sendObj('machine.update.moonraker', { })
|
|
},
|
|
updateMainsail() {
|
|
this.$socket.sendObj('machine.update.client', { })
|
|
},
|
|
updateSystem() {
|
|
this.$socket.sendObj('machine.update.system', { })
|
|
},
|
|
}
|
|
}
|
|
</script> |