personal-properties template

main.go

@@ -30,15 +30,14 @@ import (
 func main() {
 	// hostUrl := "http://localhost:8080/"
 	router := gin.New()
-	// router.Use(rateLimit, gin.Recovery())
+
 	router.LoadHTMLGlob("templates/**/*")
-
-	// router.Static("/static", "resources/static")
 	router.Static("/res", "resources")
-	router.GET("/", index)
-	router.GET("/getmockapp", func(ctx *gin.Context) {
 
+	router.GET("/", func(ctx *gin.Context) {
+		ctx.HTML(http.StatusOK, "index.tmpl", gin.H{})
 	})
+
 	persPropsApp := personalprops.NewPersPropsApp()
 	appsStorage := websiteapp.ApplicationsStorage{
 		Apps: map[string]websiteapp.WebDEApplication{},
@@ -46,6 +45,7 @@ func main() {
 	appsStorage.Apps["personal-properties"] = &persPropsApp
 	system := router.Group("system")
 	{
+
 		wde := system.Group("wde")
 		{
 			routewde.Route(wde)
@@ -64,12 +64,10 @@ func main() {
 				switch method {
 				case "getmanifest":
 					ctx.JSON(http.StatusOK, app.GetManifest())
-				case "gethtml":
-					ctx.HTML(http.StatusOK, "resources/"+appId+"/"+appId+".tmpl", nil)
 				case "app.js":
-					ctx.File("resources/applications/" + appId + "/" + appId + ".js")
+					ctx.File("resources/" + appId + "/" + appId + ".js")
 				case "app.css":
-					ctx.File("resources/applications/" + appId + "/" + appId + ".css")
+					ctx.File("resources/" + appId + "/" + appId + ".css")
 				default:
 					ctx.Status(http.StatusBadRequest)
 				}
@@ -87,8 +85,7 @@ func main() {
 		})
 		persPropApp := app.Group("personal-properties")
 		{
-
+			persPropApp.GET("render", func(ctx *gin.Context) {
-			persPropApp.GET("getcontent", func(ctx *gin.Context) {
 				ctx.HTML(http.StatusOK, "personal-properties/app.tmpl", persPropsApp.Render())
 			})
 		}

resources/base.css

@@ -1,10 +1,21 @@
 @font-face{
-    font-family: "Ubuntu-LI";
+    font-family: "Virtue";
-    src:url("./GnuUnifontFull-Pm9P.ttf")
+    src:url("./virtue.ttf");
+    
+
 }
 
+@font-face{
+    font-family: "Virtue";
+    src:url("./virtue.ttf")
+}
+
+
 *{
-    font-family:"Ubuntu-LI";
+    font-family: Verdana, Geneva, sans-serif;
+    font-size: 11px;
+    font-style: normal;
+    font-weight:initial;
 }
 
 body{
@@ -70,20 +81,7 @@ body{
     white-space: nowrap
 }
 
-.WindowDragArea{
+
-    pointer-events: none;
-    /* background-color: antiquewhite; */
-    width: 100%;
-    height: 100%;
-    /* background: repeating-linear-gradient(
-        to bottom,
-        rgb(255, 255, 255) 0px,
-        rgb(255, 255, 255) 1px,
-        #ffffff00 2px,
-        #ffffff00 3px
-    ); */
-    /* box-shadow: 1px 1px ; */
-}
 .ContentFrame{
     box-sizing: border-box;
 
@@ -112,12 +110,14 @@ body{
 .Personal-properties-bio{
     width: 100%;
     height: auto;
+    /* margin-right: -20px; */
 
     /* Auto layout */
     display: flex;
     flex-direction: row;
     align-items: center;
     padding: 0px;
+    margin-right: 20;
     gap:15px;
 }
 
@@ -154,26 +154,17 @@ body{
 
 
 .Personal-properties-prop-header{
+    font-family: "Virtue";
+    letter-spacing: 0.35px;
     /* width: 50px; */
     position:relative;
     display: inline-block;
     max-width: 100%;
     background-color: #DDDDDD;
     /* left: 12px; */
-    right: 30%;
+    right: 39%;
-    top: -12px;
+    top: -9px;
     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{
@@ -184,7 +175,7 @@ body{
     flex-direction: column;
     justify-content: center;
     padding: 0px;
-    gap: 3px;
+    gap: 12px;
 }
 
 .Personal-properties-prop-row{
@@ -195,12 +186,18 @@ body{
     flex-direction: row;
     justify-content: center;
     padding: 0px;
-    gap: 1px;
+    gap: 5px;
 }
 .Personal-properties-prop-key{
+    position: relative;
+    font-family: "Virtue";
+    font-size: 11px;
+    letter-spacing: 0.35px;
     text-align: end;
-    width: 45%;
+    width: 34%;
-    white-space: nowrap
+    white-space: nowrap;
+    top: -1.5px;
+
     /* font-weight: bold; */
 }
 .Personal-properties-prop-values{

resources/personal-properties/personal-properies.css

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

resources/personal-properties/personal-properties.js

@@ -1,37 +1,47 @@
 
 
 class PersonalProperties{
+    appId = "personal-properties"
     /**
     * @param {HTMLElement} appElem
     */
     constructor(appElem){
-        this.appElem = appElem
+        this.appElem = appElem        
-        
     }
 
     Init(){
-        this.appElem.innerHTML = WebDesktopEnvironment.GetBasicWindow()
+        console.log("Init")
-        
+        // this.appElem.innerHTML = WebDesktopEnvironment.GetBasicWindow()
-        let contentFrame = this.appElem.children[0].children[0].children[1]
+        // console.log(this.appElem)
-        fetch("http://localhost:8080/application/personal-properties/getcontent") //TODO Move to wde func
+        // let contentFrame = this.appElem.children[0].children[0].children[1]
+        fetch("http://localhost:8080/application/personal-properties/render") //TODO Move to wde func
         .then((response) => response.text())
         .then((html) => {
-            contentFrame.innerHTML = html
+            let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId)
+            
+            newWindow.innerHTML = html
+
+            // document.getElementById("closeWindowButton").onclick = function jsFunc() {
+            //     console.log("keeek")
+            // }
+
+            let closeButton = newWindow.children[0].children[0].children[0].children[0]
+            // closeButton.onclick = this.CloseWindow("test")
+            closeButton.addEventListener('click', function (params) {
+                WebDesktopEnvironment.CloseWindow(newWindow)
+            })
         })
         .catch((error) => {
             WebDesktopEnvironment.Alert(error);
         });
-        
-        // var link = document.createElement( "link" );
-        // link.href = "http://localhost:8080/system/applications/personal-properties/app.css"
-        // link.type = "text/css";
-        // link.rel = "stylesheet";
-        // link.media = "screen,print";
-        // document.getElementsByTagName( "head" )[0].appendChild(link);
-       
     }
+
+    CloseWindow(id){
+        console.log(id+"Close")
+    }
+    
 }
 
-document.onload = function (params) {
+function reply_click(){
-    console.log("pizda")
+    console.log("QQQQQQQQQQQQQQQQQQQ")
 }

resources/wde.js

@@ -25,10 +25,7 @@ class WebDesktopEnvironment{
     loadApp(appId){
         let newApp = document.createElement("application")
         newApp.setAttribute("id", `application-${appId}`)
-        newApp.style.display = "inline" //TODO Make multi-window support
+
-        newApp.style.position = "absolute"
-        newApp.style.width = "350px"
-        newApp.styleheight = "350px"
         let appElem = document.getElementById("WindowsLayer").appendChild(newApp)
 
 
@@ -42,6 +39,35 @@ class WebDesktopEnvironment{
         }, false)
     }
 
+     /**
+    * @param {string} appId
+    * @param {string} windowName
+    * @returns {HTMLElement}
+    */
+    static CreateNewWindow(appId, windowName) {
+        let appElem = document.getElementById(`application-${appId}`)
+
+        let newWindow = document.createElement("window")
+        newWindow.style.display = "inline" //TODO Make multi-window support
+        newWindow.style.position = "absolute"
+        newWindow.style.width = "350px"
+        newWindow.styleheight = "350px"
+        return appElem.appendChild(newWindow)
+    }
+
+    /**
+    * @param {HTMLElement} window
+    */
+    static CloseWindow(window) {
+        let app = window.parentElement
+        window.remove()
+        // console.log(app.childElementCount)
+        if (app.childElementCount < 2){
+            console.log(app)
+            app.remove()
+        }
+    }
+
     static basicWindow
     /**
     * 
@@ -59,6 +85,10 @@ class WebDesktopEnvironment{
         return this.basicWindow
     }
 
+    /**
+    * 
+    * @param {string} alertText
+    */
     static Alert(alertText){
         console.log(alertText)
     }
@@ -108,6 +138,7 @@ class WindowsCompositor{
         switch (true) {
             case event.target.className == "WindowFrameTopBar":
                 this.movingElement = event.target.parentElement.parentElement.parentElement
+                console.log(this.movingElement)
                 break;
             default:
                 break;

resources/wdeUI.css

@@ -16,8 +16,47 @@
     flex-grow: 0;
 }
 
+.WindowFrameTopBar{
+   
+    /* background-color: aqua; */
+    width: 100%;
+    height: 13px;
+
+    
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 5px;
+    padding: 0px;
+}
+
+.WindowFrameTopBar .WindowFrameTitle{
+    position: relative;
+    top:1px;
+
+    pointer-events: none;
+    white-space: nowrap;
+
+    font-family: "Virtue";
+    letter-spacing: 0.35px;
+ 
+}
+
+
 .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);
+}
+
+
+.WindowDragArea{
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(transparent 0%,white 0%, white 50%, transparent 50%);
+    background-size: 2px 2px;
+    filter: drop-shadow(1px 1px 0px #777777);
 }

templates/base/index.tmpl

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<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>  -->
+    </head>
+    <body>
+        <div id="WindowsLayer"></div>
+        <!-- <div id="TestWindow" style="width: 100px; height: 100px; background-color: darkkhaki; position: absolute;" >
+            <div id="TestWindowHeader" class="WindowDragArea" style="width: 100%;height: 15px; background-color: cornflowerblue;">
+        </div> -->
+    </body>
+</html>

templates/personal-properties/app.tmpl

@@ -1,7 +1,50 @@
 {{ define "personal-properties/app.tmpl" }}
-<html><h1>
+<div id="RootWidget" class="Application" style="width: 350px;height: 450px;" > 
-	{{ .title }}
+    <div id="WindowBorder" class="Frame">
-</h1>
+        <div id="TestWindowHeader" class="WindowFrameTopBar">
-<p>Using posts/index.tmpl</p>
+            <button id="closeWindowButton" class="WindowFrameTopBarButton" ></button>
-</html>
+            <div id="Drag" class="WindowDragArea"></div>
-{{ end }}
+            <div class="WindowFrameTitle">
+                Test Title
+            </div>
+            <div id="Drag" class="WindowDragArea"></div>
+            <!-- <button class="WindowFrameTopBarButton" ></button> -->
+        </div>
+        <div id="ContentFrame" class="ContentFrame">
+			<div class="Personal-properties-bio">
+				<img src="res/img/default-avatar-photo-placeholder-profile-picture-vector.jpg" style="width: 48px;height: 48px;">
+				<div class="Personal-properties-textbio">
+					<div>{{ .Name }}</div>
+					<div>{{ .BasicBio }}</div>
+				</div>
+			</div>
+			{{ range $propIsland := .allprops }}
+				<div id="prop" class="Personal-properties-prop">
+					<div class="Personal-properties-prop-header">
+						{{$propIsland.Header}}:
+					</div>
+					<div class="Personal-properties-prop-content">
+						{{range $prop := $propIsland.Props}}
+						<div class="Personal-properties-prop-row">
+							<div class="Personal-properties-prop-key">{{$prop.Key}}:</div>
+							<div class="Personal-properties-prop-values">
+								{{ range $value := $prop.Values }}
+								<div class="Personal-properties-prop-value">    
+									{{ $value }} 
+								</div>
+								{{ end }}
+							</div>
+						</div>
+					{{ end }}
+					</div>
+				</div>  
+
+
+			{{ end }}
+        </div>
+    </div>
+</div>
+	
+{{ end }}
+
+				

websiteapp/personalprops/personalprops.go

@@ -37,61 +37,111 @@ func (p *PersonalPropertiesApp) Render() gin.H {
 	// 	Title:  "Title 2",
 	// 	Author: "Author 2",
 	// })
-	allProps := make([][]PropElement, 0)
+	allProps := make([]PropIsland, 0)
 
-	basicInfo := make([]PropElement, 0)
+	// careerProps := make([]Prop, 0)
-
+	expertiseIsland := PropIsland{
-	basicInfo = append(basicInfo, PropElement{
+		Header: "Area Of Expertise",
-		Key:    "",
+		Props: []PropElement{{
-		Values: []string{"Greg Brzezinski"},
+			Key: "Programming",
-	})
+			Values: []string{
-
+				"Creating tools and plugins for artists",
-	basicInfo = append(basicInfo, PropElement{
+				"Editor and basic gameplay scripting",
-		Key:    "",
+			},
-		Values: []string{"Saint-Petersburg"},
-	})
-
-	// careerkeys := make([]Prop, 0)
-	careerkeys := []PropElement{
-		{
-			Key:    "VR lab assistant",
-			Values: []string{"February 2019 - March 2020", "Teaching lessons for students in Unreal Engine 4, Unity and Blender editor courses", "Training students for World Skills Russia"},
 		},
-		{
+			{
-			Key:    "3d artist",
+				Key: "Game Art",
-			Values: []string{"March 2020 - June 2020", "Creating 3d assets for VR game"},
+				Values: []string{
-		},
+					"Professional modeling",
-		{
+					"Complete knowledge in CG render theory",
-			Key:    "Jr. Techartist",
+				},
-			Values: []string{"Game content integration and production", "Shader coding", "Optimization asset production in artists pipeline"},
+			},
-		},
-		{
-			Key:    "Techartist",
-			Values: []string{"Game content optimization and production", "Profiling and debugging render pipeline", "Creating in-house tools for pipeline software", "Working process pipeline integration and maintenance", "Linux servers administration"},
 		},
 	}
-	// careerkeys = append(careerkeys, Prop{
+	eduIsland := PropIsland{
-	// 	Key:  "VR lab assistant ",
+		Header: "Education",
-	// 	Prop: "ALSK jlkJls kdfgjasdp jk sdf",
+		Props: []PropElement{
-	// })
+			{
-	// careerkeys = append(careerkeys, Prop{
+				Key: "Gymnasium 526",
-	// 	Key:  "3d artist",
+				Values: []string{
-	// 	Prop: "qweqwe",
+					"2005-2015",
-	// })
+					"Extended natural sciences course",
-	// careerkeys = append(careerkeys, Prop{})
+					"Additional C++, media production and computer graphics courses",
-	testKeys := []PropElement{}
+					"Winner of conference “The future of a strong Russia is in high technology” in programming section",
-	testKeys = append(testKeys, PropElement{
+				},
-		Key:    "Urrtt",
+			},
-		Values: []string{"BakaBaka"},
+			{
-	})
+				Key: "Lyceum 281",
-
+				Values: []string{
-	allProps = append(allProps, careerkeys, testKeys, testKeys, testKeys)
+					"2015-2016",
+					"Extended IT and Physical sciences course",
+				},
+			},
+			{
+				Key: "University",
+				Values: []string{
+					"2017-2019",
+					"Faculty: Info-communication Networks and Systems",
+					"Specialty: Information Security",
+				},
+			},
+		},
+	}
+	careerProps := PropIsland{
+		Header: "Career",
+		Props: []PropElement{
+			{
+				Key:    "VR lab assistant",
+				Values: []string{"February 2019 - March 2020", "Teaching lessons for students in Unreal Engine 4, Unity and Blender editor courses", "Training students for World Skills Russia"},
+			},
+			{
+				Key:    "3d artist",
+				Values: []string{"March 2020 - June 2020", "Creating 3d assets for VR game"},
+			},
+			{
+				Key:    "Jr. Techartist",
+				Values: []string{"Game content integration and production", "Shader coding", "Optimization asset production in artists pipeline"},
+			},
+			{
+				Key:    "Techartist",
+				Values: []string{"Game content optimization and production", "Profiling and debugging render pipeline", "Creating in-house tools for pipeline software", "Working process pipeline integration and maintenance", "Linux servers administration"},
+			},
+		},
+	}
+	volunteerProps := PropIsland{
+		Header: "Volunteer Experience",
+		Props: []PropElement{
+			{
+				Key: "Metrostroi Mod",
+				Values: []string{
+					"Help unite fragmented community on one social platform",
+					"Worked on social elements of official site, create ranking",
+					"took a part on creating ranking system for players",
+					"Creating models and maps for Steam Workshop"},
+			},
+			{
+				Key: "Age of Silence",
+				Values: []string{
+					"Start as tech-artist, create naming system in big ue4 project",
+					"Promoted to chief of 3d Department",
+					"Project win Unreal Day 2019",
+				},
+			},
+		},
+	}
+	// testKeys := PropIsland{
+	// 	Header: "Test",
+	// 	Props: []PropElement{{
+	// 		Key:    "Urtt",
+	// 		Values: []string{"BakaBaka"},
+	// 	}},
+	// }
+	allProps = append(allProps, expertiseIsland, careerProps, eduIsland, volunteerProps)
 	return gin.H{
-		"Name":      "Greg Brzezinski",
+		"Name":     "Greg Brzezinski",
-		"BasicBio":  "Born 27.09.1998 at Saint-Petersburg",
+		"BasicBio": "Born 27.09.1998 at Saint-Petersburg",
-		"BasicInfo": basicInfo,
+		// "BasicInfo": basicInfo,
-		// "books":  books,
+		// "career":    careerProps,
-		"career":   careerkeys,
 		"allprops": allProps,
 	}
 }
@@ -106,6 +156,11 @@ type PropElement struct {
 	Values []string
 }
 
+type PropIsland struct {
+	Header string
+	Props  []PropElement
+}
+
 // func (p *PersonalPropertiesApp) GetContent(ctx *gin.Context) interface{} {
 
 // }