Implement version checker in Vue.

client/components/VersionChecker.vue

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

client/components/Windows/Help.vue

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

client/css/style.css

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

client/js/socket-events/changelog.js

@@ -1,20 +1,13 @@
 "use strict";
 
-const $ = require("jquery");
 const socket = require("../socket");
-const templates = require("../../views");
+const {vueApp} = require("../vue");
-
-// 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");
-	}
-}
 
 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({
+	vueApp.$store.commit("versionStatus", status);
-		latest: data.latest,
-		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}));
-}

client/js/store.js

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

client/views/version_checker.tpl

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