H1K0-dev/tanabata
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): separate TFM files page

Browse Source
This commit is contained in:
Masahiko AMANO 2023-01-29 18:20:39 +03:00
parent 9bfb9f89fe
commit b618ecbd52
4 changed files with 133 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
web/public/css/tfm.css
View File

@ -24,42 +24,6 @@ main {
overflow-x: hidden; overflow-x: hidden;
} }
.sasa {
position: relative;
margin: 16px;
padding: 0;
width: 160px;
height: 160px;
border-radius: 20px;
background-image: url(/images/loader.gif);
background-size: cover;
background-position: center;
overflow: hidden;
cursor: pointer;
}
.sasa .overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #0000;
}
.sasa:hover .overlay {
background-color: #0002;
}
.sasa.selected .overlay {
background-color: #0004;
}
.thumb {
min-width: 100%;
min-height: 100%;
}
.menu-wrapper { .menu-wrapper {
display: none; display: none;
flex-direction: column; flex-direction: column;
@ -84,11 +48,11 @@ main {
overflow: hidden; overflow: hidden;
} }
#sasa-form { form {
padding: 2vw 2vw; padding: 2vw 2vw;
} }
#tanzaku-list { .list {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
@ -101,6 +65,36 @@ main {
overflow-x: hidden; overflow-x: hidden;
} }
.sasa {
position: relative;
margin: 16px;
padding: 0;
width: 160px;
height: 160px;
border-radius: 20px;
background-size: cover;
background-position: center;
overflow: hidden;
cursor: pointer;
}
.sasa .overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #0000;
}
.sasa:hover .overlay {
background-color: #0002;
}
.sasa.selected .overlay {
background-color: #0004;
}
.tanzaku { .tanzaku {
margin: 5px; margin: 5px;
padding: 7px; padding: 7px;

77
web/public/js/tfm-files.js Normal file
View File

@ -0,0 +1,77 @@
$(window).on("load", function () {
sasa_load();
sasahyou.forEach((sasa) => {
$(".contents-wrapper").append(`<div class="item sasa" id="s${sasa.id}" title="${sasa.path.split('/').slice(-1)}" style="background-image: url(${"/thumbs/" + sasa.path})"><div class="overlay"></div></div>`);
});
tanzaku_load();
sappyou.forEach((tanzaku) => {
$(".list").append(`<div class="list-item tanzaku" id="t${tanzaku.id}">${tanzaku.name}</div>`);
});
kazari_load();
});
$(document).on("dblclick", ".item", function (e) {
let id = parseInt($(this).attr("id").slice(1));
sasahyou.every(sasa => {
if (sasa.id === id) {
current_sasa = sasa;
return false;
}
return true;
});
$(".item.selected").removeClass("selected");
$(".menu-wrapper").css("display", "flex");
$("#name").val(decodeURI(current_sasa.path));
$("#btn-full").attr("href", "/files/" + current_sasa.path);
let resp = tdb_query("$TFM", 24, '' + id);
if (!resp.status) {
alert("Something went wrong!");
return;
}
resp.data.forEach(tanzaku => {
$(`#t${tanzaku.id}`).addClass("selected");
});
});
$(document).on("input", "#filter", function (e) {
let filter = $(this).val().toLowerCase();
if (filter === "") {
$(".tanzaku").css("display", "block");
return;
}
sappyou.forEach((tanzaku) => {
if (tanzaku.name.toLowerCase().includes(filter)) {
$(`#t${tanzaku.id}`).css("display", "block");
} else {
$(`#t${tanzaku.id}`).css("display", "none");
}
});
});
$(document).on("click", "#btn-confirm", function (e) {
e.preventDefault();
let resp = tdb_query("$TFM", 24, '' + current_sasa.id);
if (!resp.status) {
alert("Something went wrong!");
return;
}
$(".menu-wrapper").css("display", "none");
resp.data.forEach(tanzaku => {
let current = $(`#t${tanzaku.id}`)
if (current.hasClass("selected")) {
current.removeClass("selected");
} else {
if (!tdb_query("$TFM", 9, '' + current_sasa.id + ' ' + tanzaku.id).status) {
console.log("ERROR: failed to remove kazari: " + current_sasa.id + '-' + tanzaku.id);
}
}
});
$(".tanzaku.selected").each(function (index, element) {
if (!tdb_query("$TFM", 10, '' + current_sasa.id + ' ' + $(element).attr("id").slice(1))) {
console.log("ERROR: failed to add kazari: " + current_sasa.id + '-' + tanzaku.id);
}
});
sappyou.forEach(tanzaku => {
$(`#t${tanzaku.id}`).removeClass("selected");
});
})

112
web/public/js/tfm.js
View File

@ -2,8 +2,8 @@ var sasahyou = null, sappyou = null, shoppyou = null;
var current_sasa = null, current_tanzaku = null; var current_sasa = null, current_tanzaku = null;
var sasa_modified = false, tanzaku_modified = false; var sasa_modified = false, tanzaku_modified = false;
function sasa_load(id) { function sasa_load() {
resp = tdb_query("$TFM", 16, id < 0 ? "" : `${id}`); resp = tdb_query("$TFM", 16, "");
if (resp == null) { if (resp == null) {
$(location).attr("href", "/auth"); $(location).attr("href", "/auth");
throw new Error("Unauthorized"); throw new Error("Unauthorized");
@ -12,16 +12,11 @@ function sasa_load(id) {
alert("Something went wrong"); alert("Something went wrong");
return; return;
} }
if (id < 0) { sasahyou = resp.data;
sasahyou = resp.data;
sasahyou.forEach((sasa) => {
$(".contents-wrapper").append(`<div class="sasa" id="s${sasa.id}" title="${sasa.path.split('/').slice(-1)}" style="background-image: url(${"/thumbs/" + sasa.path})"><div class="overlay"></div></div>`);
});
}
} }
function tanzaku_load(id) { function tanzaku_load() {
resp = tdb_query("$TFM", 32, id < 0 ? "" : `${id}`); resp = tdb_query("$TFM", 32, "");
if (resp == null) { if (resp == null) {
$(location).attr("href", "/auth"); $(location).attr("href", "/auth");
throw new Error("Unauthorized"); throw new Error("Unauthorized");
@ -30,12 +25,7 @@ function tanzaku_load(id) {
alert("Something went wrong"); alert("Something went wrong");
return; return;
} }
if (id < 0) { sappyou = resp.data;
sappyou = resp.data;
sappyou.forEach((tanzaku) => {
$("#tanzaku-list").append(`<div class="tanzaku" id="t${tanzaku.id}">${tanzaku.name}</div>`);
});
}
} }
function kazari_load() { function kazari_load() {
@ -51,23 +41,16 @@ function kazari_load() {
shoppyou = resp.data; shoppyou = resp.data;
} }
$(window).on("load", function () {
sasa_load(-1);
tanzaku_load(-1);
kazari_load();
});
$(document).keyup(function (e) { $(document).keyup(function (e) {
if (e.key === "Escape") { if (e.key === "Escape") {
$(".selected").removeClass("selected"); $(".selected").removeClass("selected");
} }
}); });
$(document).on("click", ".sasa", function (e) { $(document).on("click", ".item", function (e) {
let wasSelected = $(this).hasClass("selected"); let wasSelected = $(this).hasClass("selected");
if (!e.ctrlKey) { if (!e.ctrlKey) {
$(".selected").removeClass("selected"); $(".item.selected").removeClass("selected");
wasSelected = false;
} }
if (wasSelected) { if (wasSelected) {
$(this).removeClass("selected"); $(this).removeClass("selected");
@ -76,39 +59,7 @@ $(document).on("click", ".sasa", function (e) {
} }
}); });
$(document).on("dblclick", ".sasa", function (e) { $(document).on("click", ".list-item", function (e) {
let id = parseInt($(this).attr("id").slice(1));
sasahyou.every(sasa => {
if (sasa.id === id) {
current_sasa = sasa;
return false;
}
return true;
});
$(".sasa.selected").removeClass("selected");
$(".menu-wrapper").css("display", "flex");
$("#sasa-name").val(decodeURI(current_sasa.path));
$("#btn-full").attr("href", "/files/" + current_sasa.path);
let resp = tdb_query("$TFM", 24, '' + id);
if (!resp.status) {
alert("Something went wrong!");
return;
}
resp.data.forEach(tanzaku => {
$(`#t${tanzaku.id}`).addClass("selected");
});
});
$(document).on("click", "#btn-close", function (e) {
e.preventDefault();
$("#sasa-menu").css("display", "none");
sappyou.forEach(tanzaku => {
$(`#t${tanzaku.id}`).removeClass("selected");
});
});
$(document).on("click", ".tanzaku", function (e) {
sasa_modified = true;
if ($(this).hasClass("selected")) { if ($(this).hasClass("selected")) {
$(this).removeClass("selected"); $(this).removeClass("selected");
} else { } else {
@ -116,45 +67,8 @@ $(document).on("click", ".tanzaku", function (e) {
} }
}); });
$(document).on("input", "#tanzaku-filter", function (e) { $(document).on("click", "#btn-close", function (e) {
let filter = $(this).val().toLowerCase();
if (filter === "") {
$(".tanzaku").css("display", "block");
return;
}
sappyou.forEach((tanzaku) => {
if (tanzaku.name.toLowerCase().includes(filter)) {
$(`#t${tanzaku.id}`).css("display", "block");
} else {
$(`#t${tanzaku.id}`).css("display", "none");
}
});
});
$(document).on("click", "#btn-sasa-confirm", function (e) {
e.preventDefault(); e.preventDefault();
let resp = tdb_query("$TFM", 24, '' + current_sasa.id); $(".menu-wrapper").css("display", "none");
if (!resp.status) { $(".list-item").removeClass("selected");
alert("Something went wrong!"); });
return;
}
$("#sasa-menu").css("display", "none");
resp.data.forEach(tanzaku => {
let current = $(`#t${tanzaku.id}`)
if (current.hasClass("selected")) {
current.removeClass("selected");
} else {
if (!tdb_query("$TFM", 0b1001, '' + current_sasa.id + ' ' + tanzaku.id).status) {
console.log("ERROR: failed to remove kazari: " + current_sasa.id + '-' + tanzaku.id);
}
}
});
$(".tanzaku.selected").each(function (index, element) {
if (!tdb_query("$TFM", 0b1010, '' + current_sasa.id + ' ' + $(element).attr("id").slice(1))) {
console.log("ERROR: failed to add kazari: " + current_sasa.id + '-' + tanzaku.id);
}
});
sappyou.forEach(tanzaku => {
$(`#t${tanzaku.id}`).removeClass("selected");
});
})

21
web/public/tfm/files.html
View File

@ -26,6 +26,7 @@
<link rel="stylesheet" href="/css/tfm.css"> <link rel="stylesheet" href="/css/tfm.css">
<script src="/js/jquery-3.6.0.min.js"></script> <script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/tdbms.js"></script> <script src="/js/tdbms.js"></script>
<script src="/js/tfm.js"></script>
</head> </head>
<body> <body>
<h1>TFM Files</h1> <h1>TFM Files</h1>
@ -33,31 +34,31 @@
<div class="contents-wrapper"> <div class="contents-wrapper">
</div> </div>
</main> </main>
<div class="menu-wrapper" id="sasa-menu"> <div class="menu-wrapper">
<div class="menu"> <div class="menu">
<h2>Sasa menu</h2> <h2>Sasa menu</h2>
<form id="sasa-form"> <form>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 col-form-label" for="sasa-name">File name</label> <label class="col-sm-2 col-form-label" for="name">File name</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="text" name="sasa-name" class="form-control" id="sasa-name"> <input type="text" name="name" class="form-control" id="name">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-3 col-form-label" for="tanzaku-filter">Tanzaku filter</label> <label class="col-sm-3 col-form-label" for="filter">Tag filter</label>
<div class="col-sm-9"> <div class="col-sm-9">
<input type="text" name="tanzaku-filter" class="form-control" id="tanzaku-filter"> <input type="text" name="filter" class="form-control" id="filter">
</div> </div>
</div> </div>
<div class="form-group" id="tanzaku-list"></div> <div class="form-group list"></div>
<div class="form-group button-flex"> <div class="form-group button-flex">
<button class="btn btn-primary" id="btn-sasa-confirm">Confirm</button> <button class="btn btn-primary" id="btn-confirm">Confirm</button>
<a href="" target="_blank" class="btn btn-outline-info" id="btn-full">View full</a> <a target="_blank" class="btn btn-outline-info" id="btn-full">View full</a>
<button class="btn btn-outline-danger" id="btn-close">Close</button> <button class="btn btn-outline-danger" id="btn-close">Close</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<script src="/js/tfm.js"></script> <script src="/js/tfm-files.js"></script>
</body> </body>
</html> </html>