Add language settings in UI

This commit is contained in:
2022-05-12 21:01:49 +02:00
parent c201d6b2e1
commit f3bcf63860
12 changed files with 191 additions and 32 deletions

View File

@ -81,24 +81,37 @@
</div>
</div>
<pages class="d-flex flex-fill" id="pageCont" class="z-index: 50;">
<page id="homeP" class="pageC flex-fill overflow-auto">
<div class="container" >
<div class="" style=" display: flex;align-items: center;justify-content: center; flex-wrap: wrap; flex-direction: column;">
<h1>Oh no!</h1>
<h1>
<i class="bi bi-translate"></i>
</h1>
<h5>
There is a critical error with the current language template. Please select a diffrent language.
</h5>
<div class="container">
<div class=""
style=" display: flex;align-items: center;justify-content: center; flex-wrap: wrap; flex-direction: column;">
<h1>Oh no!</h1>
<h1>
<i class="bi bi-translate"></i>
</h1>
<h5>
There is a critical error with the current language template. Please select a diffrent
language.
</h5>
<label for="lang">Please choose a language: </label>
<select name="lang" id="lang">
<% it.additional.languages.forEach(function(lang){ %>
<option value="<%= lang %>">
<%= lang %>
</option>
<% }) %>
</select>
<button id="applyLang" class="btn btn-outline-success">
Apply & Reload
</button>
</div>
</div>
</page>
</pages>
</main>
@ -112,7 +125,20 @@
});
$(function () {
$('[data-toggle="tooltip"]').tooltip({ container: "body" })
})
})
$("#applyLang").on("click", function (event) {
const lang = $("#lang").val()
saveOption("/api/ui/v1/lang/set?lang=" + lang, function handleLangSelect(event, xmlHttp) {
const temp = JSON.parse(xmlHttp.responseText)
if (temp.status == "error") {
alert("Request failed reason: " + temp.reason)
} else {
location.reload()
}
console.log(JSON.parse(xmlHttp.responseText))
})
})
</script>
</body>

View File

@ -137,7 +137,7 @@
</div>
<div class="col">
<h3><%= it.lang.titles.mode %> <span class="helperTip" data-placement="right"
title=<%= it.lang.hints.selectMode %> data-toggle="tooltip">
title="<%= it.lang.hints.selectMode %>" data-toggle="tooltip">
<i class="bi bi-question-circle-fill"></i>
</span></h3>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
@ -311,8 +311,21 @@
<button type="button" class="btn btn-outline-success" id="saveLayout"><i class="bi bi-save"></i> Save as
startup settings (Layout
only)</button>
<hr>
<h2><%= it.lang.titles.uiSettings %></h2>
<label for="lang"><%= it.lang.labels.language %>:</label>
<select name="lang" id="lang">-
<% it.additional.languages.forEach(function(lang){ %>
<option value="<%= lang %>"><%= lang %></option>
<% }) %>
</select>
<button id="applyLang" class="btn btn-outline-success">
<%= it.lang.labels.apply %>
</button>
</page>
<page id="debug" class="pageC hidden flex-fill overflow-auto">
<h1>Debug page</h1>
<div class="alert alert-danger" role="alert">
@ -343,7 +356,7 @@
<templateObj>
<table class="table table-bordered table-responsive-md table-striped text-center" id="colors1">
<thead>
<tr>
<tr><%= it.lang.labels.time %>
<th class="text-center"><%= it.lang.labels.time %></th>
<th class="text-center"><%= it.lang.labels.color %></th>
<th class="text-center"><%= it.lang.labels.remove %></th>
@ -370,9 +383,6 @@
</tr>
</tbody>
</table>
<tr>
<td class="pt-3-half numVal" contenteditable="true">#VALUE#</td>
<td class="pt-3-half full" contenteditable="false">