Full working app

5 files changed, 174 insertions, 0 deletions

diff --git a/scripts/edit-data.js b/scripts/edit-data.js
new file mode 100644
index 0000000..90b8785
--- /dev/null
+++ b/scripts/edit-data.js
@@ -0,0 +1,62 @@
+"use strict";
+document.body.onkeydown = e => {
+    if (e.key === "Escape") {
+        INPUT.value = "";
+        INPUT.dataset.id = "";
+        MENU.style.display = "none";
+    }
+};
+const MENU = document.getElementsByTagName("div")[0];
+const INPUT = document.getElementsByTagName("input")[0];
+const IMG = document.getElementsByTagName("img")[0];
+const MAP = document.getElementsByTagName("map")[0];
+const ERR = document.getElementsByTagName("div")[1];
+const Y_DATA = JSON.parse(document.getElementsByTagName("span")[0].innerHTML);
+const ORIG_SRC = IMG.src;
+function showMenu(id, value) {
+    if (value !== -1 && value !== null && value !== undefined)
+        INPUT.value = value.toString();
+    INPUT.dataset.id = id.toString();
+    MENU.style.display = "block";
+}
+async function menuClick(action) {
+    if (action !== "cancel" && (parseFloat(INPUT.value) < Y_DATA[0] || parseFloat(INPUT.value) > Y_DATA[Y_DATA.length - 1])) {
+        ERR.innerHTML = "Too small or to big number";
+        return;
+    }
+    if (action !== "cancel") {
+        let data;
+        if (action === "save")
+            data = parseFloat(INPUT.value);
+        else if (action === "condition")
+            data = -1;
+        else if (action === "null")
+            data = null;
+        else
+            throw new Error("New chart data has unknown type");
+        await fetch("/php/save-data.php", {
+            method: "POST",
+            headers: {
+                Accept: "application/json",
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ data, id: INPUT.dataset.id }),
+        });
+        // IMG.src = `${IMG.src.split('?')[0]}?${Date.now()}`;
+        IMG.src = ORIG_SRC + "cache=" + Date.now();
+        setNewImgMap();
+    }
+    INPUT.value = "";
+    INPUT.dataset.id = "";
+    MENU.style.display = "none";
+}
+async function setNewImgMap() {
+    MAP.innerHTML = await (await fetch("/php/get-img-map.php")).text();
+}
+function input() {
+    const v = INPUT.value;
+    if (!/[\d\.]/.test(v[v.length - 1]) || v.split('.').length > 2) {
+        console.log(2);
+        INPUT.value = v.substr(0, v.length - 1);
+    }
+}
diff --git a/scripts/edit-data.ts b/scripts/edit-data.ts
new file mode 100644
index 0000000..3dcacac
--- /dev/null
+++ b/scripts/edit-data.ts
@@ -0,0 +1,71 @@
+document.body.onkeydown = e => {
+  if (e.key === "Escape") {
+    INPUT.value = "";
+    INPUT.dataset.id = "";
+    MENU.style.display = "none";
+
+  }
+}
+
+const MENU = document.getElementsByTagName("div")[0];
+const INPUT = document.getElementsByTagName("input")[0];
+const IMG = document.getElementsByTagName("img")[0];
+const MAP = document.getElementsByTagName("map")[0];
+const ERR = document.getElementsByTagName("div")[1];
+const Y_DATA = JSON.parse(document.getElementsByTagName("span")[0].innerHTML) as Array<number>;
+const ORIG_SRC = IMG.src;
+
+function showMenu(id: number, value?: number): void {
+  if (value !== -1 && value !== null && value !== undefined)
+    INPUT.value = value.toString();
+
+  INPUT.dataset.id = id.toString();
+  MENU.style.display = "block";
+}
+
+async function menuClick(action: string): Promise<void> {
+  if (action !== "cancel" && (parseFloat(INPUT.value) < Y_DATA[0] || parseFloat(INPUT.value) > Y_DATA[Y_DATA.length - 1])) {
+    ERR.innerHTML = "Too small or to big number";
+    return;
+  }
+  if (action !== "cancel") {
+    let data: number | null;
+    if (action === "save")
+      data = parseFloat(INPUT.value);
+    else if (action === "condition")
+      data = -1;
+    else if (action === "null")
+      data = null;
+    else
+      throw new Error("New chart data has unknown type");
+
+    await fetch("/php/save-data.php", {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ data, id: INPUT.dataset.id }),
+    });
+    // IMG.src = `${IMG.src.split('?')[0]}?${Date.now()}`;
+    IMG.src = ORIG_SRC + "cache=" + Date.now()
+    setNewImgMap();
+  }
+
+  INPUT.value = "";
+  INPUT.dataset.id = "";
+  MENU.style.display = "none";
+}
+
+async function setNewImgMap(): Promise<void> {
+  MAP.innerHTML = await (await fetch("/php/get-img-map.php")).text();
+}
+
+function input() {
+  const v = INPUT.value;
+  if (!/[\d\.]/.test(v[v.length - 1]) || v.split('.').length > 2) {
+    console.log(2);
+    INPUT.value = v.substr(0, v.length - 1);
+  }
+}
+
diff --git a/scripts/package.json b/scripts/package.json
new file mode 100644
index 0000000..cf1fe7d
--- /dev/null
+++ b/scripts/package.json
@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "typescript": "^4.4.3"
+  }
+}
diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json
new file mode 100644
index 0000000..bc6f4be
--- /dev/null
+++ b/scripts/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "esModuleInterop": true,
+        "target": "ESNext",
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "strict": true,
+        "lib": [
+            "ESNext",
+            "DOM"
+        ],
+        "noImplicitAny": true ,
+        "strictNullChecks": true ,
+        "strictFunctionTypes": true ,
+        "strictBindCallApply": true ,
+        "strictPropertyInitialization": true ,
+        "noImplicitThis": true ,
+        "alwaysStrict": true ,
+        "downlevelIteration": true,
+        "outDir": ".",
+    },
+    "include": [
+      "./edit-data.ts"
+    ],
+    "exclude": [
+      "./*.js",
+    ]
+}
diff --git a/scripts/yarn.lock b/scripts/yarn.lock
new file mode 100644
index 0000000..e1f5cdd
--- /dev/null
+++ b/scripts/yarn.lock
@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+typescript@^4.4.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.3.tgz#bdc5407caa2b109efd4f82fe130656f977a29324"
+  integrity sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA==