fullgream/kodex-music-catalog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add frontend

Browse Source
This commit is contained in:
Nikiroy78 2023-10-02 11:55:35 +03:00
parent 3fe20d60f0
commit 4f0bd8670b
9 changed files with 534 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,5 +1,4 @@
node_modules/ node_modules/
references/ references/
ts.txt ts.txt
*.py
*.log *.log

33
api-tests/test.py Normal file
View File

@ -0,0 +1,33 @@
import requests as req
class CreateItemChecks:
def createAuthor (result):
return 'response' in result
class CreateItemActions:
def createAuthor ():
return req.post(
"http://127.0.0.1:8080/api/v/1.0/create-item?response_format=json",
json={
"type" : "author"
}
).json()
createItemActions = CreateItemActions()
createItemChecks = CreateItemChecks()
def test (id, action, isDone):
try:
print("""Test {id} runned..""")
result = action()
if isDone(result):
print("""Test {id} success!""")
else:
print("""Test {id} ERROR""")
print(result)
except Exception as exc:
print(exc)
test(1, createItemActions.createAuthor, createItemChecks.createAuthor)

2
frontend/main.html
View File

@ -4,6 +4,7 @@
<title>Kodex Muzic</title> <title>Kodex Muzic</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet"> <link href="/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
</head> </head>
<body> <body>
<!-- <h3><center>Kodex Muzic</center></h3> --> <!-- <h3><center>Kodex Muzic</center></h3> -->
@ -33,6 +34,7 @@
<script src="/js/api-module.js"></script> <script src="/js/api-module.js"></script>
<script src="/js/sound.js"></script> <script src="/js/sound.js"></script>
<script src="/js/menu.js"></script>
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
</body> </body>

141
frontend/public/js/api-module.js
View File

@ -1,9 +1,15 @@
class Api { class Api {
getAuthors (params, cb) { getAuthors(params, cb) {
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
params = Object.entries(params).map(([key, value]) => `${key}=${value}`).join('&'); params = Object.entries(params)
params = params !== '' ? `&${params}` : ''; .map(([key, value]) => `${key}=${value}`)
xhr.open("GET", `/api/v/1.0/get-authors?response_format=json${params}`, true); .join("&");
params = params !== "" ? `&${params}` : "";
xhr.open(
"GET",
`/api/v/1.0/get-authors?response_format=json${params}`,
true,
);
xhr.onreadystatechange = function (event) { xhr.onreadystatechange = function (event) {
//console.log(event); //console.log(event);
if (this.readyState != 4) return; if (this.readyState != 4) return;
@ -11,11 +17,13 @@ class Api {
}; };
xhr.send(); xhr.send();
} }
getMuzic (params, cb) { getMuzic(params, cb) {
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
params = Object.entries(params).map(([key, value]) => `${key}=${value}`).join('&'); params = Object.entries(params)
params = params !== '' ? `&${params}` : ''; .map(([key, value]) => `${key}=${value}`)
.join("&");
params = params !== "" ? `&${params}` : "";
xhr.open("GET", `/api/v/1.0/get-muzic?response_format=json${params}`, true); xhr.open("GET", `/api/v/1.0/get-muzic?response_format=json${params}`, true);
xhr.onreadystatechange = function (event) { xhr.onreadystatechange = function (event) {
//console.log(event); //console.log(event);
@ -24,24 +32,121 @@ class Api {
}; };
xhr.send(); xhr.send();
} }
createMuzic (author_id, name, data=null, cb) { deleteMuzic(id, cb) {
const xhr = new XMLHttpRequest();
xhr.open("POST", `/api/v/1.0/remove-item?response_format=json`, true);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onreadystatechange = function (event) {
//console.log(event);
if (this.readyState != 4) return;
if (JSON.parse(this.responseText).response === undefined) {
throw this.responseText;
}
cb(JSON.parse(this.responseText).response);
};
xhr.send(
JSON.stringify({
type: "muzic",
id,
}),
);
}
editMuzic(id, name, data, author_id, cb) {
const xhr = new XMLHttpRequest();
xhr.open("POST", `/api/v/1.0/edit-item?response_format=json`, true);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onreadystatechange = function (event) {
//console.log(event);
if (this.readyState != 4) return;
if (JSON.parse(this.responseText).response === undefined) {
throw this.responseText;
}
cb(JSON.parse(this.responseText).response);
};
xhr.send(
JSON.stringify({
type: "muzic",
id,
name,
author_id,
data,
}),
);
}
createMuzic(author_id, name, data = null, cb) {
data = data === null ? undefined : data; data = data === null ? undefined : data;
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open("POST", `/api/v/1.0/create-item?response_format=json`, true); xhr.open("POST", `/api/v/1.0/create-item?response_format=json`, true);
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8'); xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onreadystatechange = function (event) { xhr.onreadystatechange = function (event) {
//console.log(event); //console.log(event);
if (this.readyState != 4) return; if (this.readyState != 4) return;
cb(JSON.parse(this.responseText).response); cb(JSON.parse(this.responseText).response);
}; };
xhr.send(JSON.stringify({ xhr.send(
type: 'muzic', JSON.stringify({
name, type: "muzic",
author_id, name,
data author_id,
})); data,
}),
);
}
createAuthor(name, cb) {
const xhr = new XMLHttpRequest();
xhr.open("POST", `/api/v/1.0/create-item?response_format=json`, true);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onreadystatechange = function (event) {
//console.log(event);
if (this.readyState != 4) return;
cb(JSON.parse(this.responseText).response);
};
xhr.send(
JSON.stringify({
type: "author",
name,
}),
);
}
removeAuthor(id, cb) {
const xhr = new XMLHttpRequest();
xhr.open("POST", `/api/v/1.0/remove-item?response_format=json`, true);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onreadystatechange = function (event) {
//console.log(event);
if (this.readyState != 4) return;
cb(JSON.parse(this.responseText).response);
};
xhr.send(
JSON.stringify({
type: "author",
id,
}),
);
}
editAuthor(id, name, cb) {
const xhr = new XMLHttpRequest();
xhr.open("POST", `/api/v/1.0/edit-item?response_format=json`, true);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onreadystatechange = function (event) {
//console.log(event);
if (this.readyState != 4) return;
cb(JSON.parse(this.responseText).response);
};
xhr.send(
JSON.stringify({
type: "author",
id,
name,
}),
);
} }
} }
const api = new Api(); const api = new Api();

