Desktop with files and background

main.go

@@ -63,10 +63,11 @@ func main() {
 
 	webfs := webfilesystem.NewWebFileSystem(client, dBName, webFsCollection)
 	wde := wde.NewWDE(webfs)
-	persPropsApp := personalprops.NewPersPropsApp()
+	persPropsApp := personalprops.NewPersPropsApp(webfs)
+
 	// finderApp := finder.FinderApplication{}
 	finderApp := finder.NewFinderApplication(webfs)
-	imgViewerApp := imgviewer.NewImgViewerApp()
+	imgViewerApp := imgviewer.NewImgViewerApp(webfs)
 	blogViewerApp := blogviewer.NewBlogViewerApp(webfs)
 	appsStorage := websiteapp.ApplicationsStorage{
 		Apps: map[string]websiteapp.WebDEApplication{},
@@ -186,10 +187,14 @@ func main() {
 			persPropApp.GET("render", func(ctx *gin.Context) {
 				isMobileParam := ctx.Query("isMobile")
 				isMobile := isMobileParam == "true"
+				ginH, err := persPropsApp.Render()
+				if err != nil {
+					ctx.JSON(http.StatusInternalServerError, "TODO") //TODO
+				}
 				if isMobile {
-					ctx.HTML(http.StatusOK, "personal-properties/mobile-app.tmpl", persPropsApp.Render())
+					ctx.HTML(http.StatusOK, "personal-properties/mobile-app.tmpl", ginH)
 				} else {
-					ctx.HTML(http.StatusOK, "personal-properties/app.tmpl", persPropsApp.Render())
+					ctx.HTML(http.StatusOK, "personal-properties/app.tmpl", ginH)
 				}
 			})
 		}
@@ -208,16 +213,34 @@ func main() {
 			finderAppRoute.GET("renderMobileDesktop", func(ctx *gin.Context) {
 				ctx.HTML(http.StatusOK, "finder/mobile-desktop.tmpl", gin.H{})
 			})
+			finderAppRoute.GET("renderDesktop", func(ctx *gin.Context) {
+				path := ctx.Query("path")
+				if path == "" {
+					ctx.JSON(http.StatusBadRequest, "no path provided")
+					return
+				}
+				ctx.HTML(http.StatusOK, "finder/desktop.tmpl", gin.H{})
+			})
 		}
 		imgViewerRoute := app.Group("img-viewer")
 		{
 			imgViewerRoute.GET("render", func(ctx *gin.Context) {
 				isMobileParam := ctx.Query("isMobile")
 				isMobile := isMobileParam == "true"
+				path := ctx.Query("path")
+				if path == "" {
+					ctx.JSON(http.StatusBadRequest, "no path provided")
+					return
+				}
+				ginH, err := imgViewerApp.Render(path, isMobile)
+				if err != nil {
+					ctx.JSON(http.StatusInternalServerError, "TODO")
+					return
+				}
 				if isMobile {
-					ctx.HTML(http.StatusOK, "img-viewer/mobile-app.tmpl", imgViewerApp.Render(isMobile))
+					ctx.HTML(http.StatusOK, "img-viewer/mobile-app.tmpl", ginH)
 				} else {
-					ctx.HTML(http.StatusOK, "img-viewer/app.tmpl", imgViewerApp.Render(isMobile))
+					ctx.HTML(http.StatusOK, "img-viewer/app.tmpl", ginH)
 				}
 
 			})

resources/sys/finder/finder.js

@@ -10,10 +10,14 @@ class Finder{
     }
 
     /**
-    * @param {string} path
+    * @param {string[]} args
     */
     NewWindow(args){
         this.path = args[0]
+        if (args[1] == "desktop"){
+            this.NewDesktop(args)
+            return
+        }
         fetch(`${window.location.origin}/application/${this.appId}/render?` + new URLSearchParams({
             isMobile: WebDesktopEnvironment.isMobile,
             // path: this.path,
@@ -25,7 +29,7 @@ class Finder{
             newWindow.innerHTML = html
             
             this.fileView = new FileView(newWindow.querySelector(".FileTileView"), (event) =>{
-                this.Click(event, this.path)
+                this.Click(event, false)
             })
             this.OpenDir(this.path)
             
@@ -39,7 +43,7 @@ class Finder{
 
             if (!WebDesktopEnvironment.isMobile){
                 // let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])// TODO to querry selector
-                console.log(newWindow.querySelector("#closeWindowButton"))
+                // console.log(newWindow.querySelector("#closeWindowButton"))
                 newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
                     
                     WebDesktopEnvironment.CloseWindow(newWindow)
@@ -52,6 +56,29 @@ class Finder{
         })
     }
 
+    /**
+    * @param {string[]} args
+    */
+    NewDesktop(args){
+        fetch(`${window.location.origin}/application/${this.appId}/renderDesktop?` + new URLSearchParams({
+            isMobile: WebDesktopEnvironment.isMobile,
+            path: args[0]
+        }))
+        .then((response) => response.text())
+        .then((html) => {
+            // console.log(args)
+            args[2].innerHTML = html
+            
+            this.fileView = new FileView(args[2].querySelector(".FileTileView"), (event) =>{
+                this.Click(event, true)
+            })
+            this.OpenDir(this.path)
+        })
+        .catch((error) => {
+            WebDesktopEnvironment.Alert(error);
+        })
+    }
+
     OpenPreviousDir(){
         if (this.pathHistory.length > 0){
             // console.log(this.pathHistory)
@@ -66,7 +93,6 @@ class Finder{
     * @param {string} path
     */
     OpenDir(path){
-        console.log()
         this.pathHistory += this.path
         this.path = path
         this.fileView.OpenFolder(this.path)
@@ -74,12 +100,17 @@ class Finder{
 
     /**
     * @param {MouseEvent} event
+    * @param {boolean} inNewWindow
     */
-    Click(event){
+    Click(event, inNewWindow){
         let fileType = event.target.getAttribute("fileType")
         let fileName = event.target.getAttribute("name")
         switch (fileType) {
             case "directory":
+                if (inNewWindow){
+                    WebDesktopEnvironment.Open("finder", ["/home/user/" + fileName]) //FIXME this.path is shared for all windows
+                    break
+                }
                 this.OpenDir(this.path +"/" + fileName)
                 break
             case "blog-page":
@@ -89,9 +120,9 @@ class Finder{
             //     //TODO get real id
             //     WebDesktopEnvironment.Open("personal-properties", [])
             //     break;
-            // case "img":
-            //     WebDesktopEnvironment.Open("img-viewer", ["pizda"])
-            //     break;
+            case "base64img":
+                WebDesktopEnvironment.Open("img-viewer", [this.path + "/" +  fileName])
+                break;
             default:
                 console.log("Unsupported file type")
                 break;

resources/sys/img-viewer/img-viewer.css

@@ -5,12 +5,13 @@
 .Img-Viewer-Picture{
     width: 100%;
     height: 100%;
-    background-image: url("./test-image.jpg");
+    /* background-image: url("./test-image.jpg");
     background-size:     contain;
     background-repeat:   no-repeat;
-    background-position: center center; 
+    background-position: center center;  */
 }
 
+
 .Img-Viewer-Picture-Toolbar{
     width: 100%;
     height: 35px;

resources/sys/img-viewer/img-viewer.js

@@ -1,11 +1,12 @@
 class ImgViewer{
     appId = "img-viewer"
     /**
-    * @param {string} path
+    * @param {string[]} args
     */
-    NewWindow(path){
+    NewWindow(args){
         fetch(`${window.location.origin}/application/${this.appId}/render?`+ new URLSearchParams({
             isMobile: WebDesktopEnvironment.isMobile,
+            path: args[0]
         }))
         .then((response) => response.text())
         .then((html) => {
@@ -24,7 +25,3 @@ class ImgViewer{
     }
 }
 
-
-class test{
-        
-}

resources/wde.js

@@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', function() {
     // console.log(window.screen.width)
     wde = new WebDesktopEnvironment
     if (!WebDesktopEnvironment.isMobile){
-        WebDesktopEnvironment.Open("finder", ["/home/user"])
+        // WebDesktopEnvironment.Open("finder", ["/home/user"])
         // WebDesktopEnvironment.Open("blog-viewer", ["/home/user/blog/test-1.blog"])
         // WebDesktopEnvironment.Open("personal-properties", ["kek"])
     } else {
@@ -58,6 +58,12 @@ class WebDesktopEnvironment{
         } else{
             document.body.style.setProperty('--zoom', 1)
             
+                        let desktopLayer = document.createElement("div")
+                        desktopLayer.setAttribute('id', 'desktop-layer')
+                        desktopLayer.setAttribute('class', 'DesktopBackground')
+                        document.body.appendChild(desktopLayer)
+                        WebDesktopEnvironment.Open("finder", ["/home/user", "desktop", desktopLayer])
+            
             let windowsLayer = document.createElement("div")
             windowsLayer.setAttribute('id', 'windows-layer')
             document.body.appendChild(windowsLayer)

resources/wdeUI.css

@@ -349,3 +349,10 @@
     width: 0;
     height: 0;
 }
+
+.DesktopBackground{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: #9999CC;
+}

templates/finder/desktop.tmpl

@@ -0,0 +1,6 @@
+{{ define "finder/desktop.tmpl" }}
+    <div class="FileTileView">
+    </div>
+{{ end }}
+
+				

templates/img-viewer/app.tmpl

@@ -1,5 +1,5 @@
 {{ define "img-viewer/app.tmpl" }}
-    <div id="TestWindowHeader" class="WindowFrameTopBar">
+    <div id="TestWindowHeader" class="WindowFrameTopBar DragArea">
         <button id="closeWindowButton" class="WindowFrameTopBarButton" title="Close Window"></button>
         <div id="Drag" class="WindowDragArea"></div>
         <div class="WindowFrameTitle">
@@ -11,9 +11,9 @@
         <!-- <div class="Img-Viewer-Picture-Toolbar">
             Toolbar
         </div> -->
-        <div class="Img-Viewer-Picture-Container">
-            <div class="Img-Viewer-Picture">
-        </div>
+        
+        <img class="Img-Viewer-Picture-Container"src="data:{{.header}},{{.base64}}">
+        
     </div>
 {{ end }}
 

templates/personal-properties/app.tmpl

@@ -1,6 +1,6 @@
 {{ define "personal-properties/app.tmpl" }}
     <!-- <div id="WindowBorder" class="PersonalPropertiesFrame"> -->
-        <div id="TestWindowHeader" class="WindowFrameTopBar">
+        <div id="TestWindowHeader" class="WindowFrameTopBar DragArea">
             <button id="closeWindowButton" class="WindowFrameTopBarButton" title="Close Window"></button>
             <div id="Drag" class="WindowDragArea"></div>
             <div class="WindowFrameTitle">
@@ -13,10 +13,11 @@
 			<div class="ScrollContent">
 				<div class="PropertiesList">
 					<div class="Personal-properties-bio">
-						<img src="res/img/default-avatar-photo-placeholder-profile-picture-vector.jpg" alt="My Photo" style="width: 48px;height: 48px;">
+						<img src="data:{{ .headerProps.Icon.Header }},{{ .headerProps.Icon.Base64 }}" alt="My Photo" style="width: 48px;height: 48px;">
 						<div class="Personal-properties-textbio">
-							<div>{{ .Name }}</div>
-							<div>{{ .BasicBio }}</div>
+							<div>{{ .headerProps.Name }}</div>
+							<div>{{ .headerProps.Info1 }}</div>
+							<div>{{ .headerProps.Info2 }}</div>
 						</div>
 					</div> 
 					{{ range $propIsland := .allprops }}

wde/imglib.go

@@ -0,0 +1,29 @@
+package wde
+
+import (
+	"errors"
+	"personalwebsite/webfilesystem"
+
+	"go.mongodb.org/mongo-driver/bson/primitive"
+)
+
+func ReadImage(img *webfilesystem.WebFSFile) (*Base64Img, error) {
+	header, ok := img.Data.(primitive.D).Map()["header"].(string)
+	if !ok {
+		return nil, errors.New("error in file decoding")
+	}
+	base64, ok := img.Data.(primitive.D).Map()["base64"].(string)
+	if !ok {
+		return nil, errors.New("error in file decoding")
+	}
+
+	return &Base64Img{
+		Header: header,
+		Base64: base64,
+	}, nil
+}
+
+type Base64Img struct {
+	Header string
+	Base64 string
+}

websiteapp/img-viewer/imgviewer.go

@@ -1,17 +1,21 @@
 package imgviewer
 
 import (
+	"personalwebsite/wde"
+	"personalwebsite/webfilesystem"
 	"personalwebsite/websiteapp"
 
 	"github.com/gin-gonic/gin"
 )
 
 type ImgViewerApp struct {
+	fs       *webfilesystem.WebFileSystem
 	manifest websiteapp.ApplicationManifest
 }
 
-func NewImgViewerApp() ImgViewerApp {
+func NewImgViewerApp(webFs *webfilesystem.WebFileSystem) ImgViewerApp {
 	newApp := ImgViewerApp{
+		fs: webFs,
 		manifest: websiteapp.ApplicationManifest{
 			AppId:      "img-viewer",
 			WindowName: "About me", //TODO: delete
@@ -27,9 +31,17 @@ func (p *ImgViewerApp) GetId() string {
 	return p.manifest.AppId
 }
 
-func (p *ImgViewerApp) Render(isMobile bool) gin.H {
-	return gin.H{
-		"Name":     "Greg Brzezinski",
-		"BasicBio": "Born 27.09.1998 at Saint-Petersburg",
+func (p *ImgViewerApp) Render(path string, isMobile bool) (gin.H, error) {
+	img, err := p.fs.Read(path)
+	if err != nil {
+		return nil, err
 	}
+	data, err := wde.ReadImage(img)
+	if err != nil {
+		return nil, err
+	}
+	return gin.H{
+		"header": data.Header,
+		"base64": data.Base64,
+	}, nil
 }

websiteapp/personalprops/personalprops.go

@@ -1,17 +1,23 @@
 package personalprops
 
 import (
+	"errors"
+	"personalwebsite/wde"
+	"personalwebsite/webfilesystem"
 	"personalwebsite/websiteapp"
 
 	"github.com/gin-gonic/gin"
+	"go.mongodb.org/mongo-driver/bson/primitive"
 )
 
 type PersonalPropertiesApp struct {
+	fs       *webfilesystem.WebFileSystem
 	manifest websiteapp.ApplicationManifest
 }
 
-func NewPersPropsApp() PersonalPropertiesApp {
+func NewPersPropsApp(webFs *webfilesystem.WebFileSystem) PersonalPropertiesApp {
 	newApp := PersonalPropertiesApp{
+		fs: webFs,
 		manifest: websiteapp.ApplicationManifest{
 			AppId:      "personal-properties",
 			WindowName: "About me",
@@ -27,16 +33,7 @@ func (p *PersonalPropertiesApp) GetId() string {
 	return p.manifest.AppId
 }
 
-func (p *PersonalPropertiesApp) Render() gin.H {
-	// books := make([]Book, 0)
-	// books = append(books, Book{
-	// 	Title:  "Title 1",
-	// 	Author: "Author 1",
-	// })
-	// books = append(books, Book{
-	// 	Title:  "Title 2",
-	// 	Author: "Author 2",
-	// })
+func (p *PersonalPropertiesApp) WriteToDb() {
 	allProps := make([]PropIsland, 0)
 
 	// careerProps := make([]Prop, 0)
@@ -123,26 +120,83 @@ func (p *PersonalPropertiesApp) Render() gin.H {
 			},
 		},
 	}
-	// testKeys := PropIsland{
-	// 	Header: "Test",
-	// 	Props: []PropElement{{
-	// 		Key:    "Urtt",
-	// 		Values: []string{"BakaBaka"},
-	// 	}},
-	// }
+
 	allProps = append(allProps, expertiseIsland, careerProps, eduIsland, volunteerProps)
-	return gin.H{
-		"Name":     "Greg Brzezinski",
-		"BasicBio": "Born 27.09.1998 at Saint-Petersburg",
-		// "BasicInfo": basicInfo,
-		// "career":    careerProps,
-		"allprops": allProps,
+	file := webfilesystem.WebFSFile{
+		MongoId: primitive.NewObjectID(),
+		Name:    "personal.props",
+		Type:    "props",
+		Data: PropertiesFile{
+			Props: allProps,
+		},
+	}
+	err := p.fs.CreateFile(&file, "/home/user/")
+	if err != nil {
+		println(err.Error())
+	} else {
+		println("Ok")
 	}
 }
 
-type Book struct {
-	Title  string
-	Author string
+func (p *PersonalPropertiesApp) Render() (gin.H, error) {
+	props, err := p.fs.Read("/home/user/personal.props")
+	if err != nil {
+		return nil, err
+	}
+	if props.Data == nil || props.Type != "props" {
+		return nil, errors.New("bad file")
+	}
+	headerProps := props.Data.(primitive.D).Map()["headerprops"].(primitive.D).Map()
+	file, err := p.fs.Read(headerProps["icon"].(string))
+	if err != nil {
+		//TODO
+	}
+
+	data, err := wde.ReadImage(file)
+	if err != nil {
+		return nil, err
+	}
+
+	hIsland := HeaderIsland{
+		Name:  headerProps["name"].(string),
+		Icon:  data,
+		Info1: "LLL",
+		Info2: "QQQ",
+	}
+
+	allProps := make([]PropIsland, 0)
+
+	for _, v := range props.Data.(primitive.D).Map()["props"].(primitive.A) {
+		island := PropIsland{}
+		island.Header = v.(primitive.D).Map()["header"].(string)
+		for _, prop := range v.(primitive.D).Map()["props"].(primitive.A) {
+			elem := PropElement{
+				Key: prop.(primitive.D).Map()["key"].(string),
+			}
+			if prop.(primitive.D).Map()["keycomments"] != nil {
+				for _, keyComments := range prop.(primitive.D).Map()["keycomments"].(primitive.A) {
+					elem.KeyComments = append(elem.KeyComments, keyComments.(string))
+				}
+			}
+			for _, elemValues := range prop.(primitive.D).Map()["values"].(primitive.A) {
+				elem.Values = append(elem.Values, elemValues.(string))
+			}
+			island.Props = append(island.Props, elem)
+		}
+		allProps = append(allProps, island)
+	}
+
+	return gin.H{
+		"headerProps": hIsland,
+		"allprops":    allProps,
+	}, nil
+}
+
+type HeaderIsland struct {
+	Name  string
+	Icon  *wde.Base64Img
+	Info1 string
+	Info2 string
 }
 
 type PropElement struct {
@@ -156,6 +210,6 @@ type PropIsland struct {
 	Props  []PropElement
 }
 
-// func (p *PersonalPropertiesApp) GetContent(ctx *gin.Context) interface{} {
-
-// }
+type PropertiesFile struct {
+	Props []PropIsland `bson:"props"`
+}