Browse Source

http: much simpler translation system using CSS selectors and strings

Use a string list for translation; replaces the inline text with a
selected string. This allows the translation to be disconnected from
the bulk of the page structure.

Add Swedish translation.
H. Peter Anvin 2 years ago
parent
commit
673f4da266

+ 1 - 1
esp32/max80/httpd.c

@@ -212,7 +212,7 @@ static esp_err_t httpd_send_plain(httpd_req_t *req,
 			closer, refresher);
     }
 
-    if (!*refresher)
+    if (*refresher)
 	free(refresher);
 
     if (!header)

BIN
esp32/output/max80.ino.bin


+ 0 - 0
esp32/www/com/Prisma-MAX.woff2 → esp32/www/Prisma-MAX.woff2


+ 10 - 21
esp32/www/en/config.html → esp32/www/config.html

@@ -1,28 +1,16 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" href="../com/max80.css" />
+    <link rel="stylesheet" href="max80.css" />
     <title>MAX80: Configuration</title>
-  <script src="../com/max80.js"></script>
-  <script>
-    function addextrainfo(event) {
-	var form = event.currentTarget;
-	var elem = form.elements;
-	var hosttime = elem["hosttime"];
-	var hostzone = elem["hostzone"];
-	
-	var now = new Date();
-	hosttime.value = now.valueOf();
-	hostzone.value = -60 * now.getTimezoneOffset();
-    }
-  </script>
+  <script src="max80.js"></script>
   </head>
   <body>
     <script>inc("head.html")</script>
-    <h1>Configuration</h1>
-    <form id="config" action="../sys/setconfig" enctype="text/plain"
+    <h1 class="config">Configuration</h1>
+    <form id="setconfig" action="sys/setconfig" enctype="text/plain"
 	  method="post" onsubmit="addextrainfo(event)">
-      <fieldset>
+      <fieldset class="network">
 	<legend>Network</legend>
 	<div>
 	  <label for="wifi.ssid">Network name (SSID):</label>
@@ -34,7 +22,7 @@
 	  <button type="button" class="show" onclick="showpwd('wifi.psk',this)"><span class="show">show</span><span class="hide">hide</span></button>
 	</div>
       </fieldset>
-      <fieldset>
+      <fieldset class="datetime">
 	<legend>Date and Time</legend>
 	<div>
 	  <label for="TZ">Timezone configuration:</label>
@@ -45,7 +33,7 @@
 	  <input type="checkbox" id="sntp.enabled" name="sntp.enabled" />
 	</div>
 	<div>
-	  <label for="sntp.enabled">NTP server:</label>
+	  <label for="sntp.server">NTP server:</label>
 	  <input type="text" id="sntp.server" name="sntp.server" />
 	</div>
 	<div>
@@ -53,8 +41,9 @@
 	  <input type="checkbox" id="ip4.dhcp.nosntp" name="ip4.dhcp.nosntp" />
 	</div>
       </fieldset>
-      <button type="submit" disabled>Update configuration</button>
+      <button class="submit" type="submit" disabled>Update configuration</button>
     </form>
-    <script>loadform('config','../sys/getconfig')</script>
+    <script>loadform('setconfig','sys/getconfig')</script>
+    <script>translate()</script>
   </body>
 </html>

+ 0 - 12
esp32/www/en/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <link rel="stylesheet" href="../com/max80.css" />
-    <title>MAX80</title>
-    <script src="../com/max80.js"></script>
-  </head>
-  <body>
-    <script>inc("head.html")</script>
-    <script>inc("showstatus.html")</script>
-  </body>
-</html>

+ 0 - 3
esp32/www/en/showstatus.html

@@ -1,3 +0,0 @@
-<h1>Status</h1>
-<p>(not implemented yet)</p>
-<script>loadstatus('../sys/getstatus')</script>

+ 0 - 12
esp32/www/en/status.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <link rel="stylesheet" href="../com/max80.css" />
-    <title>MAX80: Status</title>
-    <script src="../com/max80.js"></script>
-  </head>
-  <body>
-    <script>inc("head.html")</script>
-    <script>inc("showstatus.html")</script>
-  </body>
-</html>

+ 0 - 30
esp32/www/en/update.html

@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <link rel="stylesheet" href="../com/max80.css" />
-    <title>MAX80: Update</title>
-    <script src="../com/max80.js"></script>
-  </head>
-  <body>
-    <script>inc("head.html")</script>
-    <h1>Update</h1>
-    <form id="upload" action="../sys/fwupdate" enctype="multipart/form-data"
-	  method="post" onsubmit="uploadfile(event)">
-      <fieldset>
-	<legend>Firmware</legend>
-	<div>
-	  <label for="file">Select firmware file:</label>
-	  <input type="file" name="file" required
-		 onchange="enablebutton('upload.start',files.length == 1)" />
-	</div>
-	<div>
-	  <button id="upload.start" disabled>Update firmware</button>
-	</div>
-	<div>
-	  <progress value="0"></progress>
-	</div>
-	<pre class="result hide"></pre>
-      </fieldset>
-    </form>
-  </body>
-</html>

BIN
esp32/www/flag/en.png


BIN
esp32/www/flag/sv.png


+ 5 - 5
esp32/www/en/head.html → esp32/www/head.html

@@ -19,10 +19,10 @@
 </div>
 
 <nav class="navbar" role="navigation">
