Implement version checker in Vue.
This commit is contained in:
Richard Lewis
Pavel Djundik
parent
2b602ca333
commit
b95f89c4c2
69
client/components/VersionChecker.vue
Normal file
69
client/components/VersionChecker.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div id="version-checker" :class="[$store.state.versionStatus]">
|
||||
<p v-if="$store.state.versionStatus === 'loading'">
|
||||
Checking for updates...
|
||||
</p>
|
||||
<p v-if="$store.state.versionStatus === 'new-version'">
|
||||
The Lounge <b>{{ $store.state.versionData.latest.version }}</b>
|
||||
<template v-if="$store.state.versionData.latest.prerelease">
|
||||
(pre-release)
|
||||
</template>
|
||||
is now available.
|
||||
<br />
|
||||
|
||||
<a :href="$store.state.versionData.latest.url" target="_blank" rel="noopener">
|
||||
Read more on GitHub
|
||||
</a>
|
||||
</p>
|
||||
<p v-if="$store.state.versionStatus === 'new-packages'">
|
||||
The Lounge is up to date, but there are out of date packages Run
|
||||
<code>thelounge upgrade</code> on the server to upgrade packages.
|
||||
</p>
|
||||
<template v-if="$store.state.versionStatus === 'up-to-date'">
|
||||
<p>
|
||||
The Lounge is up to date!
|
||||
</p>
|
||||
|
||||
<button
|
||||
v-if="$store.state.versionDataExpired"
|
||||
id="check-now"
|
||||
class="btn btn-small"
|
||||
@click="checkNow"
|
||||
>
|
||||
Check now
|
||||
</button>
|
||||
</template>
|
||||
<template v-if="$store.state.versionStatus === 'error'">
|
||||
<p>
|
||||
Information about latest releases could not be retrieved.
|
||||
</p>
|
||||
|
||||
<button id="check-now" class="btn btn-small" @click="checkNow">Try again</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const socket = require("../js/socket");
|
||||
|
||||
export default {
|
||||
name: "VersionChecker",
|
||||
data() {
|
||||
return {
|
||||
status: "loading",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (!this.$store.state.versionData) {
|
||||
this.checkNow();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkNow() {
|
||||
this.$store.commit("versionData", null);
|
||||
this.$store.commit("versionStatus", "loading");
|
||||
socket.emit("changelog");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -19,7 +19,7 @@
|
||||
</h2>
|
||||
|
||||
<div class="about">
|
||||
<div id="version-checker" />
|
||||
<VersionChecker />
|
||||
|
||||
<template v-if="$root.serverConfiguration.gitCommit">
|
||||
<p>
|
||||
@ -685,11 +685,13 @@
|
||||
|
||||
<script>
|
||||
import SidebarToggle from "../SidebarToggle.vue";
|
||||
import VersionChecker from "../VersionChecker.vue";
|
||||
|
||||
export default {
|
||||
name: "Help",
|
||||
components: {
|
||||
SidebarToggle,
|
||||
VersionChecker,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1999,11 +1999,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
||||
color: #3c763d;
|
||||
}
|
||||
|
||||
#version-checker.up-to-date #check-now {
|
||||
/* "Check now" button is hidden until data expires */
|
||||
display: none;
|
||||
}
|
||||
|
||||
#version-checker.up-to-date::before {
|
||||
content: "\f00c"; /* http://fontawesome.io/icon/check/ */
|
||||
}
|
||||
|
||||
@ -1,20 +1,13 @@
|
||||
"use strict";
|
||||
|
||||
const $ = require("jquery");
|
||||
const socket = require("../socket");
|
||||
const templates = require("../../views");
|
||||
|
||||
// Requests version information if it hasn't been retrieved before (or if it has
|
||||
// been removed from the page, i.e. when clicking on "Check now". Displays a
|
||||
// loading state until received.
|
||||
function requestIfNeeded() {
|
||||
if ($("#version-checker").is(":empty")) {
|
||||
renderVersionChecker({status: "loading"});
|
||||
socket.emit("changelog");
|
||||
}
|
||||
}
|
||||
const {vueApp} = require("../vue");
|
||||
|
||||
socket.on("changelog", function(data) {
|
||||
vueApp.$store.commit("versionData", data);
|
||||
vueApp.$store.commit("versionDataExpired", false);
|
||||
|
||||
/* TODO: implement changelog rendering in Vue
|
||||
// 1. Release notes window for the current version
|
||||
$("#changelog").html(templates.windows.changelog(data.current));
|
||||
|
||||
@ -23,6 +16,7 @@ socket.on("changelog", function(data) {
|
||||
links.prop("target", "_blank");
|
||||
// Add required metadata to image links, to support built-in image viewer
|
||||
links.has("img").addClass("toggle-thumbnail");
|
||||
*/
|
||||
|
||||
// 2. Version checker visible in Help window
|
||||
let status;
|
||||
@ -37,31 +31,14 @@ socket.on("changelog", function(data) {
|
||||
status = "error";
|
||||
}
|
||||
|
||||
renderVersionChecker({
|
||||
latest: data.latest,
|
||||
status,
|
||||
});
|
||||
vueApp.$store.commit("versionStatus", status);
|
||||
|
||||
// When there is a button to refresh the checker available, display it when
|
||||
// data is expired. Before that, server would return same information anyway.
|
||||
if (data.expiresAt) {
|
||||
setTimeout(() => $("#version-checker #check-now").show(), data.expiresAt - Date.now());
|
||||
setTimeout(
|
||||
() => vueApp.$store.commit("versionDataExpired", true),
|
||||
data.expiresAt - Date.now()
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
$("#help, #changelog").on("show", requestIfNeeded);
|
||||
|
||||
// When clicking the "Check now" button, remove current checker information and
|
||||
// request a new one. Loading will be displayed in the meantime.
|
||||
$("#help").on("click", "#check-now", () => {
|
||||
$("#version-checker").empty();
|
||||
requestIfNeeded();
|
||||
});
|
||||
|
||||
// Given a status and latest release information, update the version checker
|
||||
// (CSS class and content)
|
||||
function renderVersionChecker({status, latest}) {
|
||||
$("#version-checker")
|
||||
.prop("class", status)
|
||||
.html(templates.version_checker({latest, status}));
|
||||
}
|
||||
|
||||
@ -13,6 +13,9 @@ export default new Vuex.Store({
|
||||
sidebarOpen: false,
|
||||
sidebarDragging: false,
|
||||
userlistOpen: storage.get("thelounge.state.userlist") !== "false",
|
||||
versionData: null,
|
||||
versionStatus: "loading",
|
||||
versionDataExpired: false,
|
||||
},
|
||||
mutations: {
|
||||
isConnected(state, payload) {
|
||||
@ -39,6 +42,15 @@ export default new Vuex.Store({
|
||||
userlistOpen(state, payload) {
|
||||
state.userlistOpen = payload;
|
||||
},
|
||||
versionData(state, payload) {
|
||||
state.versionData = payload;
|
||||
},
|
||||
versionStatus(state, payload) {
|
||||
state.versionStatus = payload;
|
||||
},
|
||||
versionDataExpired(state, payload) {
|
||||
state.versionDataExpired = payload;
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
currentSession: (state) => state.sessions.find((item) => item.current),
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
{{#equal status "loading"}}
|
||||
<p>
|
||||
Checking for updates...
|
||||
</p>
|
||||
{{else equal status "new-version"}}
|
||||
<p>
|
||||
The Lounge <b>{{latest.version}}</b>{{#if latest.prerelease}} (pre-release){{/if}}
|
||||
is now available.
|
||||
<br>
|
||||
|
||||
<a href="{{latest.url}}" target="_blank" rel="noopener">
|
||||
Read more on GitHub
|
||||
</a>
|
||||
</p>
|
||||
{{else equal status "new-packages"}}
|
||||
<p>
|
||||
The Lounge is up to date, but there are out of date packages
|
||||
|
||||
Run <code>thelounge upgrade</code> on the server to upgrade packages.
|
||||
</p>
|
||||
{{else equal status "up-to-date"}}
|
||||
<p>
|
||||
The Lounge is up to date!
|
||||
</p>
|
||||
|
||||
<button id="check-now" class="btn btn-small">Check now</button>
|
||||
{{else equal status "error"}}
|
||||
<p>
|
||||
Information about latest releases could not be retrieved.
|
||||
</p>
|
||||
|
||||
<button id="check-now" class="btn btn-small">Try again</button>
|
||||
{{/equal}}
|
||||
Loading…
Reference in New Issue
Block a user