From a6d8c1a5d7e864f9ae484fc82cf7a6622209635b Mon Sep 17 00:00:00 2001
From: Kubat <mael.martin31@gmail.com>
Date: Fri, 12 Feb 2021 20:27:42 +0100
Subject: [PATCH] Reduce HTML length with more re-usable templates
---
instance/index.ejs | 2 +-
instance/views/settings.ejs | 67 ++++-------------------------
instance/views/settingsCheckBox.ejs | 11 +++++
instance/views/settingsInput.ejs | 8 ++++
4 files changed, 28 insertions(+), 60 deletions(-)
create mode 100644 instance/views/settingsCheckBox.ejs
create mode 100644 instance/views/settingsInput.ejs
diff --git a/instance/index.ejs b/instance/index.ejs
index 6b24ab7..dde4e7f 100644
--- a/instance/index.ejs
+++ b/instance/index.ejs
@@ -4,7 +4,7 @@
<html>
<head>
<meta charset="UTF-8" />
- <title>Amadeus</title>
+ <title><%= app %></title>
<script>
window.$ = window.jQuery = require('../style/jquery/jquery-3.5.1.js');
</script>
diff --git a/instance/views/settings.ejs b/instance/views/settings.ejs
index 45d8f40..a6695c5 100644
--- a/instance/views/settings.ejs
+++ b/instance/views/settings.ejs
@@ -13,81 +13,30 @@
<form>
<h3>Running processes</h3>
<p>Here is a list of related processes that may run. The box is checked when the process is running.</p>
- <div class="form-group row">
- <div class="col-sm-2">Lektord</div>
- <div class="col-sm-10">
- <div class="form-check">
- <input class="form-check-input" type="checkbox" id="running-lektord" disabled />
- <label class="form-check-label" for="running-lektord"></label>
- </div>
- </div>
- </div>
- <div class="form-group row">
- <div class="col-sm-2">Klkt</div>
- <div class="col-sm-10">
- <div class="form-check">
- <input class="form-check-input" type="checkbox" id="running-klkt" disabled />
- <label class="form-check-label" for="running-klkt"></label>
- </div>
- </div>
- </div>
+ <%- include('settingsCheckBox.ejs', {id: 'running-lektord', name: 'Lektord', disable: true}); %>
+ <%- include('settingsCheckBox.ejs', {id: 'running-klkt', name: 'Klkt', disable: true}); %>
<hr />
<h3>Lektord settings</h3>
<p>Configure which lektord to use or if 'attach' mode is enabled.</p>
- <div class="form-group row">
- <label for="inputHost" class="col-sm-2 col-form-label">Host</label>
- <div class="col-sm-10">
- <input type="text" class="form-control" id="inputHost" placeholder="Host..." />
- </div>
- </div>
- <div class="form-group row">
- <label for="inputPort" class="col-sm-2 col-form-label">Port</label>
- <div class="col-sm-10">
- <input type="int" class="form-control" id="inputPort" placeholder="6600" />
- </div>
- </div>
- <div class="form-group row">
- <div class="col-sm-2">Attach mode</div>
- <div class="col-sm-10">
- <div class="form-check">
- <input class="form-check-input" type="checkbox" id="inputAttachMode" />
- <label class="form-check-label" for="inputAttachMode">
- Enable attach mode
- </label>
- </div>
- </div>
- </div>
+ <%- include('settingsInput.ejs', {id: 'inputHost', name: 'Host', type: 'text'}); %>
+ <%- include('settingsInput.ejs', {id: 'inputPort', name: 'Port', type: 'int'}); %>
+ <%- include('settingsCheckBox.ejs', {id: 'inputAttachMode', name: 'Attach mode', label: 'Enable attach mode'}); %>
<hr />
<h3>Client interface settings</h3>
<p>Express server settings for the client interface.</p>
- <div class="form-group row">
- <label for="inputClientPort" class="col-sm-2 col-form-label">Port</label>
- <div class="col-sm-10">
- <input type="int" class="form-control" id="inputClientPort" placeholder="3000" />
- </div>
- </div>
+ <%- include('settingsInput.ejs', {id: 'inputClientPort', name: 'Port', type: 'int'}); %>
<hr />
<h3>Database settings</h3>
<p>Which database to use, and other options.</p>
- <div class="form-group row">
- <label for="inputDbPath" class="col-sm-2 col-form-label">Host</label>
- <div class="col-sm-10">
- <input type="text" class="form-control" id="inputDbPath" placeholder="kara.db..." />
- </div>
- </div>
+ <%- include('settingsInput.ejs', {id: 'inputDbPath', name: 'Database', type: 'text'}); %>
<hr />
<h3>Kurisu settings</h3>
<p>Where to find Kurisu.</p>
- <div class="form-group row">
- <label for="inputKurisuUrl" class="col-sm-2 col-form-label">URL</label>
- <div class="col-sm-10">
- <input type="text" class="form-control" id="inputKurisuUrl" placeholder="https://kurisu.iiens.net/..." />
- </div>
- </div>
+ <%- include('settingsInput.ejs', {id: 'inputKurisuUrl', name: 'URL', type: 'text'}); %>
<hr />
<h3>Log settings</h3>
diff --git a/instance/views/settingsCheckBox.ejs b/instance/views/settingsCheckBox.ejs
new file mode 100644
index 0000000..19c871d
--- /dev/null
+++ b/instance/views/settingsCheckBox.ejs
@@ -0,0 +1,11 @@
+<%# vim: ts=4 syntax=html
+ The template for a checkbox setting %>
+<div class="form-group row">
+ <div class="col-sm-2"><%= name %></div>
+ <div class="col-sm-10">
+ <div class="form-check">
+ <input class="form-check-input" type="checkbox" id="<%= id %>" <% if (typeof disable != 'undefined') { %> onclick="return false;" <% } %>/>
+ <label class="form-check-label" for="<%= id %>"><% if (typeof label != 'undefined') { %> <%= label %> <% } %></label>
+ </div>
+ </div>
+</div>
diff --git a/instance/views/settingsInput.ejs b/instance/views/settingsInput.ejs
new file mode 100644
index 0000000..390aac1
--- /dev/null
+++ b/instance/views/settingsInput.ejs
@@ -0,0 +1,8 @@
+<%# vim: ts=4 syntax=html
+ The template for a text/int field setting %>
+<div class="form-group row">
+ <label for="<%= id %>" class="col-sm-2 col-form-label"><%= name %></label>
+ <div class="col-sm-10">
+ <input type="<%= type %>" class="form-control" id="<%= id %>" placeholder="<%= name %>..." />
+ </div>
+</div>
--
GitLab