Init blog-viewer

main.go

@@ -5,6 +5,7 @@ import (
 	"net/http"
 	"personalwebsite/routewde"
 	"personalwebsite/websiteapp"
+	"personalwebsite/websiteapp/blogviewer"
 	"personalwebsite/websiteapp/finder"
 	imgviewer "personalwebsite/websiteapp/img-viewer"
 	"personalwebsite/websiteapp/personalprops"
@@ -12,22 +13,6 @@ import (
 	"github.com/gin-gonic/gin"
 )
 
-// func main() {
-// 	router := gin.Default()
-// 	router.LoadHTMLGlob("templates/**/*")
-// 	router.GET("/posts/index", func(c *gin.Context) {
-// 		c.HTML(http.StatusOK, "posts/index.tmpl", gin.H{
-// 			"title": "Posts",
-// 		})
-// 	})
-// 	router.GET("/users/index", func(c *gin.Context) {
-// 		c.HTML(http.StatusOK, "users/index.tmpl", gin.H{
-// 			"title": "Users",
-// 		})
-// 	})
-// 	router.Run(":8080")
-// }
-
 func main() {
 	router := gin.New()
 
@@ -41,12 +26,14 @@ func main() {
 	persPropsApp := personalprops.NewPersPropsApp()
 	finderApp := finder.FinerApplication{}
 	imgViewerApp := imgviewer.NewImgViewerApp()
+	blogViewerApp := blogviewer.NewBlogViewerApp()
 	appsStorage := websiteapp.ApplicationsStorage{
 		Apps: map[string]websiteapp.WebDEApplication{},
 	}
 	appsStorage.Apps["personal-properties"] = &persPropsApp
 	appsStorage.Apps["finder"] = &finderApp
 	appsStorage.Apps["img-viewer"] = &imgViewerApp
+	appsStorage.Apps["blog-viewer"] = blogViewerApp
 	system := router.Group("system")
 	{
 
@@ -124,6 +111,19 @@ func main() {
 
 			})
 		}
+		blogViewerRoute := app.Group("blog-viewer")
+		{
+			blogViewerRoute.GET("render", func(ctx *gin.Context) {
+				isMobileParam := ctx.Query("isMobile")
+				isMobile := isMobileParam == "true"
+				if isMobile {
+					ctx.HTML(http.StatusOK, "blog-viewer/mobile-app.tmpl", blogViewerApp.Render(isMobile))
+				} else {
+					ctx.HTML(http.StatusOK, "blog-viewer/app.tmpl", blogViewerApp.Render(isMobile))
+				}
+
+			})
+		}
 	}
 	router.GET("/test", func(ctx *gin.Context) {
 		ctx.HTML(200, "kek/kek.tmpl", gin.H{})

resources/mobile-wdeUI.css

@@ -3,6 +3,7 @@
     height: 100%;
 
     background: #CCCCCC;
+    /* background: #9999CC; */
 
     /* Auto layout */
     display: flex;

resources/sys/blog-viewer/blog-viewer.css

@@ -0,0 +1,25 @@
+.blog-viewer{
+    background-color: #DDDDDD;
+    width: 100%;
+    height: 100%;
+
+    overflow: scroll;
+
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 50px;
+    row-gap: 20px;
+}
+
+.blog-viewer .header{
+    font-size: x-large;
+    padding: 15px;
+}
+
+.blog-viewer .plain-text{
+    padding: 0px 20px 0px 20px;
+
+}

resources/sys/blog-viewer/blog-viewer.js

@@ -0,0 +1,50 @@
+class BlogViewer{
+    appId = "blog-viewer"
+    constructor(){
+    }
+
+    /**
+    * @param {string} path
+    */
+    NewWindow(path){
+        fetch(`${window.location.origin}/application/${this.appId}/render?` + new URLSearchParams({
+            isMobile: WebDesktopEnvironment.isMobile,
+        })) 
+        .then((response) => response.text())
+        .then((html) => {
+            let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 500, 350 )    
+            newWindow.innerHTML = html
+            
+            // let fileView = new FileView("/kek", newWindow.querySelector(".FileTileView"), Finder.Click)
+            if (!WebDesktopEnvironment.isMobile){
+                // let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])// TODO to querry selector
+                newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
+                    WebDesktopEnvironment.CloseWindow(newWindow)
+                })
+            }
+        })
+        .catch((error) => {
+            WebDesktopEnvironment.Alert(error);
+        })
+    }
+
+    /**
+    * @param {MouseEvent} event
+    * @param {string} path
+    */
+    static Click(event, path){
+        let fileType = event.target.getAttribute("fileType")
+        switch (fileType) {
+            case "app":
+                //TODO get real id
+                WebDesktopEnvironment.Open("personal-properties", [])
+                break;
+            case "img":
+                WebDesktopEnvironment.Open("img-viewer", ["pizda"])
+                break;
+            default:
+                console.log("Unsupported file type")
+                break;
+        }
+    }
+}

resources/wde.js

