personal-properties template
This commit is contained in:
parent
fd966fc017
commit
04552cc3a9
19
main.go
19
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("getcontent", func(ctx *gin.Context) {
|
||||
persPropApp.GET("render", func(ctx *gin.Context) {
|
||||
ctx.HTML(http.StatusOK, "personal-properties/app.tmpl", persPropsApp.Render())
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,21 @@
|
|||
@font-face{
|
||||
font-family: "Ubuntu-LI";
|
||||
src:url("./GnuUnifontFull-Pm9P.ttf")
|
||||
font-family: "Virtue";
|
||||
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%;
|
||||
top: -12px;
|
||||
right: 39%;
|
||||
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%;
|
||||
white-space: nowrap
|
||||
width: 34%;
|
||||
white-space: nowrap;
|
||||
top: -1.5px;
|
||||
|
||||
/* font-weight: bold; */
|
||||
}
|
||||
.Personal-properties-prop-values{
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.Pizda{
|
||||
background-color: red;
|
||||
}
|
||||
|
|
@ -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()
|
||||
|
||||
let contentFrame = this.appElem.children[0].children[0].children[1]
|
||||
fetch("http://localhost:8080/application/personal-properties/getcontent") //TODO Move to wde func
|
||||
console.log("Init")
|
||||
// this.appElem.innerHTML = WebDesktopEnvironment.GetBasicWindow()
|
||||
// console.log(this.appElem)
|
||||
// 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) {
|
||||
console.log("pizda")
|
||||
function reply_click(){
|
||||
console.log("QQQQQQQQQQQQQQQQQQQ")
|
||||
}
|
||||
BIN
resources/virtue.ttf
(Stored with Git LFS)
Normal file
BIN
resources/virtue.ttf
(Stored with Git LFS)
Normal file
Binary file not shown.
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
18
templates/base/index.tmpl
Normal file
18
templates/base/index.tmpl
Normal file
|
|
@ -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>
|
||||
|
|
@ -1,7 +1,50 @@
|
|||
{{ define "personal-properties/app.tmpl" }}
|
||||
<html><h1>
|
||||
{{ .title }}
|
||||
</h1>
|
||||
<p>Using posts/index.tmpl</p>
|
||||
</html>
|
||||
{{ end }}
|
||||
<div id="RootWidget" class="Application" style="width: 350px;height: 450px;" >
|
||||
<div id="WindowBorder" class="Frame">
|
||||
<div id="TestWindowHeader" class="WindowFrameTopBar">
|
||||
<button id="closeWindowButton" 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 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 }}
|
||||
|
||||
|
||||
|
|
@ -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)
|
||||
|
||||
basicInfo = append(basicInfo, PropElement{
|
||||
Key: "",
|
||||
Values: []string{"Greg Brzezinski"},
|
||||
})
|
||||
|
||||
basicInfo = append(basicInfo, PropElement{
|
||||
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"},
|
||||
// careerProps := make([]Prop, 0)
|
||||
expertiseIsland := PropIsland{
|
||||
Header: "Area Of Expertise",
|
||||
Props: []PropElement{{
|
||||
Key: "Programming",
|
||||
Values: []string{
|
||||
"Creating tools and plugins for artists",
|
||||
"Editor and basic gameplay scripting",
|
||||
},
|
||||
},
|
||||
{
|
||||
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"},
|
||||
{
|
||||
Key: "Game Art",
|
||||
Values: []string{
|
||||
"Professional modeling",
|
||||
"Complete knowledge in CG render theory",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
// 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 := []PropElement{}
|
||||
testKeys = append(testKeys, PropElement{
|
||||
Key: "Urrtt",
|
||||
Values: []string{"BakaBaka"},
|
||||
})
|
||||
|
||||
allProps = append(allProps, careerkeys, testKeys, testKeys, testKeys)
|
||||
eduIsland := PropIsland{
|
||||
Header: "Education",
|
||||
Props: []PropElement{
|
||||
{
|
||||
Key: "Gymnasium 526",
|
||||
Values: []string{
|
||||
"2005-2015",
|
||||
"Extended natural sciences course",
|
||||
"Additional C++, media production and computer graphics courses",
|
||||
"Winner of conference “The future of a strong Russia is in high technology” in programming section",
|
||||
},
|
||||
},
|
||||
{
|
||||
Key: "Lyceum 281",
|
||||
Values: []string{
|
||||
"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",
|
||||
"BasicBio": "Born 27.09.1998 at Saint-Petersburg",
|
||||
"BasicInfo": basicInfo,
|
||||
// "books": books,
|
||||
"career": careerkeys,
|
||||
"Name": "Greg Brzezinski",
|
||||
"BasicBio": "Born 27.09.1998 at Saint-Petersburg",
|
||||
// "BasicInfo": basicInfo,
|
||||
// "career": careerProps,
|
||||
"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{} {
|
||||
|
||||
// }
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user