Some frontend and file fetch from os

src/mdemory-app/app.go

@@ -3,6 +3,8 @@ package main
 import (
 	"context"
 	"fmt"
+	"os"
+	"regexp"
 )
 
 // App struct
@@ -25,3 +27,31 @@ func (a *App) startup(ctx context.Context) {
 func (a *App) Greet(name string) string {
 	return fmt.Sprintf("Hello %s, It's show time!", name)
 }
+
+type File struct{
+	Name string;
+	IsDir bool;
+}
+
+// Greet returns a greeting for the given name
+func (a *App) GetRepoFiles() []File {
+	dirPath := "/home/jorenchik/Code/mdemory/memorybase/"
+	dirEntries, err := os.ReadDir(dirPath)
+	if (err != nil) {
+		return []File{}
+	}
+	files := []File{}
+	exp, err := regexp.Compile(".+\\.mdem")
+	for _, el := range dirEntries {
+		if (err != nil) {
+			continue
+		}
+		if (el.IsDir() || exp.Match([]byte(el.Name()))) {
+			file := File{}
+			file.Name = el.Name()
+			file.IsDir = el.IsDir()
+			files = append(files, file)
+		}
+	}
+	return files 
+}

src/mdemory-app/frontend/index.html

@@ -9,39 +9,54 @@
 <div id="app">
 	<div class="main-layout">
 		<div>
-			<h3>Memorybase</h3>
-			<div class="deck-list">
-				<a href="#">
-					<div class="deck">
-						<span>&gt;</span>
-						<span>math</span>
+			<h3>memorybase</h3>
+			<div class="file-menus">
+				<h4 class="sidebar-heading">mdems</h4>
+				<div>
+					<div id="deck-list" class="deck-list">
+						<div class="mbase-actions">
+							<input class="repo-input" type="text" name="file" value="">	
+							<a id="reload-files" href="#">
+								Reload
+							</a>
+						</div>
+						<!--<a class="deck-link" href="#">-->
+						<!--	<div class="deck">-->
+						<!--		<span>&gt;</span>-->
+						<!--		<span>math</span>-->
+						<!--	</div>-->
+						<!--</a>-->
+						<!--<a class="deck-link" href="#">-->
+						<!--	<div class="deck">-->
+						<!--		cpp-->
+						<!--	</div>-->
+						<!--</a>-->
 					</div>
-				</a>
-				<a href="#">
-					<div class="deck">
-						<span>&gt;</span>
-						<span>2nd_semester</span>
+				</div>
+				<div>
+					<h4 class="sidebar-heading">decks</h4>
+					<div class="deck-list">
+						<a class="deck-link" href="#">
+							<div class="deck">
+								cpp
+							</div>
+						</a>
+						<a class="deck-link" href="#">
+							<div class="deck">
+								python
+							</div>
+						</a>
+						<a class="deck-link" href="#">
+							<div class="deck">
+								tikli
+							</div>
+						</a>
 					</div>
-				</a>
-				<a href="#">
-					<div class="deck">
-						python
-					</div>
-				</a>
-				<a href="#">
-					<div class="deck">
-						combinatorics
-					</div>
-				</a>
-				<a href="#">
-					<div class="deck">
-						cpp
-					</div>
-				</a>
+				</div>
 			</div>
 		</div>
 		<div>
-			<h2>countries: Flashcards</h2>	
+			<h2>flashcards: countries</h2>	
 			<div class="deck-listing">
 				<div class="flashcard">
 					<span>&gt;</span>

src/mdemory-app/frontend/src/app.css

@@ -10,7 +10,7 @@
 }
 
 .main-layout .deck-list {
-	padding: 1rem;
+	padding: .5rem 1rem;
 	display: flex;
 	flex-direction: column;
 	/*gap: .5rem;*/
@@ -60,3 +60,33 @@ h1, h2, h3, h4 {
 	margin-left: 15px;
 }
 
+.repo-input {
+	width: 99%;
+	height: 25px;
+	min-width: 0;
+}
+
+.mbase-actions {
+	display: flex;
+	align-items: center;
+	gap: .5rem;
+	margin-bottom: 1rem;
+}
+
+.mbase-actions a {
+	font-size: .8rem;
+	display: block;
+}
+
+.sidebar-heading {
+	font-size: .9rem;
+	display: flex;
+	margin: 0;
+	padding: 0 1rem;
+}
+
+
+.file-menus > div {
+	margin-bottom: 1.5rem;
+
+}

src/mdemory-app/frontend/src/main.ts

@@ -1,40 +1,65 @@
 import './style.css';
 import './app.css';
 
-import logo from './assets/images/logo-universal.png';
-import {Greet} from '../wailsjs/go/main/App';
+import {GetRepoFiles} from '../wailsjs/go/main/App';
+import {main} from '../wailsjs/go/models';
 
-// Setup the greet function
-window.greet = function () {
-    // Get name
-    let name = nameElement!.value;
+interface DeckFile {
+	Name: string;
+	IsDir: boolean;
+}
 
-    // Check if the input is empty
-    if (name === "") return;
+function fetchFiles() {
+	GetRepoFiles().then((result: main.File[]) => {
+		const files: DeckFile[] = result as DeckFile[] 
+		setDecklistFiles(files)
+	});
+}
+fetchFiles()
 
-    // Call App.Greet(name)
-    try {
-        Greet(name)
-            .then((result) => {
-                // Update result with data back from App.Greet()
-                resultElement!.innerText = result;
-            })
-            .catch((err) => {
-                console.error(err);
-            });
-    } catch (err) {
-        console.error(err);
-    }
-};
+let decklist: Element | null = document.querySelector("#deck-list");
+function setDecklistFiles(files: DeckFile[]) {
+	if (decklist) {
+		let deckFileAnchors = decklist.querySelectorAll(".deck-link")
+		deckFileAnchors.forEach(i => {
+			i.remove();
+		});
+		for (let i = 0; i < files.length; i++) {
+			let element = document.createElement('a');
+			let angleHtml = ''
+			if (files[i].IsDir) {
+				angleHtml = "<span angle='true'>></span>"
+			}
+			element.setAttribute("href", "#")
+			element.setAttribute("class", "deck-link")
+			element.innerHTML = `
+				<div class="deck">
+					${ angleHtml }
+					${files[i].Name}
+				</div>
+			`
+			decklist.appendChild(element)
+			if (files[i].IsDir) {
+				let angle: HTMLElement | null = element.querySelector("[angle='true']")
+				element.addEventListener("click", _clickable => {
+					let style: CSSStyleDeclaration | undefined = angle?.style
+					if (style) {
+						if (style["rotate"] == "90deg") {
+							style["rotate"] = "";
+						} else {
+							style["rotate"] = "90deg";
+						}
+					}
+				})
+			}
+		}
+	}
+}
 
-
-//document.querySelector('#app')!.innerHTML = `
-//`;
-(document.getElementById('logo') as HTMLImageElement).src = logo;
-
-let nameElement = (document.getElementById("name") as HTMLInputElement);
-nameElement.focus();
-let resultElement = document.getElementById("result");
+let btnReload: Element | null = document.querySelector("#reload-files");
+btnReload?.addEventListener("click", _e => {
+	fetchFiles();
+})
 
 declare global {
     interface Window {

src/mdemory-app/frontend/wailsjs/go/main/App.d.ts

@@ -1,4 +1,7 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
+import {main} from '../models';
+
+export function GetRepoFiles():Promise<Array<main.File>>;
 
 export function Greet(arg1:string):Promise<string>;

src/mdemory-app/frontend/wailsjs/go/main/App.js

@@ -2,6 +2,10 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+export function GetRepoFiles() {
+  return window['go']['main']['App']['GetRepoFiles']();
+}
+
 export function Greet(arg1) {
   return window['go']['main']['App']['Greet'](arg1);
 }

src/mdemory-app/frontend/wailsjs/go/models.ts

@@ -0,0 +1,17 @@
+export namespace main {
+	
+	export class File {
+	
+	
+	    static createFrom(source: any = {}) {
+	        return new File(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	
+	    }
+	}
+
+}
+