@@ -4,6 +4,8 @@ document.addEventListener('DOMContentLoaded', function() {
     if (!WebDesktopEnvironment.isMobile){
         WebDesktopEnvironment.Open("finder", ["kek"])
         WebDesktopEnvironment.Open("personal-properties", ["kek"])
+    } else {
+        WebDesktopEnvironment.Open("blog-viewer", ["kek"])
     }
     
     
@@ -38,6 +40,10 @@ class WebDesktopEnvironment{
                         //TODO Do not allow launch second instance
                         WebDesktopEnvironment.Open("personal-properties", [])
                     })
+                    mobileDesktop.querySelector('#mobile-desktop-blog').addEventListener('click', (event) => {
+                        //TODO Do not allow launch second instance
+                        WebDesktopEnvironment.Open("blog-viewer", ['main-page'])
+                    })
                     mobileDesktop.querySelector('#mobile-dekstop-close').addEventListener('click', (event) => {
                         // console.log('close')
                         WebDesktopEnvironment.CloseFocusedWindow()
@@ -89,6 +95,11 @@ class WebDesktopEnvironment{
                     this.Applications[appId] = newImgViewer
                     func()
                     return newImgViewer
+                case "blog-viewer":
+                    let newBlogViewer = new BlogViewer()
+                    this.Applications[appId] = newBlogViewer
+                    func()
+                    return newBlogViewer
                 default:
                     break;
             }

templates/base/index.tmpl

@@ -8,6 +8,7 @@
         <link rel="stylesheet" href="/res/sys/wde/simple-scrollbar.css">
         <link rel="stylesheet" href="/res/sys/personal-properties/personal-properies.css">
         <link rel="stylesheet" href="/res/sys/img-viewer/img-viewer.css">
+        <link rel="stylesheet" href="/res/sys/blog-viewer/blog-viewer.css">
         <script src="/res/sys/wde/wde-scrollbar.js"></script>
         <script src="/res/sys/wde/file-view.js"></script>
         <script src="res/wde.js"></script>

templates/base/mobile-desktop.tmpl

@@ -11,9 +11,9 @@
             <div class="FileTileIcon NoClick" style="background-image: url('./res/sys/wde/icons/about-me.png');"></div>
             <div class="FileTileTitle NoClick">About Me</div>
         </div>
-        <div id="Home" class="FileTile">
+        <div id="mobile-desktop-blog" class="FileTile">
             <div class="FileTileIcon NoClick" style="background-image: url('./res/sys/wde/icons/desktop.png');"></div>
-            <div class="FileTileTitle NoClick">Home</div>
+            <div class="FileTileTitle NoClick">Blog</div>
         </div>
         <div id="mobile-dekstop-close" class="FileTile">
             <div class="FileTileIcon NoClick" style="background-image: url('./res/sys/wde/icons/trash.png');"></div>

templates/blog-viewer/app.tmpl

@@ -0,0 +1,18 @@
+{{ define "blog-viewer/app.tmpl" }}
+    <div id="TestWindowHeader" class="WindowFrameTopBar">
+        <button id="closeWindowButton" class="WindowFrameTopBarButton" title="Close Window"></button>
+        <div id="Drag" class="WindowDragArea"></div>
+        <div class="WindowFrameTitle">
+            Files
+        </div>
+        <div id="Drag" class="WindowDragArea"></div>
+    </div>
+    <div class="ContentBorder">
+        <div class="FileTileView">
+
+        </div>
+        {{template "wde-widgets/scrollbar.tmpl" .}}
+    </div>
+{{ end }}
+
+				

templates/blog-viewer/mobile-app.tmpl

@@ -0,0 +1,16 @@
+{{ define "blog-viewer/mobile-app.tmpl" }}
+    <div class="blog-viewer">
+        <div class="header">
+            Test header
+        </div>
+        {{ range $block := .blocks }}
+        <div class="{{$block.BlockType}}">
+            {{ range $data := $block.Data }}
+            {{$data}}
+            {{ end }}            
+        </div>
+        {{ end }}
+    </div>
+{{ end }}
+
+				

websiteapp/blogviewer/blogviewer.go

@@ -0,0 +1,57 @@
+package blogviewer
+
+import (
+	"personalwebsite/websiteapp"
+
+	"github.com/gin-gonic/gin"
+)
+
+type BlogViewerApplication struct {
+	manifest websiteapp.ApplicationManifest
+}
+
+func NewBlogViewerApp() *BlogViewerApplication {
+	return &BlogViewerApplication{
+		manifest: websiteapp.ApplicationManifest{
+			AppId:      "blog-viewer",
+			WindowName: "",
+		},
+	}
+}
+
+func (b *BlogViewerApplication) GetManifest() websiteapp.ApplicationManifest {
+	return b.manifest
+}
+func (b *BlogViewerApplication) GetId() string {
+	return b.manifest.AppId
+}
+
+func (b *BlogViewerApplication) Render(isMobile bool) gin.H {
+	mockBlocks := []Block{
+		{
+			BlockType: "plain-text",
+			Data:      []string{"qwerty qwerty werty", "oiposi sdfsp sdfip"},
+		},
+		{
+			BlockType: "plain-text",
+			Data:      []string{"perpoer", "kekekeke"},
+		},
+		{
+			BlockType: "plain-text",
+			Data:      []string{"perpoer", "kekekeke"},
+		},
+		{
+			BlockType: "plain-text",
+			Data:      []string{"perpoer", "kekekeke"},
+		},
+	}
+	return gin.H{
+		"header": "AAAAAA Header",
+		"blocks": mockBlocks,
+	}
+}
+
+type Block struct {
+	BlockType string
+	Data      []string
+}