@saltcorn/mobile-app 0.8.6-beta.1 → 0.8.6-beta.3

package/package.json

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

package/www/index.html

@@ -10,6 +10,7 @@
     <script src="js/utils/iframe_view_utils.js"></script>
     <script src="js/utils/file_helpers.js"></script>
     <script src="js/utils/table_utils.js"></script>
+    <script src="js/utils/offline_mode_helper.js"></script>
 
     <script src="js/mocks/request.js"></script>
     <script src="js/mocks/response.js"></script>
@@ -20,6 +21,7 @@
     <script src="js/routes/error.js"></script>
     <script src="js/routes/page.js"></script>
     <script src="js/routes/view.js"></script>
+    <script src="js/routes/sync.js"></script>
     <script src="js/routes/init.js"></script>
 
     <script src="js/mocks/response.js"></script>
@@ -124,7 +126,7 @@
                 config.pluginHeaders.push(prepareHeader(header));
               }
             else if (typeof pluginHeaders === "function") {
-              const headerResult = pluginHeaders(row.configuration);
+              const headerResult = pluginHeaders(row.configuration || {});
               if (Array.isArray(headerResult)) {
                 for (const header of headerResult)
                   config.pluginHeaders.push(prepareHeader(header));
@@ -146,29 +148,15 @@
       const initJwt = async () => {
         if (!(await saltcorn.data.db.tableExists("jwt_table"))) {
           await createJwtTable();
-        }
-        else {
+        } else {
           const jwt = await getJwt();
-          if(jwt) {
+          if (jwt) {
             const state = saltcorn.data.state.getState();
             state.mobileConfig.jwt = jwt;
           }
         }
       };
 
-      const checkJWT = async () => {
-        const state = saltcorn.data.state.getState();
-        const jwt = state.mobileConfig.jwt;
-        if(jwt && jwt !== "undefined") {
-          const response = await apiCall({
-            method: "GET",
-            path: "/auth/authenticated",
-          });
-          return response.data.authenticated;
-        }
-        else return false;
-      };
-
       const initI18Next = async () => {
         const resources = {};
         for (const key of Object.keys(
@@ -188,8 +176,38 @@
         });
       };
 
+      const tryDownloadServerData = async (alerts) => {
+        try {
+          await offlineHelper.downloadServerData();
+        } catch (error) {
+          alerts.push({
+            type: "warning",
+            msg: `Unable to download the server data: ${
+              error.message ? error.message : "unknown error"
+            }`,
+          });
+        }
+      };
+
+      // the app comes back from background
+      const onResume = async () => {
+        const state = saltcorn.data.state.getState();
+        const mobileConfig = state.mobileConfig;
+        if (mobileConfig.allowOfflineMode) {
+          mobileConfig.networkState = navigator.connection.type;
+          if (
+            mobileConfig.networkState === "none" &&
+            !mobileConfig.isOfflineMode
+          ) {
+            // starts the offline mode, if needed
+            await gotoEntryView();
+          }
+        }
+      };
+
       // device is ready
       const init = async () => {
+        document.addEventListener("resume", onResume, false);
         const config = await readJSON(
           "config",
           `${cordova.file.applicationDirectory}www`
@@ -227,28 +245,74 @@
         setVersionTtag();
         const entryPoint = config.entry_point;
         await initI18Next();
+        state.mobileConfig.networkState = navigator.connection.type;
+        document.addEventListener(
+          "offline",
+          offlineHelper.offlineCallback,
+          false
+        );
+        document.addEventListener(
+          "online",
+          offlineHelper.onlineCallback,
+          false
+        );
+        const networkDisabled = state.mobileConfig.networkState === "none";
+        const jwt = state.mobileConfig.jwt;
         try {
-          if (await checkJWT()) {
+          const alerts = [];
+          if ((networkDisabled && jwt) || (await checkJWT(jwt))) {
             const mobileConfig = state.mobileConfig;
             const decodedJwt = jwt_decode(mobileConfig.jwt);
             mobileConfig.role_id = decodedJwt.user.role_id
               ? decodedJwt.user.role_id
-              : 10;
+              : 100;
+            mobileConfig.user_id = decodedJwt.user.id;
             mobileConfig.user_name = decodedJwt.user.email;
             mobileConfig.language = decodedJwt.user.language;
             mobileConfig.isPublicUser = false;
             await i18next.changeLanguage(mobileConfig.language);
+            if (mobileConfig.allowOfflineMode) {
+              const userWithOfflineData = await offlineHelper.lastOfflineUser();
+              if (networkDisabled) {
+                if (
+                  userWithOfflineData &&
+                  userWithOfflineData !== mobileConfig.user_name
+                )
+                  throw new Error(
+                    `The offline mode is not available, '${userWithOfflineData}' has not yet uploaded offline data.`
+                  );
+                else {
+                  await offlineHelper.startOfflineMode();
+                  alerts.push({ type: "info", msg: "You are in offline mode" });
+                }
+              } else {
+                if (userWithOfflineData) {
+                  if (userWithOfflineData === mobileConfig.user_name)
+                    alerts.push({
+                      type: "info",
+                      msg: "You have offline data, open the Sync menu to handle it.",
+                    });
+                  else
+                    alerts.push({
+                      type: "warning",
+                      msg: `'${userWithOfflineData}' has not yet uploaded offline data.`,
+                    });
+                } else await tryDownloadServerData(alerts);
+              }
+            }
             addRoute({ route: entryPoint, query: undefined });
             const page = await router.resolve({
               pathname: entryPoint,
               fullWrap: true,
+              alerts,
             });
             await replaceIframe(page.content);
           } else {
             const page = await router.resolve({
               pathname: "get/auth/login",
+              alerts,
             });
-            replaceIframe(page.content);
+            await replaceIframe(page.content);
           }
         } catch (error) {
           const page = await router.resolve({
@@ -261,7 +325,6 @@
             ],
           });
           await replaceIframe(page.content);
-          console.error(error);
         }
       };
 

package/www/js/mocks/request.js

@@ -1,9 +1,13 @@
 /*global i18next, saltcorn*/
 
-function MobileRequest({ xhr = false, files = undefined, query = undefined }) {
-  const roleId = saltcorn.data.state.getState().mobileConfig.role_id
-    ? saltcorn.data.state.getState().mobileConfig.role_id
-    : 10;
+function MobileRequest({
+  xhr = false,
+  files = undefined,
+  query = undefined,
+} = {}) {
+  const cfg = saltcorn.data.state.getState().mobileConfig;
+  const roleId = cfg.role_id ? cfg.role_id : 100;
+  const userId = cfg.user_id ? cfg.user_id : undefined;
   const flashMessages = [];
 
   return {
@@ -21,6 +25,7 @@ function MobileRequest({ xhr = false, files = undefined, query = undefined }) {
       return mobileCfg?.language ? mobileCfg.language : "en";
     },
     user: {
+      id: userId,
       role_id: roleId,
     },
     flash: (type, msg) => {

package/www/js/routes/auth.js

@@ -1,4 +1,4 @@
-/*global sbAdmin2Layout, apiCall, removeJwt, saltcorn*/
+/*global sbAdmin2Layout, apiCall, removeJwt, saltcorn, clearHistory*/
 
 const prepareAuthForm = () => {
   return new saltcorn.data.models.Form({
@@ -35,7 +35,7 @@ const getAuthLinks = (current, entryPoint) => {
   return links;
 };
 
-const renderLoginView = (entryPoint, versionTag) => {
+const renderLoginView = (entryPoint, versionTag, alerts = []) => {
   const form = prepareAuthForm(entryPoint);
   form.onSubmit = `javascript:loginFormSubmit(this, '${entryPoint}')`;
   form.submitLabel = "Login";
@@ -43,7 +43,7 @@ const renderLoginView = (entryPoint, versionTag) => {
     title: "login",
     form: form,
     authLinks: getAuthLinks("login", entryPoint),
-    alerts: [],
+    alerts,
     headers: [
       { css: `static_assets/${versionTag}/saltcorn.css` },
       { script: "js/utils/iframe_view_utils.js" },
@@ -69,10 +69,14 @@ const renderSignupView = (entryPoint, versionTag) => {
   });
 };
 
-const getLoginView = async () => {
-  const config = saltcorn.data.state.getState().mobileConfig;
+const getLoginView = async (context) => {
+  const mobileConfig = saltcorn.data.state.getState().mobileConfig;
   return {
-    content: renderLoginView(config.entry_point, config.version_tag),
+    content: renderLoginView(
+      mobileConfig.entry_point,
+      mobileConfig.version_tag,
+      context.alerts ? context.alerts : []
+    ),
     replaceIframe: true,
   };
 };
@@ -90,6 +94,7 @@ const logoutAction = async () => {
   const response = await apiCall({ method: "GET", path: "/auth/logout" });
   if (response.data.success) {
     await removeJwt();
+    clearHistory();
     config.jwt = undefined;
     return {
       content: renderLoginView(config.entry_point, config.version_tag),

package/www/js/routes/common.js

@@ -34,8 +34,8 @@ const sbAdmin2Layout = () => {
 
 const getMenu = (req) => {
   const state = saltcorn.data.state.getState();
-  const mobileCfg = saltcorn.data.state.getState().mobileConfig;
-  const role = mobileCfg.role_id || 10;
+  const mobileCfg = state.mobileConfig;
+  const role = mobileCfg.role_id || 100;
   const extraMenu = saltcorn.data.web_mobile_commons.get_extra_menu(
     role,
     req.__
@@ -80,6 +80,17 @@ const getMenu = (req) => {
     isUser: true,
     items: authItems,
   });
+  if (mobileCfg.allowOfflineMode)
+    result.push({
+      section: "Sync",
+      items: [
+        {
+          link: "javascript:execLink('/sync/sync_settings')",
+          icon: "fas fa-sync",
+          label: "Sync",
+        },
+      ],
+    });
   return result;
 };
 

package/www/js/routes/delete.js

@@ -5,7 +5,8 @@ const deleteRows = async (context) => {
   const { name, id } = context.params;
   const table = await saltcorn.data.models.Table.findOne({ name });
   const mobileConfig = saltcorn.data.state.getState().mobileConfig;
-
+  if (mobileConfig.isOfflineMode)
+    throw new Error(i18next.t("Deletes are not supported in offline mode."));
   if (mobileConfig.localTableIds.indexOf(table.id) >= 0) {
     if (mobileConfig.role_id <= table.min_role_write) {
       await table.deleteRows({ id });

package/www/js/routes/edit.js

@@ -4,11 +4,15 @@
 const postToggleField = async (context) => {
   const { name, id, field_name } = context.params;
   const table = await saltcorn.data.models.Table.findOne({ name });
-  const mobileConfig = saltcorn.data.state.getState().mobileConfig;
-  if (mobileConfig.localTableIds.indexOf(table.id) >= 0) {
-    if (mobileConfig.role_id > table.min_role_write)
+  const state = saltcorn.data.state.getState();
+  const { isOfflineMode, localTableIds, user_name, role_id } =
+    state.mobileConfig;
+  if (isOfflineMode || localTableIds.indexOf(table.id) >= 0) {
+    if (role_id > table.min_role_write)
       throw new Error(i18next.t("Not authorized"));
     await table.toggleBool(+id, field_name);
+    if (isOfflineMode)
+      await state.setConfig("user_with_offline_data", user_name);
   } else {
     await apiCall({
       method: "POST",

package/www/js/routes/init.js

@@ -1,4 +1,5 @@
-/*global postView, postViewRoute, getView, postToggleField, deleteRows, postPageAction, getPage, getLoginView, logoutAction, getSignupView, getErrorView, window*/
+/*global postView, postViewRoute, getView, postToggleField, deleteRows, postPageAction, getPage, getLoginView, logoutAction, getSignupView, getErrorView, window, getSyncView, getSyncModalContent, getAskOverwriteDialog, getSyncSettingsView*/
+// TODO module namespacese
 
 const initRoutes = async () => {
   const routes = [
@@ -46,6 +47,14 @@ const initRoutes = async () => {
       path: "get/error_page",
       action: getErrorView,
     },
+    {
+      path: "get/sync/sync_settings",
+      action: getSyncSettingsView,
+    },
+    {
+      path: "get/sync/ask_overwrite",
+      action: getAskOverwriteDialog,
+    },
   ];
   window.router = new window.UniversalRouter(routes);
 };

package/www/js/routes/sync.js

@@ -0,0 +1,85 @@
+/*global saltcorn, wrapContents, MobileRequest, */
+
+const getSyncSettingsView = (context) => {
+  const content = saltcorn.markup.div(
+    { class: "container" },
+    saltcorn.markup.div(
+      { class: "row" },
+      saltcorn.markup.div(
+        { class: "col-9" },
+        saltcorn.markup.div(
+          { class: "fs-6 fw-bold text-decoration-underline" },
+          "Upload offline data"
+        ),
+        saltcorn.markup.div(
+          "Upload the data from your last offline session to the server."
+        )
+      ),
+      saltcorn.markup.div(
+        { class: "col-3" },
+        saltcorn.markup.button(
+          {
+            class: "btn btn-primary",
+            type: "button",
+            onClick: "callUploadSync()",
+          },
+          saltcorn.markup.i({ class: "fas fa-sync" })
+        )
+      )
+    ),
+    saltcorn.markup.hr(),
+    saltcorn.markup.div(
+      { class: "row" },
+      saltcorn.markup.div(
+        { class: "col-9" },
+        saltcorn.markup.div(
+          { class: "fs-6 fw-bold text-decoration-underline" },
+          "Download server data"
+        ),
+        saltcorn.markup.div(
+          "Download the latest data for your next offline session."
+        )
+      ),
+      saltcorn.markup.div(
+        { class: "col-3" },
+        saltcorn.markup.button(
+          {
+            class: "btn btn-primary",
+            type: "button",
+            onClick: "callDownloadSync()",
+          },
+          saltcorn.markup.i({ class: "fas fa-sync" })
+        )
+      )
+    ),
+    saltcorn.markup.hr()
+  );
+  return wrapContents(content, "Sync Settings", context, new MobileRequest());
+};
+
+// get/sync/ask_overwrite
+const getAskOverwriteDialog = (context) => {
+  const content = saltcorn.markup.div(
+    saltcorn.markup.div(
+      { class: "mb-3 h6" },
+      "This replaces your offline data."
+    ),
+    saltcorn.markup.button(
+      {
+        class: "btn btn-secondary me-2",
+        type: "button",
+        "data-bs-dismiss": "modal",
+      },
+      "Close"
+    ),
+    saltcorn.markup.button(
+      {
+        class: "btn btn-primary close",
+        type: "button",
+        onClick: "closeModal(); callDownloadSync(true)",
+      },
+      "Download anyway"
+    )
+  );
+  return wrapContents(content, "Warning", context, new MobileRequest());
+};

package/www/js/routes/view.js

@@ -18,8 +18,9 @@ const postView = async (context) => {
   const req = new MobileRequest({ xhr: context.xhr, files: context.files });
   const res = new MobileResponse();
   const state = saltcorn.data.state.getState();
+  const mobileCfg = state.mobileConfig;
   if (
-    state.mobileConfig.role_id > view.min_role &&
+    mobileCfg.role_id > view.min_role &&
     !(await view.authorise_post({ body, req, ...view }))
   ) {
     throw new Error(req.__("Not authorized"));
@@ -34,6 +35,8 @@ const postView = async (context) => {
     },
     view.isRemoteTable()
   );
+  if (mobileCfg.isOfflineMode)
+    await state.setConfig("user_with_offline_data", mobileCfg.user_name);
   return res.getJson();
 };
 
@@ -48,9 +51,8 @@ const postViewRoute = async (context) => {
   const req = new MobileRequest({ xhr: context.xhr });
   const res = new MobileResponse();
   const state = saltcorn.data.state.getState();
-  if (state.mobileConfig.role_id > view.min_role) {
-    throw new Error(req.__("Not authorized"));
-  }
+  const { role_id, isOfflineMode, user_name } = state.mobileConfig;
+  if (role_id > view.min_role) throw new Error(req.__("Not authorized"));
   await view.runRoute(
     context.params.route,
     context.data,
@@ -58,6 +60,7 @@ const postViewRoute = async (context) => {
     { req, res },
     view.isRemoteTable()
   );
+  if (isOfflineMode) await state.setConfig("user_with_offline_data", user_name);
   return res.getJson();
 };
 
@@ -75,9 +78,8 @@ const getView = async (context) => {
   if (
     state.mobileConfig.role_id > view.min_role &&
     !(await view.authorise_get({ query, req, ...view }))
-  ) {
+  )
     throw new Error(req.__("Not authorized"));
-  }
   const contents = await view.run_possibly_on_page(
     query,
     req,

package/www/js/utils/global_utils.js

@@ -1,4 +1,4 @@
-/*global axios, write, cordova, router, getDirEntry, saltcorn, document, FileReader, navigator*/
+/*global offlineHelper, axios, write, cordova, router, getDirEntry, saltcorn, document, FileReader, navigator*/
 
 let routingHistory = [];
 
@@ -16,6 +16,14 @@ function addRoute(routeEntry) {
   routingHistory.push(routeEntry);
 }
 
+function clearHistory() {
+  routingHistory = [];
+}
+
+function popRoute() {
+  routingHistory.pop();
+}
+
 async function apiCall({ method, path, params, body, responseType }) {
   const config = saltcorn.data.state.getState().mobileConfig;
   const serverPath = config.server_path;
@@ -43,6 +51,13 @@ async function apiCall({ method, path, params, body, responseType }) {
   }
 }
 
+function clearAlerts() {
+  const iframe = document.getElementById("content-iframe");
+  const alertsArea =
+    iframe.contentWindow.document.getElementById("alerts-area");
+  alertsArea.innerHTML = "";
+}
+
 function showAlerts(alerts) {
   const iframe = document.getElementById("content-iframe");
   const alertsArea =
@@ -136,27 +151,58 @@ async function replaceIframeInnerContent(content) {
 }
 
 async function gotoEntryView() {
-  const config = saltcorn.data.state.getState().mobileConfig;
-  const entryPath = config.entry_point;
-  const page = await router.resolve({
-    pathname: entryPath,
-  });
-  addRoute({ entryPath, query: undefined });
-  await replaceIframeInnerContent(page.content);
+  const mobileConfig = saltcorn.data.state.getState().mobileConfig;
+  try {
+    if (
+      mobileConfig.networkState === "none" &&
+      mobileConfig.allowOfflineMode &&
+      !mobileConfig.isOfflineMode
+    )
+      await offlineHelper.startOfflineMode();
+    const page = await router.resolve({
+      pathname: mobileConfig.entry_point,
+      alerts: mobileConfig.isOfflineMode
+        ? [{ type: "info", msg: "You are in offline mode" }]
+        : [],
+    });
+    addRoute({ route: mobileConfig.entry_point, query: undefined });
+    await replaceIframeInnerContent(page.content);
+  } catch (error) {
+    showAlerts([
+      {
+        type: "error",
+        msg: error.message ? error.message : "An error occured.",
+      },
+    ]);
+  }
 }
 
 async function handleRoute(route, query, files) {
+  const mobileConfig = saltcorn.data.state.getState().mobileConfig;
   try {
+    if (
+      mobileConfig.networkState === "none" &&
+      mobileConfig.allowOfflineMode &&
+      !mobileConfig.isOfflineMode
+    )
+      await offlineHelper.startOfflineMode();
     if (route === "/") return await gotoEntryView();
     addRoute({ route, query });
     const page = await router.resolve({
       pathname: route,
       query: query,
       files: files,
+      alerts: mobileConfig.isOfflineMode
+        ? [{ type: "info", msg: "You are in offline mode" }]
+        : [],
     });
     if (page.redirect) {
-      const { path, query } = splitPathQuery(page.redirect);
-      await handleRoute(path, query);
+      if (page.redirect.startsWith("http://localhost")) {
+        await gotoEntryView();
+      } else {
+        const { path, query } = splitPathQuery(page.redirect);
+        await handleRoute(path, query);
+      }
     } else if (page.content) {
       if (!page.replaceIframe) await replaceIframeInnerContent(page.content);
       else await replaceIframe(page.content);
@@ -168,12 +214,14 @@ async function handleRoute(route, query, files) {
         msg: error.message ? error.message : "An error occured.",
       },
     ]);
-    console.error(error);
   }
 }
 
 async function goBack(steps = 1, exitOnFirstPage = false) {
-  if (exitOnFirstPage && routingHistory.length === 1) {
+  if (
+    routingHistory.length === 0 ||
+    (exitOnFirstPage && routingHistory.length === 1)
+  ) {
     navigator.app.exitApp();
   } else if (routingHistory.length <= steps) {
     routingHistory = [];
@@ -198,3 +246,13 @@ function errorAlert(error) {
   ]);
   console.error(error);
 }
+
+async function checkJWT(jwt) {
+  if (jwt && jwt !== "undefined") {
+    const response = await apiCall({
+      method: "GET",
+      path: "/auth/authenticated",
+    });
+    return response.data.authenticated;
+  } else return false;
+}

package/www/js/utils/iframe_view_utils.js

@@ -97,27 +97,47 @@ async function login(e, entryPoint, isSignup) {
   if (typeof loginResult === "string") {
     // use it as a token
     const decodedJwt = parent.jwt_decode(loginResult);
-    const config = parent.saltcorn.data.state.getState().mobileConfig;
-    config.role_id = decodedJwt.user.role_id ? decodedJwt.user.role_id : 10;
+    const state = parent.saltcorn.data.state.getState();
+    const config = state.mobileConfig;
+    config.role_id = decodedJwt.user.role_id ? decodedJwt.user.role_id : 100;
     config.user_name = decodedJwt.user.email;
+    config.user_id = decodedJwt.user.id;
     config.language = decodedJwt.user.language;
     config.isPublicUser = false;
+    config.isOfflineMode = false;
     await parent.setJwt(loginResult);
     config.jwt = loginResult;
     await parent.i18next.changeLanguage(config.language);
+    const alerts = [];
+    if (config.allowOfflineMode) {
+      const userWithOfflineData = await parent.offlineHelper.lastOfflineUser();
+      if (!userWithOfflineData) await parent.offlineHelper.downloadServerData();
+      else {
+        if (userWithOfflineData === config.user_name) {
+          alerts.push({
+            type: "info",
+            msg: "You have offline data, open the Sync menu to handle it.",
+          });
+        } else {
+          alerts.push({
+            type: "warning",
+            msg: `'${userWithOfflineData}' has not yet uploaded offline data.`,
+          });
+        }
+      }
+    }
+    alerts.push({
+      type: "success",
+      msg: parent.i18next.t("Welcome, %s!", {
+        postProcess: "sprintf",
+        sprintf: [config.user_name],
+      }),
+    });
     parent.addRoute({ route: entryPoint, query: undefined });
     const page = await parent.router.resolve({
       pathname: entryPoint,
       fullWrap: true,
-      alerts: [
-        {
-          type: "success",
-          msg: parent.i18next.t("Welcome, %s!", {
-            postProcess: "sprintf",
-            sprintf: [config.user_name],
-          }),
-        },
-      ],
+      alerts,
     });
     await parent.replaceIframe(page.content);
   } else if (loginResult?.alerts) {
@@ -132,7 +152,7 @@ async function publicLogin(entryPoint) {
     const loginResult = await loginRequest({ isPublic: true });
     if (typeof loginResult === "string") {
       const config = parent.saltcorn.data.state.getState().mobileConfig;
-      config.role_id = 10;
+      config.role_id = 100;
       config.user_name = "public";
       config.language = "en";
       config.isPublicUser = true;
@@ -312,9 +332,9 @@ async function gopage(n, pagesize, viewIdentifier, extra) {
   );
 }
 
-function mobile_modal(url, opts = {}) {
+async function mobile_modal(url, opts = {}) {
   if ($("#scmodal").length === 0) {
-    $("body").append(`<div id="scmodal", class="modal">
+    $("body").append(`<div id="scmodal" class="modal">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
@@ -333,18 +353,41 @@ function mobile_modal(url, opts = {}) {
     var modal = bootstrap.Modal.getInstance(myModalEl);
     modal.dispose();
   }
-  const { path, query } = parent.splitPathQuery(url);
-  // submitReload ?
-  parent.router
-    .resolve({ pathname: `get${path}`, query: query })
-    .then((page) => {
-      const modalContent = page.content;
-      const title = page.title;
-      if (title) $("#scmodal .modal-title").html(title);
-      $("#scmodal .modal-body").html(modalContent);
-      new bootstrap.Modal($("#scmodal")).show();
-      // onOpen onClose initialize_page?
+  try {
+    const { path, query } = parent.splitPathQuery(url);
+    // submitReload ?
+    const mobileConfig = parent.saltcorn.data.state.getState().mobileConfig;
+    if (
+      mobileConfig.networkState === "none" &&
+      mobileConfig.allowOfflineMode &&
+      !mobileConfig.isOfflineMode
+    )
+      await parent.offlineHelper.startOfflineMode();
+    const page = await parent.router.resolve({
+      pathname: `get${path}`,
+      query: query,
+      alerts: mobileConfig.isOfflineMode
+        ? [{ type: "info", msg: "You are in offline mode" }]
+        : [],
     });
+    const modalContent = page.content;
+    const title = page.title;
+    if (title) $("#scmodal .modal-title").html(title);
+    $("#scmodal .modal-body").html(modalContent);
+    new bootstrap.Modal($("#scmodal")).show();
+    // onOpen onClose initialize_page?
+  } catch (error) {
+    parent.showAlerts([
+      {
+        type: "error",
+        msg: error.message ? error.message : "An error occured.",
+      },
+    ]);
+  }
+}
+
+function closeModal() {
+  $("#scmodal").modal("toggle");
 }
 
 async function local_post(url, args) {
@@ -481,6 +524,97 @@ async function view_post(viewname, route, data, onDone) {
   }
 }
 
+async function callUploadSync() {
+  if (!(await parent.offlineHelper.lastOfflineUser())) {
+    parent.showAlerts([
+      {
+        type: "error",
+        msg: "You don't have any offline data.",
+      },
+    ]);
+  } else {
+    showLoadSpinner();
+    try {
+      await parent.offlineHelper.uploadLocalData();
+      await parent.offlineHelper.endOfflineMode();
+      parent.clearAlerts();
+      parent.showAlerts([
+        {
+          type: "info",
+          msg: "Sucessfully uploaded your local data.",
+        },
+      ]);
+    } catch (error) {
+      parent.errorAlert(error);
+    } finally {
+      removeLoadSpinner();
+    }
+  }
+}
+
+async function callDownloadSync(force = false) {
+  const lastOfflineUser = await parent.offlineHelper.lastOfflineUser();
+  const { user_name } = parent.saltcorn.data.state.getState().mobileConfig;
+  if (lastOfflineUser === user_name && !force) {
+    await mobile_modal("/sync/ask_overwrite");
+  } else if (lastOfflineUser && !force) {
+    parent.showAlerts([
+      {
+        type: "error",
+        msg: `The user '${lastOfflineUser}' has offline data, the download is not available.`,
+      },
+    ]);
+  } else {
+    showLoadSpinner();
+    try {
+      await parent.offlineHelper.downloadServerData();
+      await parent.offlineHelper.endOfflineMode();
+      parent.clearAlerts();
+      parent.showAlerts([
+        {
+          type: "info",
+          msg: "Sucessfully updated your local data.",
+        },
+      ]);
+    } catch (error) {
+      parent.errorAlert(error);
+    } finally {
+      removeLoadSpinner();
+    }
+  }
+}
+
+function showLoadSpinner() {
+  if ($("#scspinner").length === 0) {
+    $("body").append(`
+    <div 
+      id="scspinner" 
+      style="position: absolute;
+        top: 0px;
+        width: 100%;
+        height: 100%;
+        z-index: 9999;"
+    >
+      <div 
+        class="spinner-border"
+        role="status"
+        style="position: absolute;
+          left: 50%;
+          top: 50%;
+          height:60px;
+          width:60px;
+          margin:0px auto;"
+      >
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>`);
+  }
+}
+
+function removeLoadSpinner() {
+  $("#scspinner").remove();
+}
+
 function reload_on_init() {
   console.log("not yet supported");
 }

package/www/js/utils/offline_mode_helper.js

@@ -0,0 +1,146 @@
+/*global $, apiCall, saltcorn, apiCall, navigator, clearAlerts*/
+
+var offlineHelper = (() => {
+  const loadServerData = async () => {
+    const response = await apiCall({
+      method: "GET",
+      path: "/sync/table_data",
+    });
+    return response.data;
+  };
+  const updateLocalData = async (data) => {
+    try {
+      await saltcorn.data.db.query("PRAGMA foreign_keys = OFF;");
+      await saltcorn.data.db.query("BEGIN TRANSACTION");
+      // replace all data
+      for (const [k, v] of Object.entries(data)) {
+        await saltcorn.data.db.query(
+          `delete from "${saltcorn.data.db.sqlsanitize(k)}"`
+        );
+        for (const row of v.rows) {
+          await saltcorn.data.db.insert(k, row);
+        }
+      }
+      await saltcorn.data.db.query("COMMIT TRANSACTION");
+    } catch (error) {
+      await saltcorn.data.db.query("ROLLBACK TRANSACTION");
+      throw error;
+    } finally {
+      await saltcorn.data.db.query("PRAGMA foreign_keys = ON;");
+    }
+  };
+
+  const loadLocalData = async () => {
+    const result = {};
+    const { user_id } = saltcorn.data.state.getState().mobileConfig;
+    const user = await saltcorn.data.models.User.findOne({ id: user_id });
+    if (!user) throw new Error(`The user with id '${user_id}' does not exist.`);
+    for (const table of await saltcorn.data.models.Table.find()) {
+      // ignore min_role_read, one can insert a row which is not readable
+      // but that invisible row should be synched
+      const rows =
+        user.role_id > table.min_role_write
+          ? (await table.getRows()).filter((row) => table.is_owner(user, row))
+          : await table.getRows();
+      result[table.name] = rows;
+    }
+    return result;
+  };
+  const sendToServer = async (localData) => {
+    const response = await apiCall({
+      method: "POST",
+      path: "/sync/table_data",
+      body: {
+        data: localData,
+      },
+    });
+    return response.data;
+  };
+  const applyTranslatedIds = async (translateIds) => {
+    try {
+      await saltcorn.data.db.query("PRAGMA foreign_keys = OFF;");
+      await saltcorn.data.db.query("BEGIN TRANSACTION");
+      for (const [k, v] of Object.entries(translateIds)) {
+        const table = saltcorn.data.models.Table.findOne({ name: k });
+        for (const { from, to } of v) {
+          await table.updateRow({ id: to }, from);
+        }
+      }
+      await saltcorn.data.db.query("COMMIT TRANSACTION");
+    } catch (error) {
+      await saltcorn.data.db.query("ROLLBACK TRANSACTION");
+      throw error;
+    } finally {
+      await saltcorn.data.db.query("PRAGMA foreign_keys = ON;");
+    }
+  };
+
+  return {
+    startOfflineMode: async () => {
+      const state = saltcorn.data.state.getState();
+      const mobileConfig = state.mobileConfig;
+      const oldOfflineUser = await offlineHelper.lastOfflineUser();
+      if (oldOfflineUser && oldOfflineUser !== mobileConfig.user_name) {
+        throw new Error(
+          `The offline mode is not available, '${oldOfflineUser}' has not yet uploaded offline data.`
+        );
+      } else {
+        mobileConfig.isOfflineMode = true;
+      }
+    },
+    endOfflineMode: async () => {
+      const state = saltcorn.data.state.getState();
+      const mobileConfig = state.mobileConfig;
+      mobileConfig.isOfflineMode = false;
+      await state.setConfig("user_with_offline_data", "");
+    },
+    lastOfflineUser: async () => {
+      const state = saltcorn.data.state.getState();
+      return await state.getConfig("user_with_offline_data");
+    },
+    uploadLocalData: async () => {
+      const lastOfflineUser = await offlineHelper.lastOfflineUser();
+      if (!lastOfflineUser) throw new Error("You don't have any offline data.");
+      const { user_name } = saltcorn.data.state.getState().mobileConfig;
+      if (lastOfflineUser !== user_name)
+        throw new Error(
+          `The upload is not available, '${lastOfflineUser}' has not yet uploaded offline data.`
+        );
+      const fromSqlite = await loadLocalData();
+      const { translateIds } = await sendToServer(fromSqlite);
+      if (translateIds && Object.keys(translateIds).length > 0)
+        await applyTranslatedIds(translateIds);
+    },
+    downloadServerData: async () => {
+      const fromServer = await loadServerData();
+      await updateLocalData(fromServer);
+    },
+    offlineCallback: async () => {
+      const mobileConfig = saltcorn.data.state.getState().mobileConfig;
+      mobileConfig.networkState = navigator.connection.type;
+    },
+    onlineCallback: async () => {
+      const mobileConfig = saltcorn.data.state.getState().mobileConfig;
+      if (mobileConfig.isOfflineMode) {
+        const iframeWindow = $("#content-iframe")[0].contentWindow;
+        if (iframeWindow) {
+          if (await offlineHelper.lastOfflineUser()) {
+            iframeWindow.notifyAlert(
+              `An internet connection is available, to handle your offline data Click ${saltcorn.markup.a(
+                {
+                  href: "javascript:execLink('/sync/sync_settings')",
+                },
+                "here"
+              )}`
+            );
+          } else {
+            clearAlerts();
+            iframeWindow.notifyAlert("You are online again.");
+            mobileConfig.isOfflineMode = false;
+          }
+        }
+      }
+      mobileConfig.networkState = navigator.connection.type;
+    },
+  };
+})();

package/www/js/utils/table_utils.js

@@ -46,18 +46,21 @@ async function updateUserDefinedTables() {
   const existingTables = await saltcorn.data.db.listUserDefinedTables();
   const tables = await saltcorn.data.models.Table.find();
   for (const table of tables) {
+    const sanitized = saltcorn.data.db.sqlsanitize(table.name);
     if (
       table.name !== "users" &&
-      !existingTables.find((row) => row.name === table.name)
+      !existingTables.find((row) => row.name === sanitized)
     ) {
       // CREATE TABLE without inserting into _sc_tables
       await saltcorn.data.models.Table.create(table.name, {}, table.id);
     }
     const existingFields = (
-      await saltcorn.data.db.query(`PRAGMA table_info('${table.name}')`)
+      await saltcorn.data.db.query(`PRAGMA table_info('${sanitized}')`)
     ).rows.map((row) => row.name);
     for (const field of await table.getFields()) {
-      if (existingFields.indexOf(field.name) < 0) {
+      if (
+        existingFields.indexOf(saltcorn.data.db.sqlsanitize(field.name)) < 0
+      ) {
         // field is new
         await saltcorn.data.models.Field.create(field, false, field.id);
       }