WIP

index.html

@@ -93,6 +93,10 @@
       padding: 20px;
     }
 
+    .postImage {
+      width:100%;
+    }
+
     #log {
       font-family: monospace;
     }
@@ -104,6 +108,11 @@
     a {
       color: rgb(29, 155, 240);
     }
+
+    #log {
+      margin-bottom: 20px;
+      height:150px;
+    }
   </style>
 
 </head>
@@ -115,7 +124,7 @@
   <div class="flex-container">
     <div class="content">
       <div id="status"></div>
-      <div id="log" style="margin-bottom: 20px; height:100px;"></div>
+      <div id="log"></div>
       <input type="button" value="font1" id="button_font1" />
       <input type="button" value="font2" id="button_font2" />
       

main.go

@@ -52,7 +52,7 @@ func (lh *LoggingHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 
 func main() {
 	dir := "./"
-	port := 9000
+	port := 80
 
 	addr := ":" + strconv.Itoa(port)
 	log.Printf("Starting server on %s", addr)

package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  }
+}

src/db.ts

@@ -78,6 +78,9 @@ export async function addDataArray(userID: string, array: any[]): Promise<void>
         const store = transaction.objectStore(storeName);
 
         let count = 0;
+
+        array.reverse();
+
         for (let data of array) {
             const addRequest = store.add(data);
             addRequest.onsuccess = (e: Event) => {

src/main.ts

@@ -1,5 +1,6 @@
 import { openDatabase, getData, addData, addDataArray, getAllData } from "./db.js"
 
+declare let marked:any;
 // let posts:any;
 // let keyBase = "dandelion_posts_v1_"
 // let key:string = "";
@@ -14,15 +15,36 @@ interface PostTimestamp {
 }
 
 class Post {
-  constructor(author: string, text: string, post_timestamp: PostTimestamp, format = null) {
+  post_timestamp:PostTimestamp;
-    post_timestamp = post_timestamp;
+  author:string;
-    author = author;
+  author_id:string;
-    text = text;
+  text:string;
-    format = format;
+  // format
+  constructor(author: string, author_id:string, text: string, post_timestamp: PostTimestamp, format = null) {
+    this.post_timestamp = post_timestamp;
+    this.author = author;
+    this.author_id = author_id;
+    this.text = text;
+    // this.format = format;
   }
 }
 
+function timestampToString(t:PostTimestamp) {
 
+return `${t.year}/${t.month}/${t.day}-${t.hour}:${t.minute}:${t.second}`
+}
+
+function getCurrentTimestamp() {
+  let date = new Date();
+  return  {
+    year: date.getFullYear(),
+    month: date.getMonth()+1,
+    day: date.getDate(),
+    hour: date.getHours(),
+    minute: date.getMinutes(),
+    second: date.getSeconds(),
+  };
+}
 
 function uuidv4() {
   return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c: any) =>
@@ -33,7 +55,7 @@ function uuidv4() {
 let logLines: string[] = [];
 let logLength = 10;
 function log(message: string) {
-  logLines.push(`${message}`);
+  logLines.push(`${new Date().toLocaleTimeString()}:${message}`);
   if (logLines.length > 10) {
     logLines = logLines.slice(logLines.length - logLength);
   }
@@ -158,10 +180,10 @@ async function createTestData3(userID: string) {
   return posts;
 }
 
-function post(key: string, posts: { author: any; text: any; image: any; }[], author: any, text: any, image: any) {
+// function post(key: string, posts: { author: any; text: any; image: any; }[], author: any, text: any, image: any) {
-  posts.push({ author: author, text: text, image: image });
+//   posts.push({ author: author, text: text, image: image });
-  localStorage.setItem(key, JSON.stringify(posts));
+//   localStorage.setItem(key, JSON.stringify(posts));
-}
+// }
 
 async function registerServiceWorker() {
   if (!("serviceWorker" in navigator)) {
@@ -186,13 +208,14 @@ async function registerServiceWorker() {
 }
 
 function addPost(userID: string, posts: Post[], postText: string) {
-  let post: Post = {
+  if ((typeof postText !== "string") || postText.length === 0) {
-    author: `bobbydigitales`,
+    log ("Not posting an empty string...")
-    text: postText,
+    return;
-  };
+  }
 
+  let post = new Post(`bobbydigitales`, userID, postText, getCurrentTimestamp());
 
-  posts.unshift(post);
+  posts.push(post);
   // localStorage.setItem(key, JSON.stringify(posts));
   addData(userID, post)
 
@@ -288,7 +311,7 @@ function initButtons(userID: string, posts: Post[]) {
 async function loadPosts(userID: string) {
  
   timerStart();
-  let posts = await getData(userID, 1, 500);
+  let posts = await getData(userID, 1, 1000);
   
   if (posts.length > 0) {
     log(`Loaded ${posts.length} posts in ${timerDelta().toFixed(2)}ms`);
@@ -312,7 +335,7 @@ async function loadPosts(userID: string) {
   // log("Finished!");
 
 
-  return await getData(userID, 1, 100);
+  return await getData(userID, 1, 1000);
   
 
   // debugger;
@@ -372,16 +395,16 @@ async function main() {
     console.log(`Persisted storage granted: ${isPersisted}`);
   }
 
-  let websocket = connectWebsocket(userID);
-  initOffline();
-  initButtons(userID, posts);
-
   // let main = await fetch("/main.js");
   // let code = await main.text();
   //   console.log(code);
   //   registration.active.postMessage({type:"updateMain", code:code});
 
   posts = await loadPosts(userID);
+
+  let websocket = connectWebsocket(userID);
+  initOffline();
+  initButtons(userID, posts);
   // debugger;
 
   timerStart();
@@ -401,17 +424,31 @@ function render(posts: Post[]) {
   }
   contentDiv.innerHTML = "";
   let count = 0;
-  for (const postData of posts) {
+  
+
+  for (let i=posts.length -1; i>0; i--) {
+    let postData = posts[i];
+
     let post = renderPost(postData);
 
     fragment.appendChild(post);
-
     count++;
-    if (count > 500) {
+    // if (count > 500) {
-      break;
+    //   break;
-    }
+    // }
   }
 
+  // for (const postData of posts) {
+    // let post = renderPost(postData);
+
+    // fragment.appendChild(post);
+
+    // count++;
+    // if (count > 500) {
+    //   break;
+    // }
+  // }
+
   if (!contentDiv) {
     throw new Error("Couldn't get content div!");
   }
@@ -426,12 +463,15 @@ function renderPost(post: Post) {
   }
   let containerDiv = document.createElement("div");
   let textDiv = document.createElement("div");
+  let timestampDiv = document.createElement("div");
   let hr = document.createElement("hr");
 
-  // @ts-ignore
+  
   textDiv.innerHTML = marked.parse(post.text);
+  timestampDiv.innerText = timestampToString(post.post_timestamp);
   containerDiv.appendChild(hr);
   containerDiv.appendChild(textDiv);
+  containerDiv.appendChild(timestampDiv);
 
   if (!("image" in post && post.image)) {
     return containerDiv;
@@ -439,6 +479,7 @@ function renderPost(post: Post) {
 
   let image = document.createElement("img");
   image.src = image.src = "data:image/png;base64," + post.image;
+  image.className = "postImage";
 
   containerDiv.appendChild(image);
   return containerDiv;