Fresh start on MariaDB Gitea
This commit is contained in:
216
client/static/app.js
Normal file
216
client/static/app.js
Normal file
@@ -0,0 +1,216 @@
|
||||
const listEl = document.getElementById("tts-list");
|
||||
const textInput = document.getElementById("text-input");
|
||||
const saveBtn = document.getElementById("save-btn");
|
||||
const voiceSelect = document.getElementById("voice-select");
|
||||
const editBtn = document.getElementById("edit-btn");
|
||||
const deleteBtn = document.getElementById("delete-btn");
|
||||
const cancelBtn = document.getElementById("cancel-btn");
|
||||
const downloadLink = document.getElementById("download-link");
|
||||
const progressWrap = document.getElementById("save-progress");
|
||||
const progressBar = document.getElementById("save-progress-bar");
|
||||
|
||||
let items = [];
|
||||
let editMode = false;
|
||||
const selectedIds = new Set();
|
||||
let progressTimer = null;
|
||||
let selectedItemId = null;
|
||||
let selectedDownloadUrl = null;
|
||||
|
||||
function startProgress() {
|
||||
let value = 0;
|
||||
progressWrap.classList.remove("hidden");
|
||||
progressBar.style.width = "0%";
|
||||
progressBar.setAttribute("aria-valuenow", "0");
|
||||
|
||||
if (progressTimer) {
|
||||
clearInterval(progressTimer);
|
||||
}
|
||||
|
||||
progressTimer = setInterval(() => {
|
||||
value = Math.min(value + Math.random() * 8 + 2, 90);
|
||||
progressBar.style.width = `${value}%`;
|
||||
progressBar.setAttribute("aria-valuenow", `${Math.round(value)}`);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function finishProgress(success = true) {
|
||||
if (progressTimer) {
|
||||
clearInterval(progressTimer);
|
||||
progressTimer = null;
|
||||
}
|
||||
|
||||
progressBar.style.width = "100%";
|
||||
progressBar.setAttribute("aria-valuenow", "100");
|
||||
|
||||
const delay = success ? 400 : 1200;
|
||||
setTimeout(() => {
|
||||
progressBar.style.width = "0%";
|
||||
progressBar.setAttribute("aria-valuenow", "0");
|
||||
progressWrap.classList.add("hidden");
|
||||
}, delay);
|
||||
}
|
||||
|
||||
function setEditMode(isEdit) {
|
||||
editMode = isEdit;
|
||||
selectedIds.clear();
|
||||
selectedItemId = null;
|
||||
selectedDownloadUrl = null;
|
||||
editBtn.classList.toggle("hidden", editMode);
|
||||
deleteBtn.classList.toggle("hidden", !editMode);
|
||||
cancelBtn.classList.toggle("hidden", !editMode);
|
||||
downloadLink.classList.add("hidden");
|
||||
downloadLink.href = "#";
|
||||
renderList();
|
||||
}
|
||||
|
||||
function renderList() {
|
||||
listEl.innerHTML = "";
|
||||
items.forEach((item) => {
|
||||
const li = document.createElement("li");
|
||||
li.className = "tts-item";
|
||||
if (!editMode && selectedItemId === item.id) {
|
||||
li.classList.add("selected");
|
||||
}
|
||||
|
||||
if (editMode) {
|
||||
const checkbox = document.createElement("input");
|
||||
checkbox.type = "checkbox";
|
||||
checkbox.checked = selectedIds.has(item.id);
|
||||
checkbox.addEventListener("click", (event) => {
|
||||
event.stopPropagation();
|
||||
if (checkbox.checked) {
|
||||
selectedIds.add(item.id);
|
||||
} else {
|
||||
selectedIds.delete(item.id);
|
||||
}
|
||||
});
|
||||
li.appendChild(checkbox);
|
||||
} else {
|
||||
const bullet = document.createElement("span");
|
||||
bullet.textContent = "•";
|
||||
bullet.className = "bullet";
|
||||
li.appendChild(bullet);
|
||||
}
|
||||
|
||||
const label = document.createElement("span");
|
||||
label.textContent = item.size_display
|
||||
? `${item.display_time} (${item.size_display})`
|
||||
: item.display_time;
|
||||
label.className = "item-label";
|
||||
li.appendChild(label);
|
||||
|
||||
li.addEventListener("click", () => handleItemClick(item));
|
||||
listEl.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadList() {
|
||||
const res = await fetch("/api/tts");
|
||||
items = await res.json();
|
||||
renderList();
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
const text = (textInput.value || "").trim();
|
||||
const voice = (voiceSelect?.value || "male").trim();
|
||||
if (text.length < 11) {
|
||||
alert("10개 글자 이상이어야 합니다");
|
||||
return;
|
||||
}
|
||||
|
||||
startProgress();
|
||||
const res = await fetch("/api/tts", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ text, voice }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({}));
|
||||
alert(err.detail || "저장에 실패했습니다.");
|
||||
finishProgress(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const created = await res.json();
|
||||
items.unshift(created);
|
||||
renderList();
|
||||
finishProgress(true);
|
||||
}
|
||||
|
||||
async function handleItemClick(item) {
|
||||
if (editMode) {
|
||||
if (selectedIds.has(item.id)) {
|
||||
selectedIds.delete(item.id);
|
||||
} else {
|
||||
selectedIds.add(item.id);
|
||||
}
|
||||
renderList();
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedItemId === item.id) {
|
||||
selectedItemId = null;
|
||||
selectedDownloadUrl = null;
|
||||
downloadLink.href = "#";
|
||||
downloadLink.classList.add("hidden");
|
||||
renderList();
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await fetch(`/api/tts/${item.id}`);
|
||||
if (!res.ok) {
|
||||
alert("항목을 불러오지 못했습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
textInput.value = data.text || "";
|
||||
selectedItemId = item.id;
|
||||
selectedDownloadUrl = data.download_url;
|
||||
downloadLink.href = selectedDownloadUrl;
|
||||
downloadLink.classList.remove("hidden");
|
||||
renderList();
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
const ids = Array.from(selectedIds);
|
||||
if (ids.length === 0) {
|
||||
alert("삭제할 항목을 선택하세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await fetch("/api/tts", {
|
||||
method: "DELETE",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ ids }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
alert("삭제에 실패했습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
const deletedSet = new Set(data.deleted || []);
|
||||
items = items.filter((item) => !deletedSet.has(item.id));
|
||||
textInput.value = "";
|
||||
selectedItemId = null;
|
||||
selectedDownloadUrl = null;
|
||||
downloadLink.href = "#";
|
||||
downloadLink.classList.add("hidden");
|
||||
setEditMode(false);
|
||||
}
|
||||
|
||||
saveBtn.addEventListener("click", handleSave);
|
||||
editBtn.addEventListener("click", () => setEditMode(true));
|
||||
cancelBtn.addEventListener("click", () => setEditMode(false));
|
||||
deleteBtn.addEventListener("click", handleDelete);
|
||||
downloadLink.addEventListener("click", (event) => {
|
||||
if (!selectedDownloadUrl) {
|
||||
event.preventDefault();
|
||||
alert("다운로드할 항목을 선택하세요.");
|
||||
}
|
||||
});
|
||||
|
||||
loadList();
|
||||
150
client/static/styles.css
Normal file
150
client/static/styles.css
Normal file
@@ -0,0 +1,150 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: #ffffff;
|
||||
border: 1px solid #d2d2d2;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
resize: none;
|
||||
padding: 12px;
|
||||
border: 1px solid #c9c9c9;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.save-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.voice-select {
|
||||
border: 1px solid #c9c9c9;
|
||||
border-radius: 4px;
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
background: #ffffff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
padding: 12px 18px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: #1f5f7a;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: #4f9acb;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
button.danger {
|
||||
background: #c84040;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.progress-wrap {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background: #f1d9a6;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: #f5a623;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.tts-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tts-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 6px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.tts-item:hover {
|
||||
background: #f1f6f9;
|
||||
}
|
||||
|
||||
.tts-item.selected {
|
||||
background: #f7f7f7;
|
||||
border-left: 4px solid #e2e2e2;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.bullet {
|
||||
font-size: 18px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.right-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#download-link {
|
||||
text-align: right;
|
||||
color: #1f5f7a;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
Reference in New Issue
Block a user