working personal properties

.gitattributes

@@ -1 +1,4 @@
 *.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.ttf filter=lfs diff=lfs merge=lfs -text
+*.otf filter=lfs diff=lfs merge=lfs -text

approutes/personalPropsRoute/personalPropsRoute.go

@@ -1,16 +1,13 @@
 package personalpropsroute
 
 import (
-	"net/http"
-	"personalwebsite/websiteapp/personalprops"
-
 	"github.com/gin-gonic/gin"
 )
 
 func Route(route *gin.RouterGroup) {
-	persPropsApp := personalprops.NewPersPropsApp()
+
-	route.GET("/test", func(ctx *gin.Context) {
+	// route.GET("/test", func(ctx *gin.Context) {
-		test := persPropsApp.Render()
+	// 	test := persPropsApp.Render()
-		ctx.HTML(http.StatusOK, "personal-properties.html", gin.H{"books": test})
+	// 	ctx.HTML(http.StatusOK, "personal-properties.html", gin.H{"books": test})
-	})
+	// })
 }

main.go

@@ -4,12 +4,15 @@ import (
 	"log"
 	"net/http"
 	personalpropsroute "personalwebsite/approutes/personalPropsRoute"
+	"personalwebsite/routewde"
+	"personalwebsite/websiteapp"
+	"personalwebsite/websiteapp/personalprops"
 
 	"github.com/gin-gonic/gin"
 )
 
 func main() {
-
+	// hostUrl := "http://192.168.88.10:8080/"
 	router := gin.New()
 	// router.Use(rateLimit, gin.Recovery())
 	router.LoadHTMLGlob("resources/*.html")
@@ -20,10 +23,61 @@ func main() {
 	router.GET("/getmockapp", func(ctx *gin.Context) {
 
 	})
-	apps := router.Group("applications")
+	persPropsApp := personalprops.NewPersPropsApp()
+	appsStorage := websiteapp.ApplicationsStorage{
+		Apps: map[string]websiteapp.WebDEApplication{},
+	}
+	appsStorage.Apps["personal-properties"] = &persPropsApp
+	system := router.Group("system")
 	{
+		wde := system.Group("wde")
+		{
+			routewde.Route(wde)
+		}
+		apps := system.Group("applications")
+		{
+			apps.GET("/:appid/:method", func(ctx *gin.Context) {
+				appId := ctx.Param("appid")
+				method := ctx.Param("method")
+
+				app, isExist := appsStorage.Apps[appId]
+				if !isExist {
+					ctx.Status(http.StatusNoContent)
+					return
+				}
+				switch method {
+				case "getmanifest":
+					ctx.JSON(http.StatusOK, app.GetManifest())
+				case "gethtml":
+					ctx.HTML(http.StatusOK, appId+".html", nil)
+				case "app.js":
+					ctx.File("resources/applications/" + appId + "/" + appId + ".js")
+				case "app.css":
+					ctx.File("resources/applications/" + appId + "/" + appId + ".css")
+				default:
+					ctx.Status(http.StatusBadRequest)
+				}
+			})
+		}
+
+		websiteapp.Route(apps.Group("/storage"), &appsStorage)
 		personalpropsroute.Route(apps.Group("/personalproperties"))
 	}
+
+	app := router.Group("application")
+	{
+		app.GET("test", func(ctx *gin.Context) {
+			ctx.Status(http.StatusOK)
+		})
+		persPropApp := app.Group("personal-properties")
+		{
+
+			persPropApp.GET("getcontent", func(ctx *gin.Context) {
+				ctx.HTML(http.StatusOK, "personal-properties.html", persPropsApp.Render())
+			})
+		}
+
+	}
 	// router.GET("/room/:roomid", roomGET)
 	// router.POST("/room-post/:roomid", roomPOST)
 	// router.GET("/stream/:roomid", streamRoom)

resources/application.js

@@ -0,0 +1,5 @@
+export class Application{
+    Init(){
+        
+    }
+}

resources/applications/personal-properties/personal-properies.css

@@ -0,0 +1,3 @@
+.Pizda{
+    background-color: red;
+}

resources/applications/personal-properties/personal-properties.js

@@ -0,0 +1,37 @@
+
+
+class PersonalProperties{
+    /**
+    * @param {HTMLElement} appElem
+    */
+    constructor(appElem){
+        this.appElem = appElem
+        
+    }
+
+    Init(){
+        this.appElem.innerHTML = WebDesktopEnvironment.GetBasicWindow()
+        
+        let contentFrame = this.appElem.children[0].children[0].children[1]
+        fetch("http://192.168.88.10:8080/application/personal-properties/getcontent") //TODO Move to wde func
+        .then((response) => response.text())
+        .then((html) => {
+            contentFrame.innerHTML = html
+        })
+        .catch((error) => {
+            WebDesktopEnvironment.Alert(error);
+        });
+        
+        // var link = document.createElement( "link" );
+        // link.href = "http://192.168.88.10:8080/system/applications/personal-properties/app.css"
+        // link.type = "text/css";
+        // link.rel = "stylesheet";
+        // link.media = "screen,print";
+        // document.getElementsByTagName( "head" )[0].appendChild(link);
+       
+    }
+}
+
+document.onload = function (params) {
+    console.log("pizda")
+}

resources/base.css

@@ -1,6 +1,24 @@
+@font-face{
+    font-family: "Ubuntu-LI";
+    src:url("./GnuUnifontFull-Pm9P.ttf")
+}
+
+*{
+    font-family:"Ubuntu-LI";
+}
+
 body{
     margin: 0px;
+    /* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
 }
+
+/* @font-face {
+    font-family: "EspySansRegular";
+    src: url("res/EspySansRegular.ttf");
+    font-weight: normal;
+    font-style: normal;
+}    */
+
 #WindowsLayer {
     width: 100%;
     height: 100%;
@@ -40,30 +58,19 @@ body{
     display: flex;
     flex-direction: row;
     align-items: center;
+    justify-content: space-between;
     gap: 5px;
     padding: 0px;
 }
 
-.WindowFrameTopBarButton
-{
-    /* box-sizing: border-box; */
 
-    width: 11px;
-    height: 11px;
 
-    background: #D9D9D9;
+.WindowFrameTitle{
-    border: 1px solid #222222;
+    white-space: nowrap
-    box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF, -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25), inset 1px 1px 0px rgba(0, 0, 0, 0.25), inset -1px -1px 0px #FFFFFF;
-
-    /* Inside auto layout */
-
-    flex: none;
-    order: 0;
-    flex-grow: 0;
 }
 
 .WindowDragArea{
-    background-color: antiquewhite;
+    /* background-color: antiquewhite; */
     width: 100%;
     height: 100%;
     /* background: repeating-linear-gradient(
@@ -100,17 +107,51 @@ body{
     flex-grow: 1;
 }
 
+.Personal-properties-bio{
+    width: 100%;
+    height: auto;
+
+    /* Auto layout */
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0px;
+    gap:15px;
+}
+
+.Personal-properties-textbio{
+    /* width: 100%;
+    height: auto; */
+
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    padding: 0px;
+    gap:1px;
+}
+
+
 .Personal-properties-prop{
     width: 100%;
     height: auto;
     border: 1px solid #888888;
-    box-shadow: 1px 1px 0px #FFFFFF, inset 2px 2px 0px #FFFFFF;
+    box-shadow: 1px 1px 0px #FFFFFF, inset 1px 1px 0px #FFFFFF;
+
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0px;
+    gap:1px;
 }
 
 
+
+
 .Personal-properties-prop-header{
     /* width: 50px; */
-    position: relative;
+    position:relative;
     display: inline-block;
     max-width: 100%;
     background-color: #DDDDDD;
@@ -118,7 +159,46 @@ body{
     top: -10px;
     margin-left: 2px;
 
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px;
+    gap:10px;
+    
     /* padding: 10px; */
     /* border: 1px solid #888888; */
     /* box-shadow: 1px 1px 0px #FFFFFF, inset 2px 2px 0px #FFFFFF; */
 }
+
+.Personal-properties-prop-content{
+    width: 100%;
+    /* top: 0px; */
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0px;
+    gap: 3px;
+}
+
+.Personal-properties-prop-row{
+    margin-left: 12px;
+    margin-right: 12px;
+    /* Auto layout */
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding: 0px;
+    gap: 1px;
+}
+.Personal-properties-prop-key{
+    text-align: end;
+    width: 45%;
+    white-space: nowrap
+    /* font-weight: bold; */
+}
+.Personal-properties-prop-prop{
+    width: 55%;
+
+}

resources/base.html

@@ -2,10 +2,12 @@
 <html lang="en" dir="ltr">
     <head>
         <link rel="stylesheet" type="text/css" href="res/base.css">
+        <link rel="stylesheet" type="text/css" href="res/wdeUI.css">
         <script src="res/wde.js"></script>
+        <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
         <!-- <script src="res/decorat.js"></script> -->
         <!-- TODO Load with app -->
-        <script src="res/personal-properties.js"></script> 
+        <!-- <script src="res/personal-properties.js"></script>  -->
     </head>
     <body>
         <div id="WindowsLayer"></div>

resources/basic-window.html

@@ -0,0 +1,17 @@
+<!-- FIXME delete fixed size -->
+<div id="RootWidget" class="Application" style="width: 350px;height: 450px;" > 
+    <div id="WindowBorder" class="Frame">
+        <div id="TestWindowHeader" class="WindowFrameTopBar">
+            <button class="WindowFrameTopBarButton"></button>
+            <div id="Drag" class="WindowDragArea"></div>
+            <div class="WindowFrameTitle">
+                Test Title
+            </div>
+            <div id="Drag" class="WindowDragArea"></div>
+            <button class="WindowFrameTopBarButton" ></button>
+        </div>
+        <div id="ContentFrame" class="ContentFrame">
+        </div>
+    </div>
+</div>
+

resources/personal-properties-prop.html

@@ -5,3 +5,4 @@
     <hr/>
     {{ end }}
 </div>
+

resources/personal-properties.html

@@ -1,17 +1,20 @@
-<div id="RootWidget" class="Application" style="width: 200px;height: 200px;">
+<div class="Personal-properties-bio">
-    <div id="WindowBorder" class="Frame">
+    <img src="res/img/default-avatar-photo-placeholder-profile-picture-vector.jpg" style="width: 48px;height: 48px;">
-        <div id="TestWindowHeader" class="WindowFrameTopBar">
+    <div class="Personal-properties-textbio">
-            <button class="WindowFrameTopBarButton"></button>
+        <div>{{ .Name }}</div>
-            <div id="Drag" class="WindowDragArea"></div>
+        <div>{{ .BasicBio }}</div>
-            <button class="WindowFrameTopBarButton" ></button>
-        </div>
-        <div id="ContentFrame" class="ContentFrame">
-                {{ range $book := .books }}
-                    <div id="prop" class="Personal-properties-prop">
-                        <div class="Personal-properties-prop-header">{{ .Title }}</div>
-                        <div>{{ .Author }}</div>
-                    </div>
-                {{ end }}
-        </div>
     </div>
 </div>
+
+{{ range $props := .allprops }}
+<div id="prop" class="Personal-properties-prop">
+    <div class="Personal-properties-prop-content">
+        {{range $prop := $props}}
+        <div class="Personal-properties-prop-row">
+            <div class="Personal-properties-prop-key">{{.Key}}:</div>
+            <div class="Personal-properties-prop-prop">{{ .Prop }}</div>
+        </div>
+    {{ end }}
+    </div>
+</div> 
+{{ end }}

resources/personal-properties.js

@@ -1,5 +0,0 @@
-class PersonalProperties {
-    constructor(){
-        console.log("pprops")
-    }
-}

resources/wde.js

@@ -4,28 +4,77 @@ document.addEventListener('DOMContentLoaded', function() {
 }, false);
 
 class WebDesktopEnvironment{
+    
     constructor(){
         this.wc = new WindowsCompositor
 
-        fetch("http://localhost:8080/applications/personalproperties/test" /*, options */)
+        //Get basic window ready frame
+        fetch("http://192.168.88.10:8080/system/wde/getbasicwindow") //TODO Move to wde func
         .then((response) => response.text())
         .then((html) => {
-        document.getElementById("WindowsLayer").innerHTML = html;
+            WebDesktopEnvironment.SetBasicWindow(html)
+            let app = this.loadApp("personal-properties")
         })
         .catch((error) => {
-            console.warn(error);
+            WebDesktopEnvironment.Alert(error);
         });
+    }
 
-        // var iDiv = document.createElement('div');
+    /**
-        // iDiv.id = 'NewCoolApp';
+    * @param {string} appId
-        // iDiv.className = 'Application';
+    * @returns {Application | undefined}
-        // iDiv.style.width = "100px"
+    */
-        // iDiv.style.height = "100px"
+    loadApp(appId){
-        // document.getElementById('WindowsLayer').appendChild(iDiv)
+        let newApp = document.createElement("application")
-        // document.getElementById('WindowsLayer')[0].appendChild(iDiv);
+        newApp.setAttribute("id", `application-${appId}`)
+        let appElem = document.getElementById("WindowsLayer").appendChild(newApp)
+
+        let script = document.createElement("script")
+        script.setAttribute("src", "http://192.168.88.10:8080/system/applications/personal-properties/app.js")
+        script.setAttribute("async", "false")
+        appElem.appendChild(script)
+        script.addEventListener("load", function () {
+            let newApp = new PersonalProperties(appElem)
+            newApp.Init()
+        }, false)
+    }
+
+    static basicWindow
+    /**
+    * 
+    * @param {string} html
+    */
+    static SetBasicWindow(html){
+        this.basicWindow = html
+    }
+    /**
+    * 
+    * @returns {string}
+    */
+    static GetBasicWindow(){
+        // console.log(this.basicWindow)
+        return this.basicWindow
+    }
+
+    static Alert(alertText){
+        console.log(alertText)
     }
 }
 
+var getJSON = function(url, callback) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    xhr.responseType = 'json';
+    xhr.onload = function() {
+      var status = xhr.status;
+      if (status === 200) {
+        callback(null, xhr.response);
+      } else {
+        callback(status, xhr.response);
+      }
+    };
+    xhr.send();
+};
 
 class WindowsCompositor{
     movingElement = null
@@ -53,7 +102,7 @@ class WindowsCompositor{
     */
     catchClick(event){
         switch (true) {
-            case event.target.className == "WindowDragArea":
+            case event.target.className == "TestWindowHeader":
                 this.movingElement = event.target.parentElement.parentElement.parentElement
                 break;
             default:
@@ -71,3 +120,4 @@ class WindowsCompositor{
         element.style.top = posY + "px";
     }
 }
+

resources/wdeUI.css

@@ -0,0 +1,24 @@
+.WindowFrameTopBarButton{   
+    width: 11px;
+    height: 11px;
+    padding: 0%;
+
+    background: #D9D9D9;
+    border: 1px solid #222222;
+    box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
+                -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25),
+                inset 1px 1px 0px #FFFFFF, 
+                inset -1px -1px 0px rgba(0, 0, 0, 0.25);
+
+    /* Inside auto layout */
+
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+}
+
+.WindowFrameTopBarButton:active {
+    background-color: rgba(0, 0, 0, 0.4); /* Green */
+    box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
+                -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25);
+}

routewde/wde.go

@@ -0,0 +1,13 @@
+package routewde
+
+import (
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+)
+
+func Route(route *gin.RouterGroup) {
+	route.GET("/getbasicwindow", func(ctx *gin.Context) {
+		ctx.HTML(http.StatusOK, "basic-window.html", nil)
+	})
+}

websiteapp/personalprops/personalprops.go

@@ -1,39 +1,107 @@
 package personalprops
 
+import (
+	"personalwebsite/websiteapp"
+
+	"github.com/gin-gonic/gin"
+)
+
 type PersonalPropertiesApp struct {
+	manifest websiteapp.ApplicationManifest
 }
 
 func NewPersPropsApp() PersonalPropertiesApp {
-	newApp := PersonalPropertiesApp{}
+	newApp := PersonalPropertiesApp{
+		manifest: websiteapp.ApplicationManifest{
+			AppId:      "personal-properties",
+			WindowName: "About me",
+		},
+	}
 	return newApp
 }
 
-func (p *PersonalPropertiesApp) Render() []Book {
+func (p *PersonalPropertiesApp) GetManifest() websiteapp.ApplicationManifest {
-	books := make([]Book, 0)
+	return p.manifest
-	books = append(books, Book{
+}
-		Title:  "About person:",
+func (p *PersonalPropertiesApp) GetId() string {
-		Author: "General information about me",
+	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",
+	// })
+	allProps := make([][]Prop, 0)
+
+	basicInfo := make([]Prop, 0)
+
+	basicInfo = append(basicInfo, Prop{
+		Key:  "",
+		Prop: "Greg Brzezinski",
 	})
-	books = append(books, Book{
+
-		Title:  "Career:",
+	basicInfo = append(basicInfo, Prop{
-		Author: "Inforamtion about my career",
+		Key:  "",
+		Prop: "Saint-Petersburg",
 	})
-	books = append(books, Book{
+
-		Title:  "TEST:",
+	// careerkeys := make([]Prop, 0)
-		Author: "QQQQQQQ",
+	careerkeys := []Prop{
+		{
+			Key:  "VR lab assistant",
+			Prop: "111",
+		},
+		{
+			Key:  "3d artist",
+			Prop: "qweqwe",
+		},
+		{
+			Key:  "Jr. Techartist",
+			Prop: "qweqwaaae",
+		},
+	}
+	// careerkeys = append(careerkeys, Prop{
+	// 	Key:  "VR lab assistant ",
+	// 	Prop: "ALSK jlkJls kdfgjasdp jk sdf",
+	// })
+	// careerkeys = append(careerkeys, Prop{
+	// 	Key:  "3d artist",
+	// 	Prop: "qweqwe",
+	// })
+	// careerkeys = append(careerkeys, Prop{})
+	testKeys := []Prop{}
+	testKeys = append(testKeys, Prop{
+		Key:  "Urrtt",
+		Prop: "BakaBaka",
 	})
-	books = append(books, Book{
+
-		Title:  "TEST:",
+	allProps = append(allProps, careerkeys, testKeys, testKeys, testKeys)
-		Author: "QQQQQQQ",
+	return gin.H{
-	})
+		"Name":      "Greg Brzezinski",
-	books = append(books, Book{
+		"BasicBio":  "Born 27.09.1998 at Saint-Petersburg",
-		Title:  "TEST:",
+		"BasicInfo": basicInfo,
-		Author: "QQQQQQQ",
+		// "books":  books,
-	})
+		"career":   careerkeys,
-	return books
+		"allprops": allProps,
+	}
 }
 
 type Book struct {
 	Title  string
 	Author string
 }
+
+type Prop struct {
+	Key  string
+	Prop string
+}
+
+// func (p *PersonalPropertiesApp) GetContent(ctx *gin.Context) interface{} {
+
+// }

websiteapp/websiteapp.go

@@ -1,5 +1,45 @@
 package websiteapp
 
+import (
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+)
+
 type WebDEApplication interface {
-	Render()
+	// Render()
+	GetManifest() ApplicationManifest
+	// GEtHtml()
+	GetId() string
+}
+
+type ApplicationManifest struct {
+	AppId      string `json:"appid"`
+	WindowName string `json:"windowname"`
+}
+
+type ApplicationsStorage struct {
+	Apps map[string]WebDEApplication
+}
+
+// func NewApplicationsStorage() *ApplicationsStorage {
+// 	newStorage := ApplicationsStorage{}
+
+// 	return &newStorage
+// }
+
+func Route(route *gin.RouterGroup, aStorage *ApplicationsStorage) {
+	route.GET("/get", func(ctx *gin.Context) {
+		appId := ctx.Query("appid")
+		if appId == "" {
+			ctx.Status(http.StatusBadRequest)
+			return
+		}
+		app, isExist := aStorage.Apps[appId]
+		if !isExist {
+			ctx.Status(http.StatusNoContent)
+			return
+		}
+		ctx.JSON(http.StatusOK, app.GetManifest())
+	})
 }