frontend sketch on pure web
This commit is contained in:
commit
7d0c459b77
13 changed files with 1054 additions and 0 deletions
8
www/js/calendar.js
Normal file
8
www/js/calendar.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
|
||||
document.getElementById("cal-prev").addEventListener("click", (event) => {
|
||||
console.log("cal-prev");
|
||||
})
|
||||
|
||||
document.getElementById("cal-next").addEventListener("click", (event) => {
|
||||
console.log("cal-next");
|
||||
})
|
||||
46
www/js/functions.js
Normal file
46
www/js/functions.js
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
function makeid(length) {
|
||||
var result = '';
|
||||
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
var charactersLength = characters.length;
|
||||
for ( var i = 0; i < length; i++ ) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
const imageTypes = {
|
||||
types: [
|
||||
{
|
||||
description: "Images",
|
||||
accept: {
|
||||
"image/*": [".png", ".gif", ".jpeg", ".jpg"],
|
||||
},
|
||||
},
|
||||
],
|
||||
excludeAcceptAllOption: true,
|
||||
multiple: false,
|
||||
};
|
||||
|
||||
let fileHandle;
|
||||
async function loadImage() {
|
||||
[fileHandle] = await window.showOpenFilePicker(imageTypes);
|
||||
return fileHandle;
|
||||
}
|
||||
|
||||
function addImage(initiator, target) {
|
||||
loadImage().then(async (result) => {
|
||||
let img = document.createElement("img");
|
||||
img.src = URL.createObjectURL(await result.getFile());
|
||||
document.getElementById(target).appendChild(img);
|
||||
initiator = document.getElementById(initiator);
|
||||
if (initiator) initiator.remove();
|
||||
//document.getElementById(target).addEventListener("click", addImage("", target));
|
||||
});
|
||||
}
|
||||
|
||||
function json_filter(key,value)
|
||||
{
|
||||
if (key=="html") return undefined;
|
||||
//else if (key=="id") return undefined;
|
||||
else return value;
|
||||
}
|
||||
12
www/js/index.js
Normal file
12
www/js/index.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
|
||||
document.getElementById("cover-plus").addEventListener("click", (event) => {
|
||||
addImage("cover-plus", "cover-div");
|
||||
})
|
||||
|
||||
// document.getElementById("screen-plus").addEventListener("click", (event) => {
|
||||
// addImage("screen-plus", "scr-1");
|
||||
// })
|
||||
|
||||
document.getElementById("create").addEventListener("click", (event) => {
|
||||
console.log("create");
|
||||
})
|
||||
249
www/js/types.js
Normal file
249
www/js/types.js
Normal file
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue