@saltcorn/mobile-app 0.8.6-beta.9 → 0.8.7-beta.0

package/config.xml

@@ -3,6 +3,7 @@
   <name>SaltcornMobileApp</name>
   <description>Apache Cordova application with @saltcorn/markup</description>
   <platform name="android">
+    <icon density="ldpi" foreground="res/icon/android/icon.png" background="res/icon/android/icon.png" />
     <edit-config file="app/src/main/AndroidManifest.xml" target="/manifest/application" mode="merge">
       <application android:usesCleartextTraffic="true"/>
     </edit-config>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saltcorn/mobile-app",
   "displayName": "Saltcorn mobile app",
-  "version": "0.8.6-beta.9",
+  "version": "0.8.7-beta.0",
   "description": "Apache Cordova application with @saltcorn/markup",
   "main": "index.js",
   "scripts": {

package/www/index.html

@@ -179,6 +179,7 @@
 
       // the app comes back from background
       const onResume = async () => {
+        if (typeof saltcorn === "undefined") return;
         const state = saltcorn.data.state.getState();
         const mobileConfig = state.mobileConfig;
         if (mobileConfig?.allowOfflineMode) {
@@ -367,6 +368,7 @@
         overflow: hidden;
         z-index: 999999;
       "
+      src="splash_page.html"
     >
       <p>Your browser does not support iframes.</p>
     </iframe>

package/www/js/routes/common.js

@@ -131,7 +131,8 @@ const wrapContents = (contents, title, context, req) => {
         role: state.mobileConfig.role_id,
         menu: getMenu(req),
         headers: getHeaders(),
-        brand: { name: "Saltcorn" },
+        // TODO logo as BASE 64 image
+        brand: { name: state.getConfig("site_name") || "Saltcorn" },
         bodyClass: "",
         currentUrl: "",
       })

package/www/js/utils/file_helpers.js

@@ -47,6 +47,30 @@ async function readJSON(fileName, dirName) {
   });
 }
 
