היו כמה ששאלו אותי
וראיתי בפורום כמה שפעם שאלו
בקשר למוזיקה בהמתנה
לא יודע אם באמת צריכים לזה אשמח לשמוע ממכם אם זה דבר נצרך או לא
אבל בניתי קובץ HTML לניהול מוזיקה בהמתנה אישיים
שם אפשר ליצור מוזיקה אישית וכן לבדוק האם יש מוזיקה בשלוחה מסוימת או למחוק את המוזיקה
קוד ה HTML הוא
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>מוזיקה בהמתנה</title>
<style>
:root {
--gold: #d6a63a;
--gold-light: #fff0b0;
--text: #fff9e8;
--muted: #b7aa88;
--danger: #ff9e9e;
--success: #a9efb0;
--line: rgba(220,177,71,.28);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
color: var(--text);
background: #050505;
font-family: Arial, "Segoe UI", sans-serif;
overflow-x: hidden;
}
body::before,
body::after {
content: "";
position: fixed;
width: 360px;
height: 360px;
border-radius: 50%;
filter: blur(8px);
pointer-events: none;
opacity: .3;
z-index: 0;
}
body::before {
top: -150px;
right: -100px;
background: radial-gradient(circle, #b88120, transparent 68%);
}
body::after {
bottom: -190px;
left: -110px;
background: radial-gradient(circle, #67430d, transparent 68%);
}
.page {
position: relative;
z-index: 1;
width: min(980px, calc(100% - 28px));
margin: 0 auto;
padding: 40px 0 58px;
}
header {
text-align: center;
margin-bottom: 30px;
animation: rise .7s ease both;
}
.brand-mark {
width: 58px;
height: 58px;
margin: 0 auto 16px;
display: grid;
place-items: center;
color: #1b1306;
font-size: 1.7rem;
border: 1px solid #ffe39a;
border-radius: 18px 18px 18px 4px;
background: linear-gradient(145deg, #fff0ae, var(--gold));
box-shadow:
0 0 35px rgba(214,166,58,.25),
inset 0 1px rgba(255,255,255,.7);
transform: rotate(-8deg);
}
.eyebrow {
color: var(--muted);
font-size: .78rem;
letter-spacing: .18em;
margin-bottom: 10px;
}
h1 {
margin: 0;
font-size: clamp(2.25rem, 7vw, 4rem);
letter-spacing: -.04em;
background: linear-gradient(
135deg,
#fff8d6 8%,
var(--gold-light) 40%,
#a7741c 90%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.subtitle {
color: #8f825f;
margin: 12px 0 0;
font-size: .93rem;
}
.tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
padding: 8px;
margin-bottom: 19px;
background: rgba(20,17,11,.72);
border: 1px solid var(--line);
border-radius: 20px;
box-shadow: 0 18px 60px rgba(0,0,0,.32);
backdrop-filter: blur(18px);
}
.tab {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
border: 1px solid transparent;
border-radius: 14px;
padding: 15px 8px;
color: var(--muted);
background: transparent;
cursor: pointer;
font-size: .98rem;
font-weight: 700;
transition: .25s ease;
}
.tab:hover {
color: var(--gold-light);
background: rgba(216,169,58,.09);
transform: translateY(-1px);
}
.tab.active {
color: #1c1304;
background: linear-gradient(
135deg,
#fff0ab,
#d4a33a 72%,
#a5761f
);
border-color: #ffe69a;
box-shadow: 0 7px 22px rgba(214,166,58,.2);
}
.card {
position: relative;
padding: clamp(23px, 5vw, 40px);
background: linear-gradient(
145deg,
rgba(35,30,18,.78),
rgba(11,11,10,.88) 65%
);
border: 1px solid var(--line);
border-radius: 24px;
box-shadow:
0 25px 90px rgba(0,0,0,.48),
inset 0 1px rgba(255,244,190,.08);
backdrop-filter: blur(22px);
}
.card-head {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 28px;
}
.card-title {
margin: 0 0 7px;
color: var(--gold-light);
font-size: 1.65rem;
}
.endpoint {
margin: 0;
color: #96865f;
font-size: .78rem;
direction: ltr;
text-align: right;
word-break: break-all;
}
.live-badge {
display: flex;
align-items: center;
gap: 7px;
padding: 8px 11px;
color: #d9c794;
border: 1px solid rgba(214,166,58,.28);
border-radius: 99px;
background: rgba(214,166,58,.08);
font-size: .72rem;
white-space: nowrap;
}
.live-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #b9e887;
box-shadow: 0 0 10px #b9e887;
}
.fields {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.field.full {
grid-column: 1 / -1;
}
.field[hidden] {
display: none !important;
}
label {
display: flex;
align-items: center;
gap: 7px;
color: #ebddad;
font-weight: 700;
margin-bottom: 9px;
font-size: .9rem;
}
label span {
color: var(--gold);
}
input {
width: 100%;
padding: 15px 16px;
color: var(--text);
background: rgba(4,4,4,.72);
border: 1px solid #514625;
border-radius: 12px;
outline: none;
font-size: 1rem;
direction: ltr;
text-align: left;
transition: .2s ease;
}
input:focus {
border-color: var(--gold);
background: #100e09;
box-shadow:
0 0 0 4px rgba(216,169,58,.12),
0 5px 22px rgba(0,0,0,.24);
}
input::placeholder {
color: #706547;
}
input[type="file"] {
direction: rtl;
text-align: right;
padding: 11px;
cursor: pointer;
}
input[type="file"]::file-selector-button {
margin-left: 12px;
padding: 9px 14px;
color: #1b1306;
background: linear-gradient(135deg, #fff0ad, var(--gold));
border: 0;
border-radius: 8px;
font-weight: 700;
cursor: pointer;
}
input[readonly] {
color: var(--gold-light);
}
/* שתי אפשרויות ברוחב שווה */
.mode-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
}
.mode-option {
display: block;
width: 100%;
cursor: pointer;
}
.mode-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.mode-option-content {
display: block;
width: 100%;
min-height: 92px;
padding: 15px;
color: var(--muted);
background: rgba(4,4,4,.52);
border: 1px solid #514625;
border-radius: 12px;
transition: .2s ease;
}
.mode-option-content strong {
display: block;
color: #ebddad;
margin-bottom: 5px;
}
.mode-option-content small {
color: #8f825f;
line-height: 1.5;
}
.mode-option input:checked + .mode-option-content {
color: var(--text);
border-color: var(--gold);
background: rgba(214,166,58,.12);
box-shadow: 0 0 0 3px rgba(214,166,58,.08);
}
.mode-option input:checked + .mode-option-content strong {
color: var(--gold-light);
}
.file-help {
margin-top: 8px;
color: #827652;
font-size: .75rem;
line-height: 1.6;
}
.actions {
position: relative;
display: flex;
justify-content: flex-start;
margin-top: 28px;
}
button[type="submit"] {
min-width: 210px;
padding: 15px 27px;
border: 0;
border-radius: 12px;
color: #171108;
background: linear-gradient(135deg, #fff0ad, var(--gold));
font-size: 1rem;
font-weight: 800;
cursor: pointer;
box-shadow: 0 10px 30px rgba(214,166,58,.2);
transition: .2s ease;
}
button[type="submit"]:hover {
transform: translateY(-3px);
filter: brightness(1.08);
}
button[type="submit"]:disabled {
opacity: .55;
cursor: wait;
transform: none;
}
.status-box {
position: relative;
display: none;
margin-top: 20px;
padding: 15px 18px;
border-radius: 12px;
border: 1px solid rgba(214,166,58,.28);
background: rgba(214,166,58,.08);
color: var(--gold-light);
line-height: 1.7;
}
.status-box.show {
display: block;
}
.status-box.success {
color: var(--success);
border-color: rgba(169,239,176,.35);
background: rgba(169,239,176,.07);
}
.status-box.error {
color: var(--danger);
border-color: rgba(255,158,158,.35);
background: rgba(255,158,158,.07);
}
.response-box {
position: relative;
margin-top: 27px;
padding: 21px;
border: 1px solid rgba(214,166,58,.42);
border-radius: 17px;
background: rgba(3,3,3,.65);
}
.response-box h2 {
margin: 0 0 14px;
color: var(--gold-light);
font-size: 1.16rem;
}
#response {
margin: 0;
min-height: 74px;
white-space: pre-wrap;
overflow-wrap: anywhere;
color: var(--text);
font: 14px/1.7 Consolas, monospace;
direction: ltr;
text-align: left;
}
#response.success {
color: var(--success);
}
#response.error {
color: var(--danger);
}
.result-actions {
display: none;
gap: 10px;
margin-top: 15px;
}
.result-actions.show {
display: flex;
}
.copy-button {
padding: 10px 15px;
border: 1px solid var(--gold);
border-radius: 9px;
color: var(--gold-light);
background: rgba(214,166,58,.12);
cursor: pointer;
font-weight: 700;
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 620px) {
.tabs,
.fields {
grid-template-columns: 1fr;
}
.field.full {
grid-column: auto;
}
.mode-options {
grid-template-columns: 1fr;
}
.actions button {
width: 100%;
}
.card-head {
display: block;
}
.live-badge {
display: inline-flex;
margin-top: 14px;
}
}
</style>
</head>
<body>
<main class="page">
<header>
<div class="brand-mark" aria-hidden="true">♫</div>
<div class="eyebrow">ניהול מוזיקה בהמתנה</div>
<h1>מוזיקה בהמתנה</h1>
<p class="subtitle">
יצירה, בדיקה ומחיקה של מנגינות במערכת ימות המשיח
</p>
</header>
<nav class="tabs" aria-label="סוג פעולה">
<button class="tab active" type="button" data-mode="create">
✦ יצירת מוזיקה
</button>
<button class="tab" type="button" data-mode="check">
⌕ בדיקת מוזיקה
</button>
<button class="tab" type="button" data-mode="delete">
⌫ מחיקת מוזיקה
</button>
</nav>
<section class="card">
<div class="card-head">
<div>
<h2 class="card-title" id="modeTitle">
יצירת מוזיקה
</h2>
<p class="endpoint" id="endpoint">
https://www.call2all.co.il/ym/api/CreateMusicOnHolds
</p>
</div>
<div class="live-badge">
<span class="live-dot"></span>
חיבור פעיל
</div>
</div>
<form id="musicForm">
<div class="fields">
<div class="field full">
<label for="token">
טוקן המערכת
<span>*</span>
</label>
<input
id="token"
name="token"
type="text"
required
autocomplete="off"
placeholder="הזן token"
>
</div>
<div class="field full" id="sourceField">
<label>
מקור המוזיקה
<span>*</span>
</label>
<div class="mode-options">
<label class="mode-option">
<input
type="radio"
name="musicSource"
value="existing"
checked
>
<span class="mode-option-content">
<strong>שימוש בקובץ קיים</strong>
<small>
הקובץ כבר נמצא במערכת.
</small>
</span>
</label>
<label class="mode-option">
<input
type="radio"
name="musicSource"
value="upload"
>
<span class="mode-option-content">
<strong>העלאת קובץ חדש</strong>
<small>
הקובץ יועלה בשם המנגינה.
</small>
</span>
</label>
</div>
</div>
<div class="field full" id="pathField" hidden>
<label for="path">
נתיב לבדיקה
<span>*</span>
</label>
<input
id="path"
name="path"
type="text"
value="ivr2:/"
placeholder="ivr2:/"
>
</div>
<div class="field full" id="folderPathField">
<label for="folderPath">
נתיב התיקייה של הקובץ הקיים
<span>*</span>
</label>
<input
id="folderPath"
name="folderPath"
type="text"
value="ivr2:/"
placeholder="לדוגמה: ivr2:/1/1"
>
</div>
<div class="field full" id="nameField">
<label for="name">
שם הקובץ ושם המנגינה
<span>*</span>
</label>
<input
id="name"
name="name"
type="text"
required
placeholder="לדוגמה: שלום"
>
</div>
<div class="field full" id="uploadPathField" hidden>
<label for="uploadBasePath">
נתיב השלוחה
<span>*</span>
</label>
<input
id="uploadBasePath"
name="uploadBasePath"
type="text"
value="ivr2:/"
placeholder="לדוגמה: ivr2:/1/1"
>
</div>
<div class="field full" id="fullPathField" hidden>
<label for="fullUploadPath">
נתיב מלא שייווצר אוטומטית
</label>
<input
id="fullUploadPath"
type="text"
readonly
>
<div class="file-help">
לדוגמה: ivr2:/1/1/שלום/שלום.wav
</div>
</div>
<div class="field full" id="fileField" hidden>
<label for="audioFile">
בחירת קובץ שמע
<span>*</span>
</label>
<input
id="audioFile"
name="audioFile"
type="file"
accept="audio/*,.mp3,.wav,.m4a,.ogg,.aac,.flac"
>
<div class="file-help">
גודל מקסימלי: 45MB.
</div>
</div>
</div>
<div class="actions">
<button id="submitButton" type="submit">
שליחה לשרת
</button>
</div>
</form>
<div id="statusBox" class="status-box"></div>
<div class="response-box">
<h2>תשובת שרת</h2>
<pre id="response">כאן תוצג התשובה לאחר השליחה.</pre>
<div id="resultActions" class="result-actions">
<button id="copyButton" class="copy-button" type="button">
העתקת קוד המנגינה
</button>
</div>
</div>
</section>
</main>
<script>
const API_BASE =
"https://www.call2all.co.il/ym/api/";
const modes = {
create: {
title: "יצירת מוזיקה",
endpoint: "CreateMusicOnHolds"
},
check: {
title: "בדיקת מוזיקה",
endpoint: "GetMusicOnHoldByPath"
},
delete: {
title: "מחיקת מוזיקה",
endpoint: "DeleteMusicOnHolds"
}
};
let currentMode = "create";
const form =
document.getElementById("musicForm");
const response =
document.getElementById("response");
const modeTitle =
document.getElementById("modeTitle");
const endpointText =
document.getElementById("endpoint");
const submitButton =
document.getElementById("submitButton");
const statusBox =
document.getElementById("statusBox");
const resultActions =
document.getElementById("resultActions");
const copyButton =
document.getElementById("copyButton");
const tokenInput =
document.getElementById("token");
const pathInput =
document.getElementById("path");
const folderPathInput =
document.getElementById("folderPath");
const nameInput =
document.getElementById("name");
const uploadBasePathInput =
document.getElementById("uploadBasePath");
const fullUploadPathInput =
document.getElementById("fullUploadPath");
const audioFileInput =
document.getElementById("audioFile");
const fields = {
source: document.getElementById("sourceField"),
path: document.getElementById("pathField"),
folderPath: document.getElementById("folderPathField"),
name: document.getElementById("nameField"),
uploadPath: document.getElementById("uploadPathField"),
fullPath: document.getElementById("fullPathField"),
file: document.getElementById("fileField")
};
function getMusicSource() {
const selected =
document.querySelector(
'input[name="musicSource"]:checked'
);
return selected
? selected.value
: "existing";
}
function setRequired(element, required) {
element.required = required;
}
function cleanPath(path) {
return path.trim().replace(/\/+$/, "");
}
function setStatus(message, type = "") {
statusBox.textContent = message;
statusBox.className = "status-box show";
if (type) {
statusBox.classList.add(type);
}
}
function clearStatus() {
statusBox.textContent = "";
statusBox.className = "status-box";
}
function setResponse(message, type = "") {
response.textContent = message;
response.className = type;
}
function hideCopyButton() {
resultActions.classList.remove("show");
response.dataset.musicCode = "";
}
function showCopyButton(code) {
response.dataset.musicCode = code;
resultActions.classList.add("show");
}
function updateFullUploadPath() {
const basePath =
cleanPath(uploadBasePathInput.value);
const musicName =
nameInput.value.trim();
if (!basePath || !musicName) {
fullUploadPathInput.value = "";
return;
}
fullUploadPathInput.value =
`${basePath}/${musicName}/${musicName}.wav`;
}
function updateCreateFields() {
const isUpload =
getMusicSource() === "upload";
fields.folderPath.hidden = isUpload;
fields.uploadPath.hidden = !isUpload;
fields.fullPath.hidden = !isUpload;
fields.file.hidden = !isUpload;
setRequired(
folderPathInput,
currentMode === "create" && !isUpload
);
setRequired(
uploadBasePathInput,
currentMode === "create" && isUpload
);
setRequired(
audioFileInput,
currentMode === "create" && isUpload
);
updateFullUploadPath();
}
function setMode(mode) {
currentMode = mode;
const config = modes[mode];
modeTitle.textContent = config.title;
endpointText.textContent =
API_BASE + config.endpoint;
document.querySelectorAll(".tab")
.forEach(tab => {
tab.classList.toggle(
"active",
tab.dataset.mode === mode
);
});
fields.source.hidden = mode !== "create";
fields.path.hidden = mode !== "check";
fields.name.hidden = mode === "check";
if (mode !== "create") {
fields.folderPath.hidden = true;
fields.uploadPath.hidden = true;
fields.fullPath.hidden = true;
fields.file.hidden = true;
} else {
updateCreateFields();
}
setRequired(pathInput, mode === "check");
setRequired(nameInput, mode !== "check");
clearStatus();
hideCopyButton();
setResponse(
"כאן תוצג התשובה לאחר השליחה."
);
}
function pretty(value) {
if (typeof value === "string") {
return value;
}
try {
return JSON.stringify(value, null, 2);
} catch {
return String(value);
}
}
function displayServerError(value) {
hideCopyButton();
setResponse(pretty(value), "error");
}
async function readResponse(responseObject) {
const rawText =
await responseObject.text();
try {
return JSON.parse(rawText);
} catch {
return rawText;
}
}
function validateApiReply(reply) {
if (
!reply ||
typeof reply !== "object" ||
Array.isArray(reply)
) {
throw new Error(pretty(reply));
}
if (
reply.responseStatus &&
String(reply.responseStatus).toUpperCase() !== "OK"
) {
throw new Error(
reply.message ||
reply.messageCode ||
"השרת החזיר שגיאה."
);
}
return reply;
}
async function uploadAudioFile(
token,
uploadFolderPath,
file,
musicName
) {
const uploadFilePath =
`${uploadFolderPath}/${musicName}.wav`;
const renamedFile = new File(
[file],
`${musicName}.wav`,
{
type: "audio/wav",
lastModified: Date.now()
}
);
const formData = new FormData();
formData.append("token", token);
/*
שליחת נתיב מלא לקובץ,
ולא רק נתיב התיקייה.
*/
formData.append("path", uploadFilePath);
formData.append("convertAudio", "1");
formData.append("autoNumbering", "0");
formData.append("tts", "0");
formData.append(
"file",
renamedFile,
`${musicName}.wav`
);
const uploadResponse = await fetch(
`${API_BASE}UploadFile`,
{
method: "POST",
body: formData
}
);
const uploadReply =
await readResponse(uploadResponse);
if (!uploadResponse.ok) {
throw new Error(
"שגיאת HTTP בזמן העלאת הקובץ."
);
}
validateApiReply(uploadReply);
return {
folderPath: uploadFolderPath,
filePath: uploadFilePath,
reply: uploadReply
};
}
async function createMusicFromExisting(
token,
folderPath,
name
) {
const params = new URLSearchParams();
params.set("token", token);
params.set("folderPath", folderPath);
params.set("name", name);
const createResponse = await fetch(
`${API_BASE}CreateMusicOnHolds?${params.toString()}`,
{
method: "GET",
headers: {
Accept: "application/json, text/plain, */*"
}
}
);
const createReply =
await readResponse(createResponse);
if (!createResponse.ok) {
throw new Error(
"שגיאת HTTP בזמן יצירת המוזיקה."
);
}
return validateApiReply(createReply);
}
async function createMusicAfterUpload(
token,
folderPath,
name
) {
const data = new URLSearchParams();
data.append("token", token);
data.append("folderPath", folderPath);
data.append("name", name);
const createResponse = await fetch(
`${API_BASE}CreateMusicOnHolds`,
{
method: "POST",
headers: {
"Content-Type":
"application/x-www-form-urlencoded",
Accept:
"application/json, text/plain, */*"
},
body: data.toString()
}
);
const createReply =
await readResponse(createResponse);
if (!createResponse.ok) {
throw new Error(
"שגיאת HTTP בזמן יצירת המוזיקה."
);
}
return validateApiReply(createReply);
}
function displayCreateResult(reply) {
const musicCode =
reply.status ?? reply.data;
if (
musicCode === undefined ||
musicCode === null ||
musicCode === false
) {
throw new Error(
"השרת לא החזיר קוד מנגינה תקין."
);
}
setResponse(
`type=music_on_hold\nmusic_on_hold=${musicCode}`,
"success"
);
showCopyButton(String(musicCode));
}
function displayCheckResult(reply) {
if (
reply.data === false ||
String(reply.data).toLowerCase() === "false"
) {
setResponse("אין קובץ מעודכן", "success");
return;
}
setResponse(
`type=music_on_hold\nmusic_on_hold=${reply.data}`,
"success"
);
showCopyButton(String(reply.data));
}
function displayDeleteResult(reply) {
if (
reply.status === true ||
String(reply.status).toLowerCase() === "true"
) {
setResponse(
"המנגינה נמחקה בהצלחה.",
"success"
);
} else {
displayServerError(reply);
}
}
async function handleCreate() {
const token = tokenInput.value.trim();
const name = nameInput.value.trim();
if (getMusicSource() === "upload") {
const file = audioFileInput.files[0];
if (!file) {
throw new Error("יש לבחור קובץ להעלאה.");
}
if (file.size > 45 * 1024 * 1024) {
throw new Error(
"הקובץ גדול מדי. הגודל המרבי הוא 45MB."
);
}
const basePath =
cleanPath(uploadBasePathInput.value);
if (!basePath) {
throw new Error("יש להזין נתיב שלוחה.");
}
const uploadFolderPath =
`${basePath}/${name}`;
setStatus(
"שלב 1 מתוך 2: מעלה את הקובץ..."
);
await uploadAudioFile(
token,
uploadFolderPath,
file,
name
);
setStatus(
"שלב 2 מתוך 2: מגדיר את הקובץ כמוזיקה בהמתנה..."
);
const createReply =
await createMusicAfterUpload(
token,
uploadFolderPath,
name
);
displayCreateResult(createReply);
setStatus(
"הפעולה הושלמה בהצלחה.",
"success"
);
return;
}
const folderPath =
folderPathInput.value.trim();
setStatus(
"מגדיר את הקובץ הקיים כמוזיקה בהמתנה..."
);
const createReply =
await createMusicFromExisting(
token,
folderPath,
name
);
displayCreateResult(createReply);
setStatus(
"המנגינה נוצרה בהצלחה מהקובץ הקיים.",
"success"
);
}
async function handleCheck() {
const params = new URLSearchParams();
params.set("token", tokenInput.value.trim());
params.set("path", pathInput.value.trim());
setStatus("בודק את המוזיקה במערכת...");
const checkResponse = await fetch(
`${API_BASE}${modes.check.endpoint}?${params.toString()}`,
{
method: "GET",
headers: {
Accept: "application/json, text/plain, */*"
}
}
);
const checkReply =
await readResponse(checkResponse);
if (!checkResponse.ok) {
throw new Error(
"שגיאת HTTP בזמן בדיקת המוזיקה."
);
}
displayCheckResult(
validateApiReply(checkReply)
);
setStatus(
"הבדיקה הסתיימה.",
"success"
);
}
async function handleDelete() {
const params = new URLSearchParams();
params.set("token", tokenInput.value.trim());
params.set("name", nameInput.value.trim());
setStatus("מוחק את הגדרת המוזיקה...");
const deleteResponse = await fetch(
`${API_BASE}${modes.delete.endpoint}?${params.toString()}`,
{
method: "GET",
headers: {
Accept: "application/json, text/plain, */*"
}
}
);
const deleteReply =
await readResponse(deleteResponse);
if (!deleteResponse.ok) {
throw new Error(
"שגיאת HTTP בזמן מחיקת המוזיקה."
);
}
displayDeleteResult(
validateApiReply(deleteReply)
);
setStatus(
"הפעולה הסתיימה.",
"success"
);
}
document.querySelectorAll(".tab")
.forEach(tab => {
tab.addEventListener("click", () => {
setMode(tab.dataset.mode);
});
});
document
.querySelectorAll('input[name="musicSource"]')
.forEach(radio => {
radio.addEventListener(
"change",
updateCreateFields
);
});
nameInput.addEventListener(
"input",
updateFullUploadPath
);
uploadBasePathInput.addEventListener(
"input",
updateFullUploadPath
);
form.addEventListener(
"submit",
async event => {
event.preventDefault();
clearStatus();
hideCopyButton();
if (!form.checkValidity()) {
form.reportValidity();
return;
}
submitButton.disabled = true;
submitButton.textContent = "מבצע...";
setResponse(
"ממתין לתשובת השרת..."
);
try {
if (currentMode === "create") {
await handleCreate();
} else if (currentMode === "check") {
await handleCheck();
} else if (currentMode === "delete") {
await handleDelete();
}
} catch (error) {
console.error(error);
const message =
error && error.message
? error.message
: "אירעה שגיאה בלתי צפויה.";
setStatus(message, "error");
displayServerError(
`שגיאה: ${message}`
);
} finally {
submitButton.disabled = false;
submitButton.textContent = "שליחה לשרת";
}
}
);
copyButton.addEventListener(
"click",
async () => {
const code =
response.dataset.musicCode;
if (!code) {
return;
}
try {
await navigator.clipboard.writeText(code);
copyButton.textContent =
"הקוד הועתק";
setTimeout(() => {
copyButton.textContent =
"העתקת קוד המנגינה";
}, 1800);
} catch {
const temporaryInput =
document.createElement("input");
temporaryInput.value = code;
document.body.appendChild(
temporaryInput
);
temporaryInput.select();
document.execCommand("copy");
temporaryInput.remove();
copyButton.textContent =
"הקוד הועתק";
setTimeout(() => {
copyButton.textContent =
"העתקת קוד המנגינה";
}, 1800);
}
}
);
setMode("create");
</script>
</body>
</html>
אשמח למשוב האם זה דבר נצרך
וכן על עוד רעיונות שיכולים להביא תועלת..
עריכה:
עדכנתי מחדש את הקובץ כך שיהיה את האפשרות של העלאת קובץ למערכת הקוד
עריכה
@ben-zion פרסם כבר פעם כזה מערכת אם העלאת קובץ לשלוחה למעבר להורדת הדף HTML שלו לחצו כאן