261
frontend/public/js/main.js
View File

@ -1,36 +1,86 @@
document.getElementById('app-window').innerHTML = '<p><center>Загрузка произведений...</center></p>'; document.getElementById("app-window").innerHTML =
"<p><center>Загрузка произведений...</center></p>";
function toggleShow (authorId) { function toggleShow(authorId) {
document.getElementById(`playlist-author-${authorId}`).hidden = !document.getElementById(`playlist-author-${authorId}`).hidden; document.getElementById(`playlist-author-${authorId}`).hidden =
!document.getElementById(`playlist-author-${authorId}`).hidden;
} }
function showAudio (settingsAuthors, settingsAudio) { function showAudio(settingsAuthors, settingsAudio) {
showAudio.settingsAuthors = settingsAuthors;
showAudio.settingsAudio = settingsAudio;
const step2 = (muzic) => { const step2 = (muzic) => {
//console.log(muzic.items); //console.log(muzic.items);
const showedAuthors = [...(new Set(muzic.items.map(i => `author-${i.author_id}`)))]; const showedAuthors = [
[...document.getElementsByClassName('author-element')].forEach(el => { ...new Set(muzic.items.map((i) => `author-${i.author_id}`)),
];
[...document.getElementsByClassName("author-element")].forEach((el) => {
if (
JSON.stringify(settingsAuthors) === "{}" &&
JSON.stringify(settingsAudio) === "{}"
) {
if (!showedAuthors.includes(el.id)) {
const id = el.id.slice(7);
document.getElementById(`loader-muzic-${id}`).innerHTML =
"<p><b>Пусто. Добавьте произведения</b></p>";
}
return;
}
el.hidden = !showedAuthors.includes(el.id); el.hidden = !showedAuthors.includes(el.id);
}); });
muzic.items.forEach(muzic => { muzic.items
document.getElementById(`loader-muzic-${muzic.author_id}`).hidden = true; .sort((a, b) => a.date - b.date)
if (muzic.is_data_exists) document.getElementById(`playlist-author-${muzic.author_id}`).innerHTML += `<p> .forEach((muzic) => {
document.getElementById(
`loader-muzic-${muzic.author_id}`,
).hidden = true;
if (muzic.is_data_exists)
document.getElementById(
`playlist-author-${muzic.author_id}`,
).innerHTML += `<p><div id="muzic-item-${muzic.id}">
<h6><button class="btn btn-secondary" id="edit-muzic-item-${
muzic.id
}" onclick='showEditMuzic(${muzic.id}, ${JSON.stringify(
muzic.name,
)}, ${
muzic.is_data_exists
});'><i class="bi bi-pencil-square"></i></button> ${muzic.name}</h6>
<button class="btn btn-primary play-button" onclick="playMuzic(${
muzic.id
})" id="play-${muzic.id}">Прослушать</button>
<button class="btn btn-primary pause-button" onclick="" id="pause-${
muzic.id
}" disabled>Пауза</button>
<input class="road-muzic" type="range" id="road-${
muzic.id
}" name="stop" min="0" max="0" value="0" step="0.01" style="width: 70%;"/>
</div></p>`;
else
document.getElementById(
`playlist-author-${muzic.author_id}`,
).innerHTML += `<p><div id="muzic-item-${muzic.id}">
<h6>${muzic.name}</h6> <h6>${muzic.name}</h6>
<button class="btn btn-primary play-button" onclick="playMuzic(${muzic.id})" id="play-${muzic.id}">Прослушать</button> <button class="btn btn-secondary" onclick='showEditMuzic(${
<button class="btn btn-primary pause-button" onclick="" id="pause-${muzic.id}" disabled>Пауза</button> muzic.id
<input class="road-muzic" type="range" id="road-${muzic.id}" name="stop" min="0" max="0" value="0" step="0.01" style="width: 70%;"/> }, ${JSON.stringify(muzic.name)}, ${
</p>`; muzic.is_data_exists
else document.getElementById(`playlist-author-${muzic.author_id}`).innerHTML += `<p> });' id="add-file-${muzic.id}" id="edit-muzic-item-${
<h6>${muzic.name}</h6> muzic.id
<button class="btn btn-secondary" onclick="" id="add-file-${muzic.id}">Добавить звуковой файл</button> }">Добавить звуковой файл</button>
</p>`; </div></p>`;
}); });
} };
api.getAuthors(settingsAuthors, (authors) => { api.getAuthors(settingsAuthors, (authors) => {
document.getElementById('app-window').innerHTML = ''; document.getElementById("app-window").innerHTML = "";
authors.items.forEach((author) => { authors.items
document.getElementById('app-window').innerHTML += `<div class="author-element" id="author-${author.id}"> .sort((a, b) => a.date - b.date)
<h3>${author.name}</h3> .forEach((author) => {
document.getElementById(
"app-window",
).innerHTML += `<div class="author-element" id="author-${author.id}">
<div id="author-info-${author.id}"><h3>${author.name} <button class="btn btn-primary" id="edit-author-${author.id}" onclick="showAuthorEditor(${author.id}, '${author.name}');">Редактировать</button></h3></div>
<p>Произведения</p> <p>Произведения</p>
<hr/> <hr/>
<a href='#' onclick="toggleShow(${author.id})">Показать/Скрыть</a> <a href='#' onclick="toggleShow(${author.id})">Показать/Скрыть</a>
@ -39,80 +89,111 @@ function showAudio (settingsAuthors, settingsAudio) {
</div> </div>
<div id="add-muzic-${author.id}" style="margin-bottom: 15px;"><center><button class="btn btn-primary" id="add-muzic-button-${author.id}">Добавить произведение</button></center></div> <div id="add-muzic-${author.id}" style="margin-bottom: 15px;"><center><button class="btn btn-primary" id="add-muzic-button-${author.id}">Добавить произведение</button></center></div>
</div>`; </div>`;
const addMuzicButtonFunct = () => setTimeout( () => const addMuzicButtonFunct = () =>
document.getElementById(`add-muzic-button-${author.id}`).onclick = async () => { setTimeout(
// console.log('>>', author.id); () =>
document.getElementById(`add-muzic-${author.id}`).innerHTML = `<p><input class="form-control" type="text" placeholder="Введите название произведения" id="muzic-name-input-${author.id}" style="width: 90%"></p> (document.getElementById(
`add-muzic-button-${author.id}`,
).onclick = async () => {
// console.log('>>', author.id);
document.getElementById(
`add-muzic-${author.id}`,
).innerHTML = `<p><input class="form-control" type="text" placeholder="Введите название произведения" id="muzic-name-input-${author.id}" style="width: 90%"></p>
<p><button class="btn btn-primary" id="attach-file-${author.id}">Добавить файл (.mp3)</button> <p><button class="btn btn-primary" id="attach-file-${author.id}">Добавить файл (.mp3)</button>
<button class="btn btn-primary" id="add-muzic-${author.id}">Добавить произведение</button> <button class="btn btn-primary" id="add-muzic-${author.id}">Добавить произведение</button>
<button class="btn btn-danger" id="cancel-add-muzic-${author.id}">Отменить</button></p> <button class="btn btn-danger" id="cancel-add-muzic-${author.id}">Отменить</button></p>`;
`; setTimeout(() => {
setTimeout( document.getElementById(
() => { `cancel-add-muzic-${author.id}`,
document.getElementById(`cancel-add-muzic-${author.id}`).onclick = function () { ).onclick = function () {
document.getElementById(`add-muzic-${author.id}`).innerHTML = `<center><button class="btn btn-primary" id="add-muzic-button-${author.id}">Добавить произведение</button></center>`; document.getElementById(
addMuzicButtonFunct(); `add-muzic-${author.id}`,
}; ).innerHTML = `<center><button class="btn btn-primary" id="add-muzic-button-${author.id}">Добавить произведение</button></center>`;
addMuzicButtonFunct();
document.getElementById(`add-muzic-${author.id}`).onclick = function () {
if (document.getElementById(`muzic-name-input-${author.id}`).value.length >= 2) {
api.createMuzic(
author.id,
document.getElementById(`muzic-name-input-${author.id}`).value,
document.getElementById(`attach-file-${author.id}`).filedata,
() => {
showAudio(settingsAuthors, settingsAudio);
}
);
document.getElementById(`add-muzic-${author.id}`).innerHTML = 'Добавление файла...';
}
};
document.getElementById(`attach-file-${author.id}`).onclick = function () {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'audio/mpeg';
input.click();
input.onchange = function (e) {
function arrayBufferToBase64( buffer ) {
let binary = '';
let bytes = new Uint8Array( buffer );
let len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
return window.btoa( binary );
}
const file = e.target.files[0];
// console.log(file);
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function() {
// console.log('reader.result', reader.result);
if (file.type === 'audio/mpeg') {
document.getElementById(`attach-file-${author.id}`).filedata = arrayBufferToBase64(reader.result);
document.getElementById(`attach-file-${author.id}`).innerText = "Загружен файл: " + file.name;
}
// console.log(arrayBufferToBase64(reader.result));
}; };
};
}; document.getElementById(`add-muzic-${author.id}`).onclick =
}, 0 function () {
if (
document.getElementById(`muzic-name-input-${author.id}`)
.value.length >= 2
) {
api.createMuzic(
author.id,
document.getElementById(
`muzic-name-input-${author.id}`,
).value,
document.getElementById(`attach-file-${author.id}`)
.filedata,
() => {
showAudio(settingsAuthors, settingsAudio);
},
);
document.getElementById(
`add-muzic-${author.id}`,
).innerHTML = "Добавление файла...";
}
};
document.getElementById(`attach-file-${author.id}`).onclick =
function () {
const input = document.createElement("input");
input.type = "file";
input.accept = "audio/mpeg";
input.click();
input.onchange = function (e) {
function arrayBufferToBase64(buffer) {
let binary = "";
let bytes = new Uint8Array(buffer);
let len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
const file = e.target.files[0];
// console.log(file);
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {
// console.log('reader.result', reader.result);
if (file.type === "audio/mpeg") {
document.getElementById(
`attach-file-${author.id}`,
).filedata = arrayBufferToBase64(reader.result);
document.getElementById(
`attach-file-${author.id}`,
).innerText = "Загружен файл: " + file.name;
}
// console.log(arrayBufferToBase64(reader.result));
};
};
};
}, 0);
}),
0,
); );
}, 0); addMuzicButtonFunct();
addMuzicButtonFunct(); });
});
api.getMuzic(settingsAudio, step2); api.getMuzic(settingsAudio, step2);
document.getElementById('app-window').innerHTML += '<div id="add-author" style="margin-bottom: 15px;"><center><button class="btn btn-primary" id="add-author-button">Добавить исполнителя</button></center></div>' document.getElementById("app-window").innerHTML +=
'<div id="add-author" style="margin-bottom: 15px;"><center><button class="btn btn-primary" id="add-author-button" onclick="addAuthorMenu();">Добавить исполнителя</button></center></div>';
}); });
} }
setTimeout(() => showAudio({}, {}), 0); setTimeout(() => showAudio({}, {}), 0);
document.getElementById('search-input').onchange = function () { document.getElementById("search-input").onchange = function () {
console.log(this.value); console.log(this.value);
setTimeout(() => showAudio({}, { setTimeout(
q : this.value () =>
}), 0); showAudio(
}; {},
{
q: this.value,
},
),
0,
);
};

