Trys with mobile wde

apps/sunboard/sunboard.go

@@ -0,0 +1,35 @@
+package sunboard
+
+import (
+	"net/http"
+	"personalwebsite/webfilesystem"
+
+	"github.com/gin-gonic/gin"
+)
+
+type SunboardApp struct {
+	fs    *webfilesystem.WebFileSystem
+	appID string
+}
+
+func NewSunboardApp(webFs *webfilesystem.WebFileSystem) *SunboardApp {
+	newApp := SunboardApp{
+		fs:    webFs,
+		appID: "Sunboard",
+	}
+	return &newApp
+}
+
+func (a *SunboardApp) GetAppID() string {
+	return a.appID
+}
+
+func (a *SunboardApp) PublicRoutes(route *gin.RouterGroup) {
+}
+
+func (a *SunboardApp) PrivateRoutes(router *gin.RouterGroup) {
+
+	router.POST("render", func(ctx *gin.Context) {
+		ctx.HTML(http.StatusOK, "sunboard/sunboard.html", gin.H{})
+	})
+}

front/src/wde/sunboard/sunboard-mobile.js

@@ -1,7 +1,59 @@
+import MobileWebDesktopEnvironment from "../wde-mobile.js"
+
 export default class MobileDesktop{
     /**@type {Element} */
     #icons
-    constructor(){
+    /** @type {MobileWebDesktopEnvironment} */
-        this.#icons = document.body.querySelector("")
+    #wde
+    constructor(wde){
+        this.#wde = wde
+        this.load()
+    }
+    
+    async load(){
+        this.createMainDivs()
+    }
+    
+    async createMainDivs(){
+        let sunboardNode = document.body.querySelector("#mobile-sunboard")
+        if (sunboardNode == null){
+            // this.#wde.Alert("Desktop node not found")
+            return
+        }
+
+        const params = new URLSearchParams({
+            // path: args[0] //FIXME
+            path: "/"
+        })
+        const response = await fetch(`/app/Sunboard/render?` + params,
+        {
+            method: "POST",
+            // body: JSON.stringify(runContext)
+        })
+        if (response.status != 200){
+            console.log(response.status)
+            // this.#wde.Alert("Error in render desktop") //TODO
+            return
+        }
+        const html = await response.text()
+        sunboardNode.innerHTML = html
+
+        console.log(this.#wde.FileView)
+
+        let iconsNode = document.body.querySelector("#icons")
+
+        this.fileView = new this.#wde.FileView(
+            iconsNode, 
+            (event) =>{},
+            (event) => {  },
+            (event, draggedElem) => {},
+            () => {  }
+            )
+            // this.RenderDir(args[0])
+            return
+    }
+
+    async createFileView(){
+        
     }
 }

front/src/wde/wde-mobile.js

@@ -1,10 +1,22 @@
-// import MobileDecorat from "../Decorat/mobile-decorat"
+import MobileDecorat from "./decorat/mobile-decorat.js"
-
+import MobileSunboard from "./sunboard/sunboard-mobile.js"
+import WDEFileView from "./widgets/file-view/file-view.js"
 export default class MobileWebDesktopEnvironment{
     /** @type {MobileDecorat} */
-    #decorat
+    Decorat
+    /** @type {WDEFileView} */
+    FileView
+    /** @type {MobileSunboard} */
+    #sunBoard
     constructor(){
         document.body.style.setProperty('--zoom', 3)
-        // this.#decorat = new MobileDecorat()
+        this.Decorat = new MobileDecorat()
+        this.FileView = WDEFileView
+        this.#sunBoard = new MobileSunboard(this)
+        this.#sunBoard
+    }
+
+    loadWDE(){
+        
     }
 }

front/webpack.config.cjs

@@ -19,6 +19,12 @@ const config = {
         desktop_style: [
             "./src/desktop.less",
         ],
+        mobile: [
+            './src/wde/wde-mobile.js',
+        ],
+        mobile_style: [
+            "./src/mobile.less",
+        ],
         finder : [
             './src/apps/finder/finder.js',
         ],

main.go

@@ -12,6 +12,7 @@ import (
 	"personalwebsite/apps/blogviewer"
 	"personalwebsite/apps/finder"
 	imgviewer "personalwebsite/apps/img-viewer"
+	"personalwebsite/apps/sunboard"
 	"personalwebsite/routes"
 	"personalwebsite/wde"
 	"personalwebsite/webfilesystem"
@@ -72,11 +73,13 @@ func main() {
 	imgViewerApp := imgviewer.NewImgViewerApp(webfs)
 	blogViewerApp := blogviewer.NewBlogViewerApp(webfs)
 	blogWriterApp := blogwriter.NewBlogWriterApp(webfs)
+	sunBoardApp := sunboard.NewSunboardApp(webfs)
 	appsStorage.Apps["personal-properties"] = persPropsApp
 	appsStorage.Apps["finder"] = finderApp
 	appsStorage.Apps["img-viewer"] = imgViewerApp
 	appsStorage.Apps[blogViewerApp.GetAppID()] = blogViewerApp
 	appsStorage.Apps["BlogWriter"] = blogWriterApp
+	appsStorage.Apps["Sunboard"] = sunBoardApp
 
 	go routes.PublicRoutes(publicPort, webfs, webde, appsStorage)
 	routes.PrivateRoutes(privatePort, webfs, webde, appsStorage)

res/dev-fs/dist/mobile_style.css

@@ -0,0 +1,49 @@
+/*!**********************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/mobile.less ***!
+  \**********************************************************************************************************/
+.WdePrimitives.AdjectiveElement,
+#down-bar {
+  border: 1px solid #555555;
+}
+#mobile-sunboard {
+  width: 100%;
+  height: 100%;
+  /* Auto layout */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+#icons {
+  width: 100%;
+  height: 100%;
+  background-color: #9999CC;
+}
+#down-bar {
+  width: 100%;
+  height: 150px;
+  background-color: #C0C0C0;
+}
+body {
+  zoom: var(--zoom);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  /* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Safari */
+  -khtml-user-select: none;
+  /* Konqueror HTML */
+  -moz-user-select: none;
+  /* Old versions of Firefox */
+  -ms-user-select: none;
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+  touch-action: manipulation;
+}
+

res/dev-fs/dist/mobile_style.js

@@ -0,0 +1,45 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ var __webpack_modules__ = ({
+
+/***/ "./src/mobile.less":
+/*!*************************!*\
+  !*** ./src/mobile.less ***!
+  \*************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://my-webpack-project/./src/mobile.less?");
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/ // The require scope
+/******/ var __webpack_require__ = {};
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = (exports) => {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/ })();
+/******/ 
+/************************************************************************/
+/******/ 
+/******/ // startup
+/******/ // Load entry module and return exports
+/******/ // This entry module can't be inlined because the eval devtool is used.
+/******/ var __webpack_exports__ = {};
+/******/ __webpack_modules__["./src/mobile.less"](0, __webpack_exports__, __webpack_require__);
+/******/ 

templates/base/mobile-desktop.html

@@ -2,13 +2,16 @@
 <html lang="en" dir="ltr">
     <title>Greg Brzezinski</title>
     <head>
-        <script src="res/dev-fs/wde/dist/mobile.js"></script>
+        <!-- <script src="res/dev-fs/dist/mobile.js"></script> -->
-        <link rel="stylesheet" type="text/css" href="res/dev-fs/wde/dist/mobile.css">
+        <link rel="stylesheet" type="text/css" href="res/dev-fs/dist/mobile_style.css">
     </head>
     <body>
+        <script type="module">
+            import * as WebDesktopEnvironment from '/res/dev-fs/dist/mobile.js';
+            // console.log(WebDesktopEnvironment)
+            let kek = new WebDesktopEnvironment.default()
+        </script>
         <div id="mobile-sunboard">
-            <div id="icons"></div>
-            <div id="down-bar"></div>
         </div>
         <div id="applications"></div>
     </body>

templates/sunboard/sunboard.html

@@ -0,0 +1,6 @@
+{{ define "sunboard/sunboard.html" }}
+    <div id="icons"></div>
+    <div id="down-bar"></div>
+{{ end }}
+
+