From 27075885e95bd0efc062920685e04287feb4b556 Mon Sep 17 00:00:00 2001 From: Maksymilian Jopek Date: Sun, 31 Oct 2021 14:31:29 +0100 Subject: Almost the end --- src/consts.ts | 11 ++- src/index.ts | 4 +- src/modules/Chit.ts | 240 +++++++++++++++++++++++++++++++++------------ src/modules/Fridge.ts | 97 ++++++++++++++---- src/modules/WYSiWYG.ts | 8 +- src/server/get-fridge.php | 9 ++ src/server/getFridge.php | 9 -- src/server/save-fridge.php | 7 ++ src/styles/main.css | 12 +++ src/templates/main.html | 6 ++ 10 files changed, 305 insertions(+), 98 deletions(-) create mode 100644 src/server/get-fridge.php delete mode 100644 src/server/getFridge.php create mode 100644 src/server/save-fridge.php 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 = `` + div.innerHTML = ` +
` 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/get-fridge.php b/src/server/get-fridge.php new file mode 100644 index 0000000..5ce7616 --- /dev/null +++ b/src/server/get-fridge.php @@ -0,0 +1,9 @@ +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 @@ +
+ Counter:
+ Mileage: +
+ +
-- cgit v1.3.1