Emporio integration

.env

@@ -0,0 +1,4 @@
+REACT_APP_TM_SERVER_SCHEME=https
+REACT_APP_TM_SERVER_HOST=api.emporio.vaimee.it
+REACT_APP_TM_SERVER_PORT=80
+REACT_APP_REMOTE_SERVER=false

src/assets/main.css

@@ -335,7 +335,7 @@ ul {
  *    to override it to ensure consistency even when using the default theme.
  */
 
-html {
+ html {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
   line-height: 1.5; /* 2 */
 }
@@ -624,11 +624,20 @@ video {
   border-color: rgba(252, 129, 129, var(--tw-border-opacity));
 }
 
+.border-blue-500 {
+  --tw-border-opacity: 1;
+  border-color: rgba(0, 90, 156, var(--tw-border-opacity));
+}
+
 .focus\:border-blue-500:focus {
   --tw-border-opacity: 1;
   border-color: rgba(0, 90, 156, var(--tw-border-opacity));
 }
 
+.border-none{
+  border-style: none;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1129,6 +1138,14 @@ video {
   width: 33.333333%;
 }
 
+.w-1\/4 {
+  width: 25%;
+}
+
+.w-7\/10 {
+  width: 70%;
+}
+
 .w-5\/12 {
   width: 41.666667%;
 }
@@ -1149,6 +1166,10 @@ video {
   z-index: 10;
 }
 
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);

src/components/App/AppHeader/AppHeader.jsx

@@ -20,6 +20,8 @@ import Button from "./Button";
 import { ShareDialog } from "../../Dialogs/ShareDialog";
 import { ConvertTmDialog } from "../../Dialogs/ConvertTmDialog";
 import { CreateTdDialog } from "../../Dialogs/CreateTdDialog";
+import { LoadTmDialog } from "../../Dialogs/LoadTmDialog";
+import { SaveTmRemotelyDialog } from "../../Dialogs/SaveTmRemotelyDialog";
 import { getFileHandle, getFileHTML5, _readFileHTML5 } from "../../../util.js";
 
 
@@ -306,6 +308,15 @@ export default function AppHeader() {
   const createTdDialog = React.useRef();
   const openCreateTdDialog = () => { createTdDialog.current.openModal() }
 
+  const loadTmDialog = React.useRef();
+  const openLoadTmDialog = () => { loadTmDialog.current.openModal() }
+
+  const saveTmRemotelyDialog = React.useRef();
+  const openSaveTmRemotelyDialog = () => { saveTmRemotelyDialog.current.openModal() }
+
+  const useRemoteServer = process.env.REACT_APP_REMOTE_SERVER.toLocaleLowerCase() === "true";
+  console.log(useRemoteServer);
+  console.log(useRemoteServer? 'true':'false');
   return (
     <>
       <header className="flex justify-between items-center h-16 bg-blue-500">
@@ -320,14 +331,18 @@ export default function AppHeader() {
           <Button onClick={openShareDialog}>Share</Button>
           <Button onClick={openCreateTdDialog}>New</Button>
           <Button onClick={openFile}>Open</Button>
+          {useRemoteServer && <Button onClick={openLoadTmDialog}>Load TM</Button>}
           {(hasNativeFS()) && <Button onClick={saveFile}>Save</Button>}
           <Button onClick={saveFileAs}>Save As</Button>
+          {(context.isThingModel && useRemoteServer)  && <Button onClick={openSaveTmRemotelyDialog}>Save Remotely</Button>}
           {(context.showConvertBtn || context.isThingModel) && <Button onClick={openConvertTmDialog}>Convert To TD</Button>}
         </div>
       </header>
       <ConvertTmDialog ref={convertTmDialog} />
       <ShareDialog ref={shareDialog} />
       <CreateTdDialog ref={createTdDialog} />
+      <LoadTmDialog ref={loadTmDialog} />
+      <SaveTmRemotelyDialog ref={saveTmRemotelyDialog} />
       <input
         className="h-0"
         type="file"

src/components/Dialogs/CreateTdDialog.jsx

@@ -57,6 +57,7 @@ export const CreateTdDialog = forwardRef((props, ref) => {
                     context.updateLinkedTd(undefined)
                     context.addLinkedTd(linkedTd)
                     context.updateShowConvertBtn(type === "TM");
+                    context.updateIsThingModel(type === "TM")
                     context.updateOfflineTD(JSON.stringify(td, null, "\t"),"AppHeader");
                     close();
                 }}