-  <a href="index.html" class="text">Status</a>
-  <a href="config.html" class="text">Configuration</a>
-  <a href="update.html" class="text">Update</a>
+  <a href="index.html" class="text status">Status</a>
+  <a href="config.html" class="text config">Configuration</a>
+  <a href="update.html" class="text update">Update</a>
   <span class="pad"></span>
-  <a href="../sys/lang?sv"><img type="image" src="../flag/sv.png" width="51" height="32" alt="Svenska" /></a>
-  <a href="../sys/lang?en"><img type="image" src="../flag/en.png" width="64" height="32" alt="English" /></a>
+  <a href="sys/setlang?sv"><img type="image" src="flag/sv.png" width="51" height="32" alt="Svenska" /></a>
+  <a href="sys/setlang?en"><img type="image" src="flag/en.png" width="64" height="32" alt="English" /></a>
 </nav>

+ 1 - 0
esp32/www/index.html

@@ -0,0 +1 @@
+status.html

+ 0 - 0
esp32/www/lang/en


+ 22 - 0
esp32/www/lang/sv

@@ -0,0 +1,22 @@
+.logo2=Peter &amp; Per
+button .show=Visa
+button .hide=Göm
+body .status=Status
+body .config=Konfiguration
+body .update=Uppdatera
+title.status=MAX80: Status
+title.config=MAX80: Konfiguration
+title.update=MAX80: Uppdatera
+.firmware legend=Mjukvara
+"label[for='file']"=Välj <code class="file">.fw</code>-fil:
+.firmware .submit=Uppdatera mjukvara
+.network legend=Nätverk
+"label[for='wifi.ssid']"=Nätverksnamn (SSID):
+"label[for='wifi.psk']"=Lösenord (PSK):
+.datetime legend=Datum och tid
+"label[for='TZ']"=Tidszonsbeskrivning (POSIX):
+"label[for='sntp.enabled']"=Synkronisera tid från nätet (NTP)
+"label[for='sntp.server']"=NTP-server:
+"label[for='ip4.dhcp.nosntp']"=Använd ej NTP-server från DHCP:
+#setconfig .submit=Uppdatera konfiguration
+.notyet=(jobbar på det)

+ 0 - 0
esp32/www/com/max80.css → esp32/www/max80.css


+ 12 - 11
esp32/www/com/max80.js → esp32/www/max80.js

@@ -5,9 +5,7 @@ function getelem(id) {
 
 // Read a key=value text file and return it as a Promise of a Map
 function fetchconfig(url) {
-    var xdr = new XMLHttpRequest();
-
-    return fetch(url, {cache: "no-store"})
+    return fetch(url, {redirect: "follow"})
 	.then(res => {
 	    if (!res.ok) {
 		throw new Error("HTTP error "+response.status);
@@ -87,17 +85,15 @@ function loadform(form, url) {
 function fillin(map,html)
 {
     for (const [key,val] of map) {
-	for (var e of document.querySelectorAll(key)) {
-	    if (html)
-		e.innerHTML = val;
-	    else
-		e.innerText = val;
-	}
+	try {
+	    for (var e of document.querySelectorAll(key))
+		if (html) e.innerHTML = val; else e.innerText = val;
+	} catch (error) { }
     }
 }
 
 // Load status or HTML data
-function load(url,html)
+function load(url,html = false)
 {
     fetchconfig(url)
 	.then(map => { fillin(map,html) })
@@ -167,7 +163,12 @@ function showpwd(id,me) {
 // including files with <script> tags.
 function inc(url) {
     var me = document.currentScript;
-    fetch(url)
+    fetch(url, {redirect: "follow"})
 	.then((response) => response.text())
 	.then((text) => { me.outerHTML = text; });
 }
+
+// Insert translations
+function translate() {
+    load('/sys/lang', true);
+}

+ 5 - 0
esp32/www/showstatus.html

@@ -0,0 +1,5 @@
+<h1 class="status">Status</h1>
+<p>
+  <img src="wip.png" width="72" height="64" alt="WIP" />
+  <span class="notyet">(not implemented yet)</span>
+</p>

+ 14 - 0
esp32/www/status.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="max80.css" />
+    <title class="status">MAX80</title>
+    <script src="max80.js"></script>
+  </head>
+  <body>
+    <script>inc("head.html")</script>
+    <script>inc("showstatus.html")</script>
+    <script>loadstatus('sys/getstatus')</script>
+    <script>translate()</script>
+  </body>
+</html>

+ 31 - 0
esp32/www/update.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="max80.css" />
+    <title class="update">MAX80: Update</title>
+    <script src="max80.js"></script>
+  </head>
+  <body>
+    <script>inc("head.html")</script>
+    <h1 class="update">Update</h1>
+    <form id="upload" action="sys/fwupdate" enctype="multipart/form-data"
+	  method="post" onsubmit="uploadfile(event)">
+      <fieldset class="firmware">
+	<legend>Firmware</legend>
+	<div>
+	  <label for="file">Select firmware file:</label>
+	  <input type="file" name="file" required
+		 onchange="enablebutton('upload.start',files.length==1)" />
+	</div>
+	<div>
+	  <button class="submit" type="submit" id="upload.start" disabled>Update firmware</button>
+	</div>
+	<div>
+	  <progress value="0"></progress>
+	</div>
+	<pre class="result hide"></pre>
+      </fieldset>
+    </form>
+    <script>translate()</script>
+  </body>
+</html>

BIN
esp32/www/wip.png


BIN
fpga/output/v1.fw


BIN
fpga/output/v2.fw