Implement version checker in Vue.

This commit is contained in:
Richard Lewis 2019-08-05 17:29:35 +03:00 committed by Pavel Djundik
parent 2b602ca333
commit b95f89c4c2
6 changed files with 95 additions and 73 deletions

View 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>

View file

@ -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>

View file

@ -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/ */
}

View file

@ -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}));
}

View file

@ -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),

View file

@ -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}}