+async function readBinary(fileName, dirName) {
+  const dirEntry = await getDirEntry(dirName);
+  return new Promise((resolve, reject) => {
+    dirEntry.getFile(
+      fileName,
+      { create: false, exclusive: false },
+      function (fileEntry) {
+        fileEntry.file(function (file) {
+          let reader = new FileReader();
+          reader.onloadend = function (e) {
+            resolve(this.result);
+          };
+          reader.readAsArrayBuffer(file);
+        });
+      },
+      function (err) {
+        console.log(`unable to read  ${fileName}`);
+        console.log(err);
+        reject(err);
+      }
+    );
+  });
+}
+
 async function write(fileName, dirName, content) {
   const dirEntry = await getDirEntry(dirName);
   return new Promise((resolve, reject) => {

package/www/js/utils/global_utils.js

@@ -1,4 +1,4 @@
-/*global window, offlineHelper, axios, write, cordova, router, getDirEntry, saltcorn, document, FileReader, navigator*/
+/*global window, offlineHelper, axios, write, cordova, router, getDirEntry, saltcorn, document, FileReader, navigator, splashConfig*/
 
 let routingHistory = [];
 
@@ -25,7 +25,10 @@ function popRoute() {
 }
 
 async function apiCall({ method, path, params, body, responseType, timeout }) {
-  const config = saltcorn.data.state.getState().mobileConfig;
+  const config =
+    typeof saltcorn !== "undefined"
+      ? saltcorn.data.state.getState().mobileConfig
+      : splashConfig;
   const serverPath = config.server_path;
   const url = `${serverPath}${path}`;
   const headers = {
@@ -60,12 +63,17 @@ function clearAlerts() {
 }
 
 function showAlerts(alerts) {
-  const iframe = document.getElementById("content-iframe");
-  const alertsArea =
-    iframe.contentWindow.document.getElementById("alerts-area");
-  alertsArea.innerHTML = "";
-  for (const { type, msg } of alerts) {
-    alertsArea.innerHTML += saltcorn.markup.alert(type, msg);
+  if (typeof saltcorn === "undefined") {
+    console.log("Not yet initalized.");
+    console.log(alerts);
+  } else {
+    const iframe = document.getElementById("content-iframe");
+    const alertsArea =
+      iframe.contentWindow.document.getElementById("alerts-area");
+    alertsArea.innerHTML = "";
+    for (const { type, msg } of alerts) {
+      alertsArea.innerHTML += saltcorn.markup.alert(type, msg);
+    }
   }
 }
 
@@ -194,9 +202,10 @@ async function handleRoute(route, query, files) {
       await gotoEntryView();
     } else {
       if (route === "/") return await gotoEntryView();
-      addRoute({ route, query });
+      const safeRoute = route ? route : currentLocation();
+      addRoute({ route: safeRoute, query });
       const page = await router.resolve({
-        pathname: route,
+        pathname: safeRoute,
         query: query,
         files: files,
         alerts: mobileConfig.isOfflineMode

package/www/js/utils/iframe_view_utils.js

@@ -35,13 +35,26 @@ async function execNavbarLink(url) {
  * @param {*} urlSuffix
  * @returns
  */
-async function formSubmit(e, urlSuffix, viewname) {
-  e.submit();
+async function formSubmit(e, urlSuffix, viewname, noSubmitCb) {
+  if (!noSubmitCb) e.submit();
   const files = {};
   const urlParams = new URLSearchParams();
   for (const entry of new FormData(e).entries()) {
     if (entry[1] instanceof File) files[entry[0]] = entry[1];
-    else urlParams.append(entry[0], entry[1]);
+    else {
+      // is there a hidden input with a filename?
+      const domEl = $(e).find(
+        `[name='${entry[0]}'][mobile-camera-input='true']`
+      );
+      if (domEl.length > 0) {
+        const tokens = entry[1].split("/");
+        const fileName = tokens[tokens.length - 1];
+        const directory = tokens.splice(0, tokens.length - 1).join("/");
+        // read and add file to submit
+        const binary = await parent.readBinary(fileName, directory);
+        files[entry[0]] = new File([binary], fileName);
+      } else urlParams.append(entry[0], entry[1]);
+    }
   }
   const queryStr = urlParams.toString();
   await parent.handleRoute(`post${urlSuffix}${viewname}`, queryStr, files);
@@ -771,6 +784,48 @@ function removeLoadSpinner() {
   $("#scspinner").remove();
 }
 
+/**
+ * is called when an input with capture=camera is used
+ * It takes a picture with the camera plugin, saves the file, and adds the filename as a hidden input.
+ * @param {*} fieldName
+ */
+async function getPicture(fieldName) {
+  const cameraOptions = {
+    quality: 50,
+    encodingType: parent.Camera.EncodingType.JPEG,
+    destinationType: parent.Camera.DestinationType.FILE_URI,
+  };
+  const getPictureWithPromise = () => {
+    return new Promise((resolve, reject) => {
+      parent.navigator.camera.getPicture(
+        (imageDate) => {
+          return resolve(imageDate);
+        },
+        (message) => {
+          return reject(message);
+        },
+        cameraOptions
+      );
+    });
+  };
+  try {
+    const form = $(`#cptbtn${fieldName}`).closest("form");
+    const onsubmit = form.attr("onsubmit");
+    form.attr("onsubmit", "javascript:void(0)");
+    const fileURI = await getPictureWithPromise();
+    form.attr("onsubmit", onsubmit);
+    const inputId = `input${fieldName}`;
+    form.find(`#${inputId}`).remove();
+    form.append(
+      `<input class="d-none" id="${inputId}" name="${fieldName}" value="${fileURI}" mobile-camera-input="true" />`
+    );
+    const tokens = fileURI.split("/");
+    $(`#cpt-file-name-${fieldName}`).text(tokens[tokens.length - 1]);
+  } catch (error) {
+    parent.errorAlert(error);
+  }
+}
+
 function reload_on_init() {
   console.log("not yet supported");
 }

package/www/js/utils/table_utils.js

@@ -34,7 +34,10 @@ async function updateScTables(tablesJSON, skipScPlugins = true) {
       // pick fields that really exist
       const insertRow = {};
       for (const safeField of existingFields) {
-        if (row[safeField]) insertRow[safeField] = row[safeField];
+        const fromRow = row[safeField];
+        if (fromRow !== null && fromRow !== undefined) {
+          insertRow[safeField] = fromRow;
+        }
       }
       await saltcorn.data.db.insert(table, insertRow);
     }
@@ -67,7 +70,7 @@ async function updateUserDefinedTables() {
     const existingFields = (
       await saltcorn.data.db.query(`PRAGMA table_info('${sanitized}')`)
     ).rows.map((row) => row.name);
-    for (const field of await table.getFields()) {
+    for (const field of table.getFields()) {
       if (
         existingFields.indexOf(saltcorn.data.db.sqlsanitize(field.name)) < 0
       ) {

package/www/splash_page.html

@@ -0,0 +1,3 @@
+<html>
+  <body></body>
+</html>