From 925bd31595b37535cffcfcd47382e6513cf559b5 Mon Sep 17 00:00:00 2001
From: ABelliqueux <contact@arthus.net>
Date: Thu, 1 Dec 2022 17:30:03 +0100
Subject: [PATCH] webgui JS l10n

---
 app.py              |  5 +++--
 changelog_todo.md   |  4 ++--
 static/script.js    | 30 +++++++++++++++++++++++-------
 templates/main.html | 10 ++++------
 4 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/app.py b/app.py
index 6c71b9f..f1c9109 100755
--- a/app.py
+++ b/app.py
@@ -18,10 +18,11 @@ from waitress import serve
 
 
 # l10n
-LOCALE = os.getenv('LANG', 'en')
+LOCALE = os.getenv('LANG', 'en_EN')
 _ = gettext.translation('template', localedir='locales', languages=[LOCALE]).gettext
 
-gui_l10n = {"str_pilpil_title": _("Pilpil-server"),
+gui_l10n = {"locale" : LOCALE[:2], 
+            "str_pilpil_title": _("Pilpil-server"),
             "str_filename": _("Media Files"),
             "str_scan": _("Scan"),
             "str_previous": _("Previous"),
diff --git a/changelog_todo.md b/changelog_todo.md
index 1f55e92..720e7a9 100644
--- a/changelog_todo.md
+++ b/changelog_todo.md
@@ -70,10 +70,11 @@ sha256 : 401359a84c6d60902c05602bd52fae70f0b2ecac36d550b52d14e1e3230854a6
   
 
 # DOING NEXT :
+  * webgui: remove file from timeline (drag&drop to bin?)
  
 #  DONE :
 
-  * webgui: l10n
+  * webgui: l10n html + js
   * webgui: Add remote file enqueuing
   * webgui: Fix timeline UI
   * webgui: Add video thumbnails to timeline UI
@@ -85,7 +86,6 @@ sha256 : 401359a84c6d60902c05602bd52fae70f0b2ecac36d550b52d14e1e3230854a6
 # TODO :
  * webgui: remove file from timeline (drag&drop to bin?)
  * webgui: file sync UI freeze/status/progress bar
- * webgui : js l10n
  * ~ Test with several rpis
  * ? Scripts hotspot linux : nmcli 
                      win   : https://github.com/JamesCullum/Windows-Hotspot
diff --git a/static/script.js b/static/script.js
index 0026933..49af738 100644
--- a/static/script.js
+++ b/static/script.js
@@ -3,18 +3,35 @@ const DEBUG = 0;
 const CMD_PORT = "8888";
 const TIMELINE_COLOR_CURSOR = "#FF8839";
 const TIMELINE_COLOR_BG = "#2EB8E600";
+const DEFAULT_LOCALE = "en"
+// t9n
+let t9n =
+{   fr : {
+	statusDefault : "Recherche des clients connectés...",
+	confirmMessage : "Êtes vous certain de vouloir effectuer cette action ?",
+	filename : "Nom",
+	duration : "Durée",
+	sync : "Transfert des fichiers..." 
+    },
+    en : {
+	statusDefault : "Searching network for live hosts...",
+	confirmMessage : "Are you sure?",
+	filename : "Filename",
+	duration : "Duration",
+	sync : "Syncing files..."
+    }
+}
 // Timeline drag and drop elements default attributes
 const tl_cont_attr = {id:"tl_cont", ondrop: "drop(event, this)", ondragover:"allow_drop(event)"};
 const tl_drag_attr = {id:"tl_drag", draggable:"true", ondragstart:"drag(event, this)"};
 //  Global object
 window.currentUser = {
   scan_interval : 3000,
-  status_all :  "Searching network for live hosts...",
+  status_all :  t9n[LOCALE].statusDefault,
   medias_status : {},
   freeze_timeline_update : 0,
 };
 
-
 function sleep(ms) {
     let delay = new Promise(function(resolve) {
 	setTimeout(resolve, ms);
@@ -291,8 +308,8 @@ function update_local_filelist(infos_array) {
     // TODO : Get real media length
     let html_table  = "<table>" + 
 		       "<tr>" + 
-			    "<th>Filename</th>" + 
-			    "<th>Duration</th>" + 
+			    "<th>" + t9n[LOCALE].filename + "</th>" + 
+			    "<th>" + t9n[LOCALE].duration + "</th>" + 
 		       "</tr>";
     infos_array.forEach(function(element){
 	html_table += "<tr>" + 
@@ -399,7 +416,6 @@ function scan_hosts() {
     setTimeout(scan_hosts, currentUser.scan_interval);
 };
 
-
 // UI 
 addEventListener("DOMContentLoaded", function() {
     adjust_timeline();
@@ -413,7 +429,7 @@ addEventListener("DOMContentLoaded", function() {
 	    
 	    if ( command.indexOf("/reboot" ) > -1  ||  command.indexOf("/poweroff") > -1 ) {
 		// TODO : l10n
-		if ( !confirm("Êtes vous certain de vouloir effectuer cette action ?") ) {
+		if ( !confirm(t9n[LOCALE].confirmMessage) ) {
 		    return 0;
 		}
 
@@ -438,7 +454,7 @@ addEventListener("DOMContentLoaded", function() {
 		request.onload = send_ajax_cmd(command);
 		
 	    } else if ( command == "/sync/all" ) {
-		currentUser.status_all = "Syncing files...";
+		currentUser.status_all = t9n[LOCALE].sync;
 		request.onload = send_ajax_cmd("/sync/status");
 		
 	    }
diff --git a/templates/main.html b/templates/main.html
index 468a943..dbfff10 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -1,12 +1,6 @@
 <!DOCTYPE html>
 <head>
    <title>RPi Web Server</title>
-<!--
-   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
--->
-<!--
-   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
--->
    <link rel="stylesheet"  type="text/css" href="{{url_for('static', filename='style.css')}}">
 </head>
 
@@ -86,5 +80,9 @@
 	</div>
    {% endfor %}
 </body>
+<script type="text/javascript">
+window.LOCALE = "{{gui_l10n['locale']}}";
+</script>
 <script type="text/javascript" src="{{url_for('static', filename='script.js')}}"></script>
+
 </html>