frontend sketch on pure web

www/js/types.js

@@ -0,0 +1,249 @@
+class AddButton {
+
+    id = "";
+    html = undefined;
+
+    constructor() {
+        this.html = document.createElement('button');
+        this.html.classList.add("plus");
+        this.html.classList.add("round");
+        this.html.appendChild(document.createTextNode("+"));
+        this.id = makeid(8);
+        this.html.id = this.id;
+    }
+
+    addHadler(func) {
+        this.html.addEventListener("click", func);
+        return this;
+    }
+
+}
+
+class HorisontalItem {
+
+    id = undefined;
+    html = undefined;
+    text = undefined;
+    
+    constructor(text) {
+        this.text = text;
+        this.html = document.createElement('div');
+        this.html.classList.add("horisontal-item");
+        this.html.classList.add("rounded");
+        this.html.appendChild(document.createTextNode(text));
+        this.id = makeid(8);
+        this.html.id = this.id;
+        this.html.addEventListener("click", this.remove);
+    }
+
+    remove() {
+        document.getElementById(this.id).remove();
+    }
+}
+
+class HorisontalBar {
+
+    html = undefined;
+    plus_id = undefined;
+    elements = [];
+
+    constructor(text, id) {
+        this.html = document.createElement('div');
+        this.html.classList.add("horisontal-bar");
+        this.html.classList.add("input");
+        this.html.classList.add("rounded");
+        let label = document.createElement('p');
+        label.appendChild(document.createTextNode(text))
+        this.html.appendChild(label);
+        const plus = new AddButton().addHadler(
+            () => this.append(new HorisontalItem('test'))
+        );
+        this.html.appendChild(plus.html);
+        this.plus_id = plus.id;
+    }
+
+    append(elem) {
+        this.elements.push(elem);
+        this.html.insertBefore(elem.html, document.getElementById(this.plus_id));
+        return this;
+    }
+
+    json() {
+        return JSON.stringify(this.elements, json_filter);
+    }
+}
+
+class HorisontalImage {
+
+    id = undefined;
+    html = undefined;
+    
+    constructor() {
+        this.html = document.createElement('div');
+        this.html.classList.add("horisontal");
+        this.html.classList.add("image");
+        this.html.classList.add("input");
+        this.html.classList.add("rounded");
+        this.id = makeid(8);
+        this.html.id = this.id;
+
+        let plus = new AddButton();
+        plus.addHadler(() => {
+            addImage(plus.id, this.id);
+            document.getElementById("screenshots").appendChild(new HorisontalImage().html);
+        });
+        this.html.appendChild(plus.html);
+    }
+
+    remove() {
+        document.getElementById(this.id).remove();
+    }
+}
+
+class HorisontalImageBar {
+
+    html = undefined;
+    first_id = undefined;
+    elements = [];
+
+    constructor(id) {
+        this.html = document.createElement('div');
+        this.html.classList.add("horisontal-bar");
+        const first = new HorisontalImage();
+        this.html.appendChild(first.html);
+        this.first_id = first.id;
+    }
+
+    append(elem) {
+        this.elements.push(elem);
+        this.html.insertBefore(elem.html, document.getElementById(this.first_id));
+        return this;
+    }
+
+    json() {
+        return JSON.stringify(this.elements, json_filter);
+    }
+}
+
+class ImgButton {
+
+    html = undefined;
+    id = undefined;
+
+    constructor(name, img) {
+        this.html = document.createElement('div');
+        this.html.classList.add("imgbutton");
+        this.id = makeid(8);
+        this.html.id = this.id;
+
+        let btn_img = document.createElement('img');
+        btn_img.src = img;
+        btn_img.innerHTML = name;
+        this.html.appendChild(btn_img);
+    }
+
+    addHadler(func) {
+        this.html.addEventListener("click", func);
+        return this;
+    }
+
+    setCssClass(name) {
+        this.html.classList.add(name);
+    }
+
+}
+
+class QueueItem {
+
+    html = undefined;
+    id = undefined;
+
+    constructor(date, name) {
+        this.html = document.createElement('div');
+        this.html.classList.add("queue-item");
+        this.html.classList.add("horisontal-bar");
+        this.html.classList.add("rounded");
+        this.id = makeid(8);
+        this.html.id = this.id;
+
+        var date_p = document.createElement('p');
+        date_p.innerHTML = date;
+        this.html.appendChild(date_p);
+
+        var text = document.createElement('p');
+        text.classList.add("ellipsis");
+        text.innerHTML = name;
+        this.html.appendChild(text);
+
+        let edit_btn = new ImgButton("Изменить", "./img/edit.svg");
+        edit_btn.setCssClass("edit");
+        this.html.appendChild(edit_btn.html);
+        let rem_btn = new ImgButton("Удалить", "./img/delete.svg");
+        rem_btn.setCssClass("remove");
+        this.html.appendChild(rem_btn.html);
+    }
+
+}
+
+class Calendar {
+
+    html = undefined;
+    id = undefined;
+
+    constructor() {
+        this.html = document.createElement('div');
+        this.html.classList.add("calendar");
+        this.html.classList.add("rounded");
+        this.id = makeid(8);
+        this.html.id = this.id;
+
+        // Calendar Header
+        let month = document.createElement('div');
+        month.classList.add("month");
+        let m_header = document.createElement('ul');
+        let prev_btn = document.createElement('li');
+        prev_btn.classList.add("prev");
+        prev_btn.id = this.id + "-prev";
+        prev_btn.innerHTML = "❮";
+        m_header.appendChild(prev_btn);
+        let next_btn = document.createElement('li');
+        next_btn.classList.add("next");
+        next_btn.id = this.id + "-next";
+        next_btn.innerHTML = "❯";
+        m_header.appendChild(next_btn);
+        let month_text = document.createElement('li');
+        month_text.innerHTML = "Август 2025";
+        m_header.appendChild(month_text);
+        month.appendChild(m_header);
+        this.html.appendChild(month);
+
+        // Week header
+        let weekdays = document.createElement('ul');
+        weekdays.classList.add("weekdays");
+        const days = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];
+        for (const day of days) {
+            let day_li = document.createElement('li');
+            day_li.innerHTML = day;
+            weekdays.appendChild(day_li);
+        }
+        this.html.appendChild(weekdays);
+
+        let day_table = document.createElement('ul');
+        day_table.classList.add("days");
+        const current = 10;
+        for (const day of [...Array(31).keys()]) {
+            let day_li = document.createElement('li');
+            if (day+1 == current) {
+                let day_sp = document.createElement('span');
+                day_sp.classList.add("active");
+                day_sp.innerHTML = day+1;
+                day_li.appendChild(day_sp);
+            } else {
+                day_li.innerHTML = day+1;
+            }
+            day_table.appendChild(day_li);
+        }
+        this.html.appendChild(day_table);
+    }
+
+}