Almost the end

9 files changed, 297 insertions, 90 deletions

diff --git a/src/consts.ts b/src/consts.ts
index dd1d5d6..f9bd177 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -1,6 +1,13 @@
+import Fridge from "./modules/Fridge";
+
 export let _zi = -2147483648;
-export function zi() {
-  if (_zi + 1 > 2147483647)
+export function zi(f: Fridge) {
+  if (_zi + 1 > 2147483647) {
     _zi = -2147483648;
+    _zi = f.resetZi(_zi);
+  }
   return (_zi++).toString();
 }
+export function setZi(zi: number) {
+  _zi = zi;
+}
diff --git a/src/index.ts b/src/index.ts
index 79c88d2..4666f4c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,8 +2,10 @@ import "Styles/index.css";
 
 async function goToMain() {
   const i = document.getElementsByTagName("input")[0]
-  const res = await (await fetch("http://localhost:8001/getFridge.php?name=" + i.value)).text()
+  if (i.value === '') return;
+  const res = await (await fetch("http://localhost:8001/get-fridge.php?name=" + i.value)).text()
   sessionStorage.fridge = res;
+  sessionStorage.name = i.value;
   location.href = "/main.html"
 }
 declare global {
diff --git a/src/modules/Chit.ts b/src/modules/Chit.ts
index bd11766..7d7169a 100644
--- a/src/modules/Chit.ts
+++ b/src/modules/Chit.ts
@@ -10,65 +10,34 @@ export default class Chit {
   #width: number;
   #height: number;
   #div: HTMLDivElement;
-  #txt: string;
+  #txt = '';
   #fridge: Fridge;
   #wysiwyg: WYSiWYG;
+  #span!: HTMLSpanElement;
 
-  get nCol() { return "lightblue" }
-  get cCol() { return "lightpink" }
+  get nCol() { return "darkblue" }
+  get cCol() { return "#CC00CC" }
 
   constructor(f: Fridge, wysiwyg: WYSiWYG, data?: ChitFromDb) {
+    this.#fridge = f;
+    this.#wysiwyg = wysiwyg;
     if (data) {
       this.#top = data.top;
       this.#left = data.left;
-      this.#txt = data.txt;
       this.#height = data.height;
       this.#width = data.width;
+      this.#div = this.createDiv(data.zi);
+      this.txt = data.txt;
     } else {
       this.#top = 200;
       this.#left = 200;
-      this.#txt = '23';
-      this.#width = 100;
-      this.#height = 100;
+      this.#width = 150;
+      this.#height = 150;
+      this.#div = this.createDiv();
     }
-    this.#div = this.createDiv();
-    this.#fridge = f;
-    this.#wysiwyg = wysiwyg;
   }
 
-  mouseDownH(e: MouseEvent) {
-    e;
-    // this.setzi();
-    const top = e.y
-    const left = e.x
-    this.#div.onmousemove = e => this.move(e, { top, left });
-    this.#div.style.backgroundColor = this.cCol
-    this.#div.style.zIndex = zi()
-    this.isMoving = true;
-  }
-  mouseUpH(e: MouseEvent) {
-    e;
-    // e.preventDefault()
-    this.#div.style.backgroundColor = this.nCol
-    this.#div.onmousemove = () => null;
-    this.#top = parseInt(this.#div.style.top.replace('px', ''))
-    this.#left = parseInt(this.#div.style.left.replace('px', ''))
-    // this.#div.style.zIndex = ""
-    this.isMoving = false;
-  }
-
-  move(e: MouseEvent, coord: { top: number, left: number }) {
-    this.#div.style.top = `${this.#top + e.y - coord.top}px`;
-    this.#div.style.left = `${this.#left + e.x - coord.left}px`;
-    // this.top = this.#div.offsetTop - coord.top
-    // this.left = this.#div.offsetLeft - coord.left
-  }
-  setzi() {
-    this.#fridge.setChitZIAuto();
-    this.#div.style.zIndex = "10"
-  }
-
-  createDiv(): HTMLDivElement {
+  createDiv(z?: number): HTMLDivElement {
     const div = document.createElement("div");
     div.classList.add("chit")
     div.style.top = this.topip;
@@ -77,53 +46,167 @@ export default class Chit {
     div.style.width = this.widthip;
     // div.style.minHeight = "75px"
     // div.style.minWidth = "75px"
-    div.style.zIndex = zi();
+    div.style.zIndex = z != null ? z.toString() : zi(this.#fridge);
     div.style.backgroundColor = this.nCol
 
-    div.innerHTML = `<button class="edit"></button><buttton class="resize"></buttton><buttton class="delete"></buttton>`
+    div.innerHTML = `<button class="edit"></button><buttton class="resize"></buttton><buttton class="delete"></buttton>
+                     <div class="txt"></div>`
     const be = div.children[0] as HTMLButtonElement;
     const bl = div.children[1] as HTMLButtonElement;
     const bd = div.children[2] as HTMLButtonElement;
+    const s = div.children[3] as HTMLSpanElement;
+
+    div.onmousedown = e => this.moveOrResize(e, "mov");
     be.onmousedown = e => this.edit(e);
-    bl.onmousedown = e => this.resize(e);
+    bl.onmousedown = e => this.moveOrResize(e, "res");
     bd.onmousedown = () => this.remove();
+    this.#span = s;
 
-    // div.onmousedown = e => this.mouseDownH(e);
-    div.onmousedown = e => this.mouseDownH(e);
-    div.onmouseup = e => this.mouseUpH(e);    // div.onmouseleave = (e) => this.mouseUpH(e);
-    document.onmouseleave = e => this.mouseUpH(e);    // div.onmouseleave = (e) => this.mouseUpH(e);
     document.body.appendChild(div);
     return div;
   }
 
-  edit(e: MouseEvent) {
-    e.stopPropagation();
-    this.#wysiwyg.show(this)
-  }
-  resize(e: MouseEvent) {
+  moveOrResize(e: MouseEvent, what: "mov" | "res") {
     e.stopPropagation()
     const [sx, sy] = [e.x, e.y]
-    let width: number, height: number
-    this.#div.onmousemove = ee => {
+    let top = this.#top, left = this.#left, width = this.#width, height = this.#height;
+    this.color = this.cCol;
+    this.#fridge.makeTrans(this);
+    this.zi = zi(this.#fridge);
+
+    // this.#div.onmousemove = ee => {
+    document.onmousemove = ee => {
       const [dx, dy] = [sx - ee.x, sy - ee.y]
-      width = this.#width - dx > 75 ? this.#width - dx : 75
-      height = this.#height - dy > 75 ? this.#height - dy : 75
-      console.log(sx, sy, dx, dy, width, height)
-      this.#div.style.width = width + "px"
-      this.#div.style.height = height + "px"
+
+      // console.log(top, left, dy, dx, ee.x === ee.clientX)
+      if (ee.x !== ee.clientX) throw new Error("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")
+
+      if (what === "mov") {
+        top = this.#top - dy;
+        left = this.#left - dx;
+        this.#div.style.top = top + 'px';
+        this.#div.style.left = left + 'px';
+      } else {
+        const m = 150;
+        width = this.#width - dx > m ? this.#width - dx : m
+        height = this.#height - dy > m ? this.#height - dy : m
+        this.#div.style.width = width + "px"
+        this.#div.style.height = height + "px"
+      }
     }
+
     const stopRes = () => {
+      this.top = top
+      this.left = left
       this.width = width
       this.height = height
+
+      this.color = this.nCol;
+      this.save()
+      document.onmousemove = () => null
+      document.onmouseup = () => null
+      document.onmouseleave = () => null
       this.#div.onmousemove = () => null
+      this.#div.onmouseup = () => null;
+      this.#div.onmouseleave = () => null;
+      this.#fridge.unmakeTrans();
+      // document.onmouseleave = () => null;
     }
-    this.#div.onmouseup = stopRes;
+    // this.#div.onmouseup = stopRes;
     // this.#div.onmouseleave = stopRes;
-    document.body.onmouseleave = stopRes;
+    document.onmouseup = stopRes;
+    document.onmouseleave = stopRes;
+
   }
+  edit(e: MouseEvent) {
+    e.stopPropagation();
+    this.#wysiwyg.show(this)
+  }
+  //#region 
+  // movement(e: MouseEvent) {
+  //   // e.stopPropagation()
+  //   const [sx, sy] = [e.x, e.y]
+  //   let top: number, left: number
+  //   this.color = this.cCol;
+  //   this.#fridge.makeTrans(this);
+  //   this.zi = zi(this.#fridge);
+
+  //   // this.#div.onmousemove = ee => {
+  //   document.onmousemove = ee => {
+  //     const [dx, dy] = [sx - ee.x, sy - ee.y]
+  //     top = this.#top - dy;
+  //     left = this.#left - dx;
+  //     console.log(top, left, dy, dx, ee.x === ee.clientX)
+  //     if (ee.x !== ee.clientX) throw new Error("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")
+  //     this.#div.style.top = top.toString() + 'px';
+  //     this.#div.style.left = left.toString() + 'px';
+  //   }
+  //   const stopRes = () => {
+  //     this.#top = top
+  //     this.#left = left
+  //     this.color = this.nCol;
+  //     this.save()
+  //     document.onmousemove = () => null
+  //     document.onmouseup = () => null
+  //     document.onmouseleave = () => null
+  //     this.#div.onmousemove = () => null
+  //     this.#div.onmouseup = () => null;
+  //     this.#div.onmouseleave = () => null;
+  //     this.#fridge.unmakeTrans();
+  //     // document.onmouseleave = () => null;
+  //   }
+  //   // this.#div.onmouseup = stopRes;
+  //   // this.#div.onmouseleave = stopRes;
+  //   document.onmouseup = stopRes;
+  //   document.onmouseleave = stopRes;
+  // }
+
+  // resize(e: MouseEvent) {
+  //   e.stopPropagation()
+  //   const [sx, sy] = [e.x, e.y]
+  //   let width: number, height: number
+  //   this.#fridge.makeTrans(this);
+  //   this.zi = zi(this.#fridge);
+
+  //   // this.#div.onmousemove = ee => {
+  //   document.onmousemove = ee => {
+  //     const [dx, dy] = [sx - ee.x, sy - ee.y]
+  //     width = this.#width - dx > 75 ? this.#width - dx : 75
+  //     height = this.#height - dy > 75 ? this.#height - dy : 75
+  //     // console.log(sx, sy, dx, dy, width, height)
+  //     this.#div.style.width = width + "px"
+  //     this.#div.style.height = height + "px"
+  //   }
+  //   const stopRes = () => {
+  //     this.width = width
+  //     this.height = height
+  //     this.save()
+  //     document.onmousemove = () => null
+  //     this.#div.onmousemove = () => null
+  //     this.#div.onmouseup = () => null;
+  //     this.#div.onmouseleave = () => null;
+  //     this.#fridge.unmakeTrans();
+  //     // document.onmouseleave = () => null;
+  //   }
+  //   this.#div.onmouseup = stopRes;
+  //   // this.#div.onmouseleave = stopRes;
+  //   // this.#div.onmouseleave = stopRes;
+  // }
+  //#endregion
   remove() {
     this.#fridge.removeChit(this);
     this.#div.remove();
+    this.save()
+  }
+  save() {
+    this.#fridge.saveToDb();
+  }
+
+  makeTrans() {
+    this.#div.style.pointerEvents = "none";
+  }
+  unmakeTrans() {
+    this.#div.style.pointerEvents = "";
   }
 
   set top(t: number) {
@@ -142,7 +225,30 @@ export default class Chit {
     this.#height = h;
     this.div.style.height = this.heightip;
   }
+  set color(c: string) {
+    this.#div.style.backgroundColor = c;
+  }
+  set zi(z: string) {
+    this.#div.style.zIndex = z;
+  }
+  set txt(t: string) {
+    this.#txt = t;
+    this.#span.innerHTML = t;
+    this.save();
+  }
 
+  get top() {
+    return this.#top;
+  }
+  get left() {
+    return this.#left;
+  }
+  get width() {
+    return this.#width;
+  }
+  get height() {
+    return this.#height;
+  }
   get topip() {
     return this.#top + "px";
   }
@@ -161,6 +267,12 @@ export default class Chit {
   get txt() {
     return this.#txt;
   }
+  get zi() {
+    return this.#div.style.zIndex;
+  }
+  get bgcolor() {
+    return this.#div.style.backgroundColor;
+  }
 }
 export interface ChitFromDb {
   top: number;
diff --git a/src/modules/Fridge.ts b/src/modules/Fridge.ts
index c12bc53..7137f6d 100644
--- a/src/modules/Fridge.ts
+++ b/src/modules/Fridge.ts
@@ -1,3 +1,4 @@
+import { setZi } from "@/consts";
 import Chit, { ChitFromDb } from "Modules/Chit"
 import WYSiWYG from "./WYSiWYG";
 
@@ -5,50 +6,106 @@ export default class Fridge {
   #chits: Chit[] = [];
   //@ts-expect-error
   #wysiwyg: WYSiWYG;
+  #name: string;
+  #counter!: number;
+  #mileage!: number;
 
   constructor(wysiwyg: WYSiWYG) {
     const f = sessionStorage.fridge;
-    if (f === null) {
+    this.#name = sessionStorage.name;
+    if (f == null || this.#name == null || this.#name.length === 0) {
       location.href = "/"
       return;
     }
+    // sessionStorage.clear()
 
-    const cs = JSON.parse(f) as ChitFromDb[];
-    for (const c of cs) {
-      this.#chits.push(new Chit(this, wysiwyg, c));
+    const fdb = JSON.parse(f) as FridgeFromDb;
+    if (fdb.mileage != null && fdb.cs != null) {
+      this.mileage = fdb.mileage;
+      this.counter = fdb.cs.length;
+      for (const c of fdb.cs) {
+        this.#chits.push(new Chit(this, wysiwyg, c));
+      }
+      if (fdb.cs.length > 0)
+        setZi(Math.max(...fdb.cs.map(c => c.zi)) + 1)
+    } else {
+      this.mileage = 0;
+      this.counter = 0;
     }
 
 
+
     this.#wysiwyg = wysiwyg;
   }
 
-  setChitZIAuto() {
+  #createJson() {
+    const fdb: FridgeFromDb = {};
+    fdb.mileage = this.#mileage;
+    fdb.cs = [];
+    for (const c of this.#chits) {
+      fdb.cs.push({
+        top: c.top,
+        left: c.left,
+        txt: c.txt,
+        width: c.width,
+        height: c.height,
+        zi: parseInt(c.zi),
+      })
+    }
+    return JSON.stringify({ name: this.#name, cs: fdb });
+  }
+  async saveToDb() {
+    const json = this.#createJson();
+    await fetch("http://localhost:8001/save-fridge.php", {
+      method: "POST",
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: json,
+    })
+  }
+
+  resetZi(zi: number) {
     for (const c of this.#chits)
-      c.div.style.zIndex = "auto"
+      c.div.style.zIndex = (zi++).toString()
+
+    return zi;
   }
   removeChit(ch: Chit) {
+    this.counter = this.#counter - 1;
     this.#chits = this.#chits.filter(c => c !== ch);
+    this.saveToDb()
+  }
+  makeTrans(except: Chit) {
+    for (const c of this.#chits.filter(c => c !== except)) {
+      c.makeTrans();
+    }
+  }
+  unmakeTrans() {
+    for (const c of this.#chits) {
+      c.unmakeTrans();
+    }
   }
-  // moveChit(coord: { top: number, left: number }) {
-  //   for (const c of this.#chits) {
-  //     if (c.isMoving) {
-  //       c.move(coord)
-  //     }
-  //   }
-  // }
-  // stopChitMove() {
-  //   for (const c of this.#chits) {
-  //     c.isMoving = false;
-  //     //@ts-expect-error
-  //     c.mouseUpH({ preventDefault: () => null })
-  //   }
-  // }
 
   createChit() {
+    this.counter = this.#counter + 1;
+    this.mileage = this.#mileage + 1;
     this.#chits.push(new Chit(this, this.#wysiwyg))
+    this.saveToDb()
   }
 
   get chits(): Chit[] {
     return this.#chits;
   }
+
+  set mileage(m: number) {
+    this.#mileage = m;
+    (document.querySelector("#mileage") as HTMLSpanElement).innerHTML = m.toString()
+  }
+  set counter(c: number) {
+    this.#counter = c;
+    (document.querySelector("#counter") as HTMLSpanElement).innerHTML = c.toString()
+  }
 }
+export type FridgeFromDb = { cs?: ChitFromDb[], mileage?: number };
diff --git a/src/modules/WYSiWYG.ts b/src/modules/WYSiWYG.ts
index 1161cde..39b627e 100644
--- a/src/modules/WYSiWYG.ts
+++ b/src/modules/WYSiWYG.ts
@@ -8,6 +8,7 @@ export default class WYSiWYG {
   #id = 'tinymce'
   #bSave: HTMLButtonElement
   #bCancel: HTMLButtonElement
+  #whoClicked?: Chit;
 
   constructor() {
     tinymce.init({
@@ -29,7 +30,8 @@ export default class WYSiWYG {
     this.#bCancel.id = "cancel"
     tf.append(this.#bSave, this.#bCancel)
 
-    this.#bSave.onclick = () => this.setContent(this.content + "asd");
+    // this.#bSave.onclick = () => this.setContent(this.content + "asd");
+    this.#bSave.onclick = () => this.hide();
     this.#bCancel.onclick = () => this.hide();
     this.hide()
   }
@@ -38,11 +40,13 @@ export default class WYSiWYG {
     return tinymce.get(this.#id);
   }
   show(c: Chit) {
-    console.log(c.txt)
     this.#tmce.show();
     this.setContent(c.txt)
+    this.#whoClicked = c;
   }
   hide() {
+    if (this.#whoClicked != null)
+      this.#whoClicked.txt = this.content;
     this.#tmce.hide();
   }
   setContent(c: string) {
diff --git a/src/server/getFridge.php b/src/server/get-fridge.php
index 7a61ba8..5ce7616 100644
--- a/src/server/getFridge.php
+++ b/src/server/get-fridge.php
@@ -4,6 +4,6 @@ $n = urlencode($_GET["name"]);
 
 $f = file_get_contents("./fridges/" . $n);
 if ($f === false)
-  echo "[]";
+  echo "{}";
 else
   echo $f;
diff --git a/src/server/save-fridge.php b/src/server/save-fridge.php
new file mode 100644
index 0000000..8de3023
--- /dev/null
+++ b/src/server/save-fridge.php
@@ -0,0 +1,7 @@
+<?php
+header('Access-Control-Allow-Origin: *');
+header('Access-Control-Allow-Headers: *');
+$data = json_decode(file_get_contents("php://input"));
+if ($data === null) exit();
+$n = urlencode($data->name);
+file_put_contents("fridges/" . $n, json_encode($data->cs));
diff --git a/src/styles/main.css b/src/styles/main.css
index 7918a59..3dc2cef 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -10,11 +10,23 @@ body {
   height: 30px;
   cursor: pointer;
 }
+#txts {
+  position: absolute;
+  top: 15;
+  right: 0;
+  font-size: 25px;
+}
 
 .chit {
   border: 1px solid black;
   position: absolute;
 }
+.txt {
+  width: 90%;
+  height: 90%;
+  margin: 5%;
+  overflow: auto;
+}
 .edit {
   position: absolute;
   background-image: url('static/edit.svg');
diff --git a/src/templates/main.html b/src/templates/main.html
index a248ec1..c1540ea 100644
--- a/src/templates/main.html
+++ b/src/templates/main.html
@@ -13,6 +13,12 @@
 </head>
 
 <body>
+  <div id="txts">
+    <span>Counter: <span id="counter"></span></span><br>
+    <span>Mileage: <span id="mileage"></span></span>
+  </div>
+  <span id="counter"></span>
+  <span id="mileage"></span>
   <button id="document-add"></button>
   <div id="tinymce"></div>
 </body>