185
frontend/public/js/menu.js Normal file
View File

@ -0,0 +1,185 @@
function removeAuthor(authorId) {
api.removeAuthor(authorId, () => {
showAudio(showAudio.settingsAuthors, showAudio.settingsAudio);
});
}
function editAuthor(authorId) {
const name = document.getElementById(`input-author-name-${authorId}`).value;
api.editAuthor(authorId, name, (res) => {
if (res !== undefined) removeAuthorEditor(authorId, name);
});
}
function removeAuthorEditor(authorId, authorName) {
document.getElementById(
`author-info-${authorId}`,
).innerHTML = `<h3>${authorName} <button class="btn btn-primary" id="edit-author-${authorId}" onclick="showAuthorEditor(${authorId}, '${authorName}');">Редактировать</button></h3>`;
setTimeout(() => {
document.getElementById(`edit-author-${authorId}`).onclick = () =>
showAuthorEditor(authorId, authorName);
}, 5);
}
function showAuthorEditorButtonInit(authorId) {
const authorName = document.getElementById(
`author-info-${authorId}`,
).lastValue;
document.getElementById(`cancel-edit-author-${authorId}`).onclick = () =>
removeAuthorEditor(authorId, authorName);
document.getElementById(`remove-author-${authorId}`).onclick = () =>
removeAuthor(authorId);
document.getElementById(`edit-author-${authorId}`).onclick = () =>
editAuthor(authorId);
// document.getElementById(`add-author-button`).onclick = addAuthor;
}
function showAuthorEditor(authorId, lastValue) {
document.getElementById(`author-info-${authorId}`).lastValue = lastValue;
document.getElementById(
`author-info-${authorId}`,
).innerHTML = `<h3><input id="input-author-name-${authorId}" class="form-control" type="text", value=${JSON.stringify(
lastValue,
)}/>
<button class="btn btn-primary" id="edit-author-${authorId}">Сохранить</button>
<button class="btn btn-secondary" id="cancel-edit-author-${authorId}">Отмена</button>
<button class="btn btn-danger" id="remove-author-${authorId}">Удалить</button>
</h3>`;
setTimeout(() => showAuthorEditorButtonInit(authorId), 5);
}
function addAuthor() {
const name = document.getElementById(`author-name-input`).value;
document.getElementById("add-author").innerHTML =
"<center><p>Добавляем..</center></p>";
api.createAuthor(name, () => {
showAudio(showAudio.settingsAuthors, showAudio.settingsAudio);
});
}
function rmAuthorMenuButtonInit() {
document.getElementById(`add-author-button`).onclick = addAuthorMenu;
}
function removeAuthorMenu() {
document.getElementById(
"add-author",
).innerHTML = `<center><button class="btn btn-primary" id="add-author-button">Добавить исполнителя</button></center>`;
setTimeout(rmAuthorMenuButtonInit, 5);
}
function authorMenuButtonInit() {
document.getElementById(`cancel-add-author`).onclick = removeAuthorMenu;
document.getElementById(`add-author-button`).onclick = addAuthor;
}
function addAuthorMenu() {
document.getElementById(
"add-author",
).innerHTML = `<center><p><input class="form-control" type="text" placeholder="Введите название исполнителя" id="author-name-input" style="width: 90%"></p>
<button class="btn btn-primary" id="add-author-button">Добавить исполнителя</button>
<button class="btn btn-danger" id="cancel-add-author">Отменить</button></p></center>`;
setTimeout(authorMenuButtonInit, 5);
}
function selectFile(muzicId) {
const input = document.createElement("input");
input.type = "file";
input.accept = "audio/mpeg";
input.click();
input.onchange = function (e) {
function arrayBufferToBase64(buffer) {
let binary = "";
let bytes = new Uint8Array(buffer);
let len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
const file = e.target.files[0];
// console.log(file);
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {
// console.log('reader.result', reader.result);
if (file.type === "audio/mpeg") {
document.getElementById(`edit-attach-file-${muzicId}`).filedata =
arrayBufferToBase64(reader.result);
document.getElementById(`edit-attach-file-${muzicId}`).innerText =
"Загружен файл: " + file.name;
document.getElementById(`delete-attach-${muzicId}`).disabled = false;
}
// console.log(arrayBufferToBase64(reader.result));
};
};
}
function editMuzic(muzicId, muzicName) {
api.editMuzic(
muzicId,
muzicName,
document.getElementById(`edit-attach-file-${muzicId}`).filedata,
undefined,
(res) => {
showAudio(showAudio.settingsAuthors, showAudio.settingsAudio);
},
);
}
function removeMuzic(muzicId) {
api.deleteMuzic(muzicId, (res) => {
showAudio(showAudio.settingsAuthors, showAudio.settingsAudio);
});
}
function bindShowEditMuzicButtons(muzicId, muzicName, dataExists) {
document.getElementById(`cancel-edit-muzic-${muzicId}`).onclick = () => {
document.getElementById(`muzic-item-${muzicId}`).innerHTML = dataExists
? `<h6><button class="btn btn-secondary" id="edit-muzic-item-${muzicId}" onclick='showEditMuzic(${muzicId}, ${JSON.stringify(
muzicName,
)}, ${dataExists});'><i class="bi bi-pencil-square"></i></button> ${muzicName}</h6>
<button class="btn btn-primary play-button" onclick="playMuzic(${muzicId})" id="play-${muzicId}">Прослушать</button>
<button class="btn btn-primary pause-button" onclick="" id="pause-${muzicId}" disabled>Пауза</button>
<input class="road-muzic" type="range" id="road-${muzicId}" name="stop" min="0" max="0" value="0" step="0.01" style="width: 70%;"/>`
: `<p><div id="muzic-item-${muzicId}">
<h6>${muzicName}</h6>
<button class="btn btn-secondary" onclick='showEditMuzic(${muzicId}, ${JSON.stringify(
muzicName,
)}, ${dataExists});' id="add-file-${muzicId}" id="edit-muzic-item-${muzicId}">Добавить звуковой файл</button>
</div></p>`;
};
document.getElementById(`edit-attach-file-${muzicId}`).onclick = () =>
selectFile(muzicId);
document.getElementById(`delete-attach-${muzicId}`).onclick = () => {
document.getElementById(`edit-attach-file-${muzicId}`).innerText =
"Добавить файл (.mp3)";
document.getElementById(`edit-attach-file-${muzicId}`).filedata = null;
document.getElementById(`delete-attach-${muzicId}`).disabled = true;
};
document.getElementById(`edit-muzic-${muzicId}`).onclick = () =>
editMuzic(muzicId, muzicName);
document.getElementById(`delete-muzic-${muzicId}`).onclick = () =>
removeMuzic(muzicId);
}
function showEditMuzic(muzicId, muzicName, dataExists) {
document.getElementById(
`muzic-item-${muzicId}`,
).innerHTML = `<p><input class="form-control" type="text" placeholder="Введите название произведения" value=${JSON.stringify(
muzicName,
)} id="muzic-edit-name-input-${muzicId}" style="width: 90%"></p>
<p><button class="btn btn-primary" id="edit-attach-file-${muzicId}">${
dataExists ? "Сменить файл (.mp3)" : "Добавить файл (.mp3)"
}</button>
<button class="btn btn-danger" id="delete-attach-${muzicId}"${
dataExists ? "" : " disabled"
}>Удалить файл</button>
<button class="btn btn-primary" id="edit-muzic-${muzicId}">Редактировать произведение</button>
<button class="btn btn-secondary" id="cancel-edit-muzic-${muzicId}">Отменить</button>
<button class="btn btn-danger" id="delete-muzic-${muzicId}">Удалить произведение</button></p>`;
setTimeout(() => bindShowEditMuzicButtons(muzicId, muzicName, dataExists), 5);
}

26
frontend/public/js/sound.js
View File

@ -1,4 +1,4 @@
let audio = new Audio('/api/v/1.0/muzic'); let audio = new Audio("/api/v/1.0/muzic");
function stopMuzic(id, interval) { function stopMuzic(id, interval) {
audio.pause(); audio.pause();
@ -6,7 +6,7 @@ function stopMuzic(id, interval) {
document.getElementById(`play-${id}`).innerText = "Прослушать"; document.getElementById(`play-${id}`).innerText = "Прослушать";
document.getElementById(`pause-${id}`).disabled = true; document.getElementById(`pause-${id}`).disabled = true;
document.getElementById(`play-${id}`).onclick = () => playMuzic(id); document.getElementById(`play-${id}`).onclick = () => playMuzic(id);
clearInterval(interval); clearInterval(interval);
document.getElementById(`road-${id}`).value = 0; document.getElementById(`road-${id}`).value = 0;
document.getElementById(`road-${id}`).max = 0; document.getElementById(`road-${id}`).max = 0;
@ -26,18 +26,15 @@ function resumeMuzic(id) {
audio.play(); audio.play();
} }
function changeTime (value, id) { function changeTime(value, id) {
audio.currentTime = value; audio.currentTime = value;
} }
function playMuzic(id) { function playMuzic(id) {
audio.pause(); audio.pause();
audio.currentTime = 0; audio.currentTime = 0;
if (audio.muzId !== undefined) stopMuzic( if (audio.muzId !== undefined) stopMuzic(audio.muzId, audio.muzTimer);
audio.muzId,
audio.muzTimer
);
audio = new Audio(`/api/v/1.0/muzic?id=${id}`); audio = new Audio(`/api/v/1.0/muzic?id=${id}`);
audio.onloadedmetadata = function () { audio.onloadedmetadata = function () {
audio.muzId = id; audio.muzId = id;
@ -45,17 +42,18 @@ function playMuzic(id) {
document.getElementById(`pause-${id}`).disabled = false; document.getElementById(`pause-${id}`).disabled = false;
document.getElementById(`road-${id}`).max = audio.duration; document.getElementById(`road-${id}`).max = audio.duration;
audio.play(); audio.play();
const interval = setInterval(() => { const interval = setInterval(() => {
document.getElementById(`road-${id}`).value = audio.currentTime; document.getElementById(`road-${id}`).value = audio.currentTime;
}, 750); }, 750);
audio.muzTimer = interval; audio.muzTimer = interval;
document.getElementById(`play-${id}`).onclick = () => stopMuzic(id, interval); document.getElementById(`play-${id}`).onclick = () =>
stopMuzic(id, interval);
document.getElementById(`pause-${id}`).onclick = () => pauseMuzic(id); document.getElementById(`pause-${id}`).onclick = () => pauseMuzic(id);
document.getElementById(`road-${id}`).onchange = function () { document.getElementById(`road-${id}`).onchange = function () {
// console.log('value', this.value); // console.log('value', this.value);
changeTime(this.value, id) changeTime(this.value, id);
}; };
} };
} }

16
page-view.js
View File

@ -1,11 +1,9 @@
const router = require('express').Router(); const router = require("express").Router();
const fs = require('fs'); const fs = require("fs");
router.use(require('express').static('./frontend/public')); router.use(require("express").static("./frontend/public"));
router.get('/', async (req, res) => { router.get("/", async (req, res) => {
res.send( res.send(fs.readFileSync("./frontend/main.html", { encoding: "utf-8" }));
fs.readFileSync("./frontend/main.html", { encoding: "utf-8" }) });
);
})
module.exports = router; module.exports = router;

2
server.js
View File

@ -90,4 +90,4 @@ server.listen(config().port, config().address, async (err) => {
`Kodex Muzic catalog runned at ${config().address}:${config().port}`, `Kodex Muzic catalog runned at ${config().address}:${config().port}`,
); );
} }
}); });