FE+BE: BACKEND_API_URL for reverse proxies #1390

Signed-off-by: jokob-sk <jokob.sk@gmail.com>

Author: jokob-sk

front/deviceDetails.php

@@ -416,12 +416,9 @@ function initializeTabs () {
         showSpinner();
 
         // Get data from the server
-        const protocol = window.location.protocol.replace(':', '');
-        const host = window.location.hostname;
         const apiToken = getSetting("API_TOKEN");
-        const port = getSetting("GRAPHQL_PORT"); // same port your Flask app runs on
 
-        const apiBase = `${protocol}://${host}:${port}`;
+        const apiBase = getApiBase();
         const url = `${apiBase}/device/${getMac()}?period=${encodeURIComponent(period)}`;
 
         const response = await fetch(url, {

front/deviceDetailsEdit.php

@@ -43,13 +43,10 @@ function getDeviceData() {
   mac = getMac()
 
   console.log(mac);
-
-  const protocol = window.location.protocol.replace(':', '');
-  const host = window.location.hostname;
   const apiToken = getSetting("API_TOKEN");
-  const port = getSetting("GRAPHQL_PORT");
+  let period = $("#period").val()
 
-  const apiBase = `${protocol}://${host}:${port}`;
+  const apiBase = getApiBase();
   const url = `${apiBase}/device/${mac}?period=${encodeURIComponent(period)}`;
 
   // get data from server

front/deviceDetailsEvents.php

@@ -48,12 +48,9 @@ function loadEventsData() {
       )
   `;
 
-  const protocol = window.location.protocol.replace(':', '');
-  const host = window.location.hostname;
-  const port = getSetting("GRAPHQL_PORT");
   const apiToken = getSetting("API_TOKEN");
 
-  const apiBase = `${protocol}://${host}:${port}`;
+  const apiBase = getApiBase();
   const url = `${apiBase}/dbquery/read`;
 
   $.ajax({

front/deviceDetailsPresence.php

@@ -36,12 +36,9 @@
   // ---------------------------------------
   // query data
   function loadPresenceData() {
-    const protocol = window.location.protocol.replace(":", "");
-    const host = window.location.hostname;
-    const port = getSetting("GRAPHQL_PORT");
     const apiToken = getSetting("API_TOKEN");
 
-    const apiBase = `${protocol}://${host}:${port}`;
+    const apiBase = getApiBase();
     const url = `${apiBase}/sessions/calendar`;
 
     $('#calendar').fullCalendar('removeEventSources');

front/deviceDetailsSessions.php

@@ -103,12 +103,9 @@ function loadSessionsData() {
   showSpinner();
 
   // Build API base
-  const protocol = window.location.protocol.replace(':', '');
-  const host = window.location.hostname;
-  const port = getSetting("GRAPHQL_PORT"); // or whatever port your Flask API runs on
   const apiToken = getSetting("API_TOKEN");
 
-  const apiBase = `${protocol}://${host}:${port}`;
+  const apiBase = getApiBase();
   const url = `${apiBase}/sessions/${getMac()}?period=${encodeURIComponent(period)}`;
 
   // Call API with Authorization header

front/js/api.js

@@ -0,0 +1,15 @@
+function getApiBase()
+{
+    apiBase = getSetting("BACKEND_API_URL");
+
+    if(apiBase == "")
+    {
+        const protocol = window.location.protocol.replace(':', '');
+        const host = window.location.hostname;
+        const port = getSetting("GRAPHQL_PORT");
+
+        apiBase = `${protocol}://${host}:${port}`;
+    }
+
+    return apiBase;
+}

front/php/templates/header.php

@@ -44,6 +44,7 @@
   <script src="lib/datatables.net/js/dataTables.select.min.js"></script>
 
   <script src="js/common.js?v=<?php include 'php/templates/version.php'; ?>"></script>
+  <script src="js/api.js?v=<?php include 'php/templates/version.php'; ?>"></script>
   <script src="js/modal.js?v=<?php include 'php/templates/version.php'; ?>"></script>
   <script src="js/tests.js?v=<?php include 'php/templates/version.php'; ?>"></script>
   <script src="js/db_methods.js?v=<?php include 'php/templates/version.php'; ?>"></script>

front/php/templates/language/ar_ar.json

@@ -27,6 +27,8 @@
     "AppEvents_ObjectType": "Object Type",
     "AppEvents_Plugin": "المكونات الإضافية",
     "AppEvents_Type": "النوع",
+    "BACKEND_API_URL_description": "",
+    "BACKEND_API_URL_name": "",
     "BackDevDetail_Actions_Ask_Run": "هل تريد تنفيذ هذا الإجراء؟",
     "BackDevDetail_Actions_Not_Registered": "لم يتم تسجيل الإجراء: ",
     "BackDevDetail_Actions_Title_Run": "تنفيذ الإجراء",

front/php/templates/language/ca_ca.json

@@ -27,6 +27,8 @@
     "AppEvents_ObjectType": "Tipus d'objecte",
     "AppEvents_Plugin": "Plugin",
     "AppEvents_Type": "Tipus",
+    "BACKEND_API_URL_description": "",
+    "BACKEND_API_URL_name": "",
     "BackDevDetail_Actions_Ask_Run": "Vol executar aquesta comanda?",
     "BackDevDetail_Actions_Not_Registered": "Comanda no registrada: ",
     "BackDevDetail_Actions_Title_Run": "Executar la comanda",
@@ -763,4 +765,4 @@
     "settings_system_label": "Sistema",
     "settings_update_item_warning": "Actualitza el valor sota. Sigues curós de seguir el format anterior. <b>No hi ha validació.</b>",
     "test_event_tooltip": "Deseu els canvis primer abans de comprovar la configuració."
-}
+}

front/php/templates/language/cs_cz.json

@@ -27,6 +27,8 @@
     "AppEvents_ObjectType": "",
     "AppEvents_Plugin": "Zásuvný modul",
     "AppEvents_Type": "Typ",
+    "BACKEND_API_URL_description": "",
+    "BACKEND_API_URL_name": "",
     "BackDevDetail_Actions_Ask_Run": "",
     "BackDevDetail_Actions_Not_Registered": "",
     "BackDevDetail_Actions_Title_Run": "Spustit akci",