Initial port to svelte
This commit is contained in:
parent
410cba70e5
commit
0dee6d64ed
21 changed files with 333 additions and 424 deletions
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
7
vnshed/src/lib/components/add_button.svelte
Normal file
7
vnshed/src/lib/components/add_button.svelte
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script>
|
||||
import { makeid } from "$lib/functions.js"
|
||||
const { handler } = $props();
|
||||
let id = makeid(8);
|
||||
</script>
|
||||
|
||||
<button class="plus round" onclick={handler}>+</button>
|
||||
109
vnshed/src/lib/components/calendar.svelte
Normal file
109
vnshed/src/lib/components/calendar.svelte
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<script>
|
||||
import { makeid } from "$lib/functions.js"
|
||||
let id = makeid(8);
|
||||
let current = 10;
|
||||
</script>
|
||||
|
||||
<div class="calendar rounded">
|
||||
<div class="month">
|
||||
<ul>
|
||||
<li class="prev">❮</li>
|
||||
<li class="next">❯</li>
|
||||
<li>Август 2025</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="weekdays">
|
||||
{#each ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"] as weekday}
|
||||
<li>{weekday}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<ul class="days">
|
||||
{#each [...Array(31).keys()] as day}
|
||||
<li>
|
||||
{#if current == day+1}
|
||||
<span class="active">{day+1}</span>
|
||||
{:else}
|
||||
{day+1}
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
ul {list-style-type: none;}
|
||||
|
||||
.calendar * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.month {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.month ul {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.month ul li {
|
||||
display: inline;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.month .prev {
|
||||
float: inline-start;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.month .next {
|
||||
float: inline-end;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.weekdays {
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.weekdays li {
|
||||
display: inline-block;
|
||||
width: 13.6%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.days {
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.days li {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
width: 13.6%;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
font-size: smaller;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.days li .active {
|
||||
padding: 5px;
|
||||
border-radius: 30%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
.weekdays li, .days li {width: 13.1%;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
.weekdays li, .days li {width: 12.5%;}
|
||||
.days li .active {padding: 2px;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 290px) {
|
||||
.weekdays li, .days li {width: 12.2%;}
|
||||
}
|
||||
</style>
|
||||
4
vnshed/src/lib/components/create_button.svelte
Normal file
4
vnshed/src/lib/components/create_button.svelte
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<!-- Кнопка "Создать" -->
|
||||
<div class="create">
|
||||
<button class="rounded" id="create">Создать</button>
|
||||
</div>
|
||||
47
vnshed/src/lib/components/horisontal_bar.svelte
Normal file
47
vnshed/src/lib/components/horisontal_bar.svelte
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!-- 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);
|
||||
}
|
||||
} -->
|
||||
|
||||
<script>
|
||||
import AddButton from "./add_button.svelte";
|
||||
import Image from "./image.svelte";
|
||||
let { label = "", type = "text" } = $props();
|
||||
</script>
|
||||
|
||||
<div class="horisontal-bar {type == "text" ? "input" : ""} rounded">
|
||||
<p>{label}</p>
|
||||
{#if type == "text"}
|
||||
<AddButton handler={() => {}} />
|
||||
{:else if type == "image"}
|
||||
<Image />
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
11
vnshed/src/lib/components/image.svelte
Normal file
11
vnshed/src/lib/components/image.svelte
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script>
|
||||
import AddButton from "./add_button.svelte";
|
||||
let { direction = "horisontal", input = true } = $props();
|
||||
</script>
|
||||
|
||||
<div class="{direction} {input ? "input" : ""} image rounded">
|
||||
<AddButton handler={() => {
|
||||
// addImage(plus.id, this.id);
|
||||
// document.getElementById("screenshots").appendChild(new HorisontalImage().html);
|
||||
}}/>
|
||||
</div>
|
||||
37
vnshed/src/lib/components/img_button.svelte
Normal file
37
vnshed/src/lib/components/img_button.svelte
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<!-- 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);
|
||||
}
|
||||
|
||||
} -->
|
||||
|
||||
<script>
|
||||
import { makeid } from "$lib/functions.js"
|
||||
let id = makeid(8);
|
||||
let { style, image, name } = $props();
|
||||
</script>
|
||||
|
||||
<div class="imgbutton {style}">
|
||||
<img src={image} alt={name}>
|
||||
</div>
|
||||
15
vnshed/src/lib/components/queue_item.svelte
Normal file
15
vnshed/src/lib/components/queue_item.svelte
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<script>
|
||||
import { makeid } from "$lib/functions.js"
|
||||
import edit_btn from '$lib/assets/edit.svg';
|
||||
import remove_btn from '$lib/assets/delete.svg';
|
||||
import ImgButton from "./img_button.svelte";
|
||||
let id = makeid(8);
|
||||
let { date, name } = $props();
|
||||
</script>
|
||||
|
||||
<div class="queue-item horisontal-bar rounded">
|
||||
<p>{date}</p>
|
||||
<p class="ellipsis">{name}</p>
|
||||
<ImgButton style="edit" name="Изменить" image={edit_btn}/>
|
||||
<ImgButton style="remove" name="Удалить" image={remove_btn}/>
|
||||
</div>
|
||||
|
|
@ -1,14 +1,6 @@
|
|||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../font/Inter-Light.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lobster';
|
||||
src: url('../font/Lobster-Regular.ttf') format('ttf');
|
||||
src: url('/font/Inter-Light.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
46
vnshed/src/lib/functions.js
Normal file
46
vnshed/src/lib/functions.js
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
export 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;
|
||||
// export async function loadImage() {
|
||||
// [fileHandle] = await window.showOpenFilePicker(imageTypes);
|
||||
// return fileHandle;
|
||||
// }
|
||||
|
||||
// export 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));
|
||||
// });
|
||||
// }
|
||||
|
||||
// export function json_filter(key,value)
|
||||
// {
|
||||
// if (key=="html") return undefined;
|
||||
// //else if (key=="id") return undefined;
|
||||
// else return value;
|
||||
// }
|
||||
|
|
@ -1,5 +1,10 @@
|
|||
<script>
|
||||
import favicon from '$lib/assets/favicon.svg';
|
||||
import Image from '$lib/components/image.svelte';
|
||||
import HorisontalBar from '$lib/components/horisontal_bar.svelte';
|
||||
import CreateButton from '$lib/components/create_button.svelte';
|
||||
import Calendar from '$lib/components/calendar.svelte';
|
||||
import QueueItem from '$lib/components/queue_item.svelte';
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
|
@ -8,9 +13,55 @@
|
|||
<link rel="icon" href={favicon} />
|
||||
</svelte:head>
|
||||
|
||||
<body>
|
||||
<p>lld</p>
|
||||
<!-- Обложка -->
|
||||
<div class="cover">
|
||||
<Image direction="vertical"/>
|
||||
<p>Обложка</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<div class="fields rounded" id="fields">
|
||||
<!-- Название -->
|
||||
<input type="text" class="input rounded" placeholder="Название">
|
||||
|
||||
<!-- Описание -->
|
||||
<textarea class="input rounded" placeholder="Описание" rows="4"></textarea>
|
||||
|
||||
<!-- Время на чтение -->
|
||||
<div class="horisontal-bar">
|
||||
<p>Время на чтение</p>
|
||||
<select class="input rounded" id="hours-count">
|
||||
<option value="first">менее 2-х часов</option>
|
||||
<option value="second">2-10 часов</option>
|
||||
<option value="third">10-30 часов</option>
|
||||
<option value="third">50+ часов</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<HorisontalBar label="Жанры"/>
|
||||
<HorisontalBar label="Теги"/>
|
||||
<HorisontalBar label="Баджи"/>
|
||||
|
||||
<p>Скриншоты</p>
|
||||
<HorisontalBar type="image" />
|
||||
|
||||
<!-- Календарь с датой -->
|
||||
<p>Дата публикации</p>
|
||||
<Calendar />
|
||||
|
||||
<!-- Очередь публикации -->
|
||||
<p>Очередь публикации</p>
|
||||
<div class="input rounded" id="queue">
|
||||
<QueueItem date="28.11.24" name="Fate/Stay Night (Судьба/Ночь схватки)"/>
|
||||
<QueueItem date="30.11.24" name="Fate/Hollow Ataraxia (Судьба/Святая атараксия)"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<CreateButton />
|
||||
|
||||
<style>
|
||||
@import '$lib/css/global.css';
|
||||
@import '$lib/css/themes.css';
|
||||
</style>
|
||||
|
||||
{@render children?.()}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
||||
<!-- <h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p> -->
|
||||
|
|
|
|||
|
|
@ -1,95 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Отложка</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/global.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/calendar.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/themes.css">
|
||||
<link rel="preload" href="font/Inter-Light.woff2" as="font" type="font/ttf" crossorigin>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="js/functions.js"></script>
|
||||
<script type="text/javascript" src="js/types.js"></script>
|
||||
|
||||
<!-- Обложка -->
|
||||
<div class="cover">
|
||||
<div class="vertical image rounded" id="cover-div">
|
||||
<button class="plus round" id="cover-plus">+</button>
|
||||
</div>
|
||||
<p>Обложка</p>
|
||||
</div>
|
||||
|
||||
<div class="fields rounded" id="fields">
|
||||
<!-- Название -->
|
||||
<input type="text" class="input rounded" placeholder="Название"></input>
|
||||
|
||||
<!-- Описание -->
|
||||
<textarea class="input rounded" placeholder="Описание" rows="4"></textarea>
|
||||
|
||||
<!-- Время на чтение -->
|
||||
<div class="horisontal-bar">
|
||||
<p>Время на чтение</p>
|
||||
<select class="input rounded" id="hours-count">
|
||||
<option value="first">менее 2-х часов</option>
|
||||
<option value="second">2-10 часов</option>
|
||||
<option value="third">10-30 часов</option>
|
||||
<option value="third">50+ часов</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Поле с жанрами -->
|
||||
<script>
|
||||
let genres = new HorisontalBar("Жанры", "genres");
|
||||
document.getElementById("fields").appendChild(genres.html);
|
||||
</script>
|
||||
|
||||
<!-- Поле с тегами -->
|
||||
<script>
|
||||
let tags = new HorisontalBar("Теги", "tags");
|
||||
document.getElementById("fields").appendChild(tags.html);
|
||||
</script>
|
||||
|
||||
<!-- Поле с баджами -->
|
||||
<script>
|
||||
let badges = new HorisontalBar("Баджи", "badges");
|
||||
document.getElementById("fields").appendChild(badges.html);
|
||||
</script>
|
||||
|
||||
<!-- Скриншоты -->
|
||||
<p>Скриншоты</p>
|
||||
<script>
|
||||
let screenshots = new HorisontalImageBar("screenshots");
|
||||
document.getElementById("fields").appendChild(screenshots.html);
|
||||
</script>
|
||||
|
||||
<!-- Календарь с датой -->
|
||||
<p>Дата публикации</p>
|
||||
<script>
|
||||
let calendar = new Calendar();
|
||||
document.getElementById("fields").appendChild(calendar.html);
|
||||
</script>
|
||||
|
||||
<!-- Очередь публикации -->
|
||||
<p>Очередь публикации</p>
|
||||
<div class="input rounded" id="queue">
|
||||
<script>
|
||||
let queue1 = new QueueItem("28.11.24", "Fate/Stay Night (Судьба/Ночь схватки)");
|
||||
document.getElementById("queue").appendChild(queue1.html);
|
||||
</script>
|
||||
<script>
|
||||
let queue2 = new QueueItem("30.11.24", "Fate/Hollow Ataraxia (Судьба/Святая атараксия)");
|
||||
document.getElementById("queue").appendChild(queue2.html);
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Кнопка "Создать" -->
|
||||
<div class="create">
|
||||
<button class="rounded" id="create">Создать</button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="js/index.js"></script>
|
||||
<script type="text/javascript" src="js/calendar.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
|
||||
document.getElementById("cal-prev").addEventListener("click", (event) => {
|
||||
console.log("cal-prev");
|
||||
})
|
||||
|
||||
document.getElementById("cal-next").addEventListener("click", (event) => {
|
||||
console.log("cal-next");
|
||||
})
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
|
||||
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
249
www/js/types.js
|
|
@ -1,249 +0,0 @@
|
|||
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