make lock/unlock work

app/js/index.js

@@ -1,6 +1,58 @@
 (function($) {
 	let ipcRenderer = require('electron').ipcRenderer;
+
+	//events
 	ipcRenderer.on('fileList', (event, files) => {
-		$('body').html(gitlit.templates.main({files: files}));
+		$('.js-container').html(gitlit.templates.main({files: files}));
 	});
+
+	ipcRenderer.on('notification', (event, notification) => {
+		if (notification.message) {
+			var notice = PNotify.alert({
+				text: notification.message,
+				type: notification.type, // - Type of the notice. 'notice', 'info', 'success', or 'error'.
+				delay: 5000,
+				modules: {
+					Buttons: {
+						closerHover: true
+					}
+				}
+			});
+
+			notice.on('click', function() {
+				notice.remove();
+			});
+		}
+
+		if (notification.event && notification.event === 'unlock') {
+			$('[data-file="' + notification.file + '"].js-unlock').hide();
+			$('[data-file="' + notification.file + '"].js-lock').show();
+		}
+		if (notification.event && notification.event === 'lock') {
+			$('[data-file="' + notification.file + '"].js-lock').hide();
+			$('[data-file="' + notification.file + '"].js-unlock').show();
+		}
+	});
+
+	$(document).on('click', '.js-lock', (ev) => {
+		ev.preventDefault();
+		let file = $(ev.currentTarget).attr('data-file');
+		ipcRenderer.send('lock', file);
+	});
+
+	$(document).on('click', '.js-unlock', (ev) => {
+		ev.preventDefault();
+		let file = $(ev.currentTarget).attr('data-file');
+		ipcRenderer.send('unlock', file);
+	});
+
+	$(document).on('click', '.js-refresh', (ev) => {
+		ev.preventDefault();
+		window.location.reload(false);
+	});
+
+
+	//startup
+	PNotify.defaults.styling = 'bootstrap4'; // Bootstrap version 4
+
 })(jQuery);

app/js/templates.js

@@ -1,7 +1,7 @@
 window.gitlit = window.gitlit || {};
 gitlit.templates = {
 	main: ejs.compile(`
-		<table class="table">
+		<table class="table table-striped">
 		<tr>
 			<th>file</th>
 			<th>status</th>
@@ -9,18 +9,34 @@ gitlit.templates = {
 		</tr>
 
 		<% files.forEach((file) => { %>
-			<tr class="<%= file.lockedBy ? 'alert alert-danger' : '' %>">
+			<tr>
 				<td><%= file.file %></td>
 				<td><%= file.lockedBy ? file.lockedBy + ' (id: ' + file.id + ')' : 'not locked' %></td>
 				<td>
-					<a class="btn btn-<%= file.lockedBy ? 'danger' : 'primary' %>"
-						href="javascript:///">
-						<%= file.lockedBy ? 'Unlock' : 'Lock' %>
+					<a class="btn btn-primary js-lock"
+						href="javascript:///"
+						data-file="<%= file.file %>"
+						style="<%= file.lockedBy ? 'display: none;' : '' %>"
+					>
+						Lock
+					</a>
+					<a class="btn btn-danger js-unlock"
+						href="javascript:///"
+						data-file="<%= file.file %>"
+						style="<%= file.lockedBy ? '' : 'display: none;' %>"
+					>
+						Unlock
 					</a>
 				</td>
 			</tr>
 		<% }); %>
 
 		</table>
+
+		<div>
+			<a class="btn btn-secondary js-refresh" href="javascript:///">
+				Refresh
+			</a>
+		</div>
 		`)
 };