Skip to content

Commit efcba73

Browse files
TotodoreTotodore
committed
edit feature not debugged
1 parent 0450243 commit efcba73

File tree

11 files changed

+460
-169
lines changed

11 files changed

+460
-169
lines changed

‎public/js/viewDashboard.js‎

Lines changed: 96 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ class VueDashboard {
2828
this.removeCron_modalConfirm = document.querySelector("#remove_modal .modal-confirm");
2929
this.removeCronModal = M.Modal.init(document.querySelector("#remove_modal"));
3030

31+
this.optionsModal = M.Modal.init(document.querySelector("#options_modal"));
32+
this.editMessageModal = M.Modal.init(document.querySelector("#editMessage"));
33+
3134
this.tableLines = document.querySelectorAll("tbody tr");
3235
this.guild_id = new URLSearchParams(location.search).get("id");
3336

@@ -68,6 +71,7 @@ class VueDashboard {
6871
}
6972

7073
addEventListener() {
74+
this.tableLines = document.querySelectorAll("tbody tr");
7175
document.querySelector(".schedule-add-btn").addEventListener("click", () => this.addCronModal.open());
7276
document.querySelector(".timer-add-btn").addEventListener("click", () => this.addTimerModal.open());
7377
document.querySelector(".guild-timezone").addEventListener("click", () => this.timezoneModal.open());
@@ -79,11 +83,17 @@ class VueDashboard {
7983
document.querySelectorAll(".user_el").forEach(el => el.addEventListener("click", () => this.onUserClick(el)));
8084
document.querySelectorAll(".channel_el").forEach(el => el.addEventListener("click", () => this.onChannelClick(el)));
8185
document.querySelector("#setTimezone .modal-confirm").addEventListener("click", () => this.onConfirmSetTimer());
86+
document.querySelector("#options_modal .delete").addEventListener("click", () => this.onRemoveEl());
87+
document.querySelector("#editMessage .modal-confirm").addEventListener("click", () => this.onConfirmUpdateMessage());
8288
this.eachSelect.addEventListener("change", () => this.onChangeEachSelect());
8389
this.addCron_modalConfirm.addEventListener("click", () => this.onConfirmAddCron());
8490
this.addTimer_modalConfirm.addEventListener("click", () => this.onConfirmAddTimer());
8591

86-
this.tableLines.forEach(el => el.addEventListener("click", () => this.onTableLineCLick(el)));
92+
this.tableLines.forEach(el => {
93+
el.addEventListener("click", () => this.onElClick(el));
94+
el.querySelector(".edit").addEventListener("click", () => this.onOpenEdit(el));
95+
el.querySelector(".delete").addEventListener("click", () => this.onRemoveEl(el));
96+
});
8797
this.removeCron_modalConfirm.addEventListener("click", () => this.onConfirmRemoveCron());
8898
}
8999

@@ -371,11 +381,22 @@ class VueDashboard {
371381
} else response.text().then((responseText) => {
372382
let name;
373383
document.channels.forEach(element => {if(element.id == channel_id) name = element.name;});
374-
document.querySelector("tbody").insertAdjacentHTML("afterbegin", '<tr id="'+responseText+'" channel_id="'+channel_id+'"><td>'+desc+'</td><td>#'+name+'</td><td>'+content+'<i class="material-icons">delete</i></td></tr>');
375-
document.getElementById(responseText).addEventListener("click", () => {
376-
self.removeCronModal.open();
377-
self.idToRemove = responseText;
378-
});
384+
document.querySelector("tbody").insertAdjacentHTML("afterbegin", `
385+
<tr id="${responseText}" channel_id="${channel_id}">
386+
<td>${desc}</td>
387+
<td>#${name}</td>
388+
<td class="message">
389+
<div>
390+
<p class="description">${content}</p>
391+
<div class="options">
392+
<i class="material-icons waves-effect edit">edit</i>
393+
<span class="divider"></span>
394+
<i class="material-icons waves-effect delete">delete</i>
395+
</div>
396+
</div>
397+
</td>
398+
</tr>`);
399+
this.addEventListener();
379400
this.form.reset();
380401
M.toast({html: "This message has successfully been set"}, 5000);
381402
});
@@ -432,24 +453,51 @@ class VueDashboard {
432453
} else response.text().then((responseText) => {
433454
let name;
434455
document.channels.forEach(element => {if(element.id == channel_id) name = element.name;});
435-
document.querySelector("tbody").insertAdjacentHTML("afterbegin", '<tr id="'+responseText+'" channel_id="'+channel_id+'"><td>'+desc+'</td><td>#'+name+'</td><td>'+content+'<i class="material-icons">delete</i></td></tr>');
436-
document.getElementById(responseText).addEventListener("click", () => {
437-
self.removeCronModal.open();
438-
self.idToRemove = responseText;
439-
});
456+
document.querySelector("tbody").insertAdjacentHTML("afterbegin", `
457+
<tr id="${responseText}" channel_id="${channel_id}">
458+
<td>${desc}</td>
459+
<td>#${name}</td>
460+
<td class="message">
461+
<div>
462+
<p class="description">${content}</p>
463+
<div class="options">
464+
<i class="material-icons waves-effect edit">edit</i>
465+
<span class="divider"></span>
466+
<i class="material-icons waves-effect delete">delete</i>
467+
</div>
468+
</div>
469+
</td>
470+
</tr>`);
471+
this.addEventListener();
440472
//Suppression du message automatiquement si la date est dépassée.
441473
setTimeout(() => {document.getElementById(responseText).remove();}, timestamp*60*1000 - Date.now());
442474
this.formTimer.reset();
443475
M.toast({html: "This message has successfully been set"}, 5000);
444476
});
445477
this.addTimerModal.close();
446-
});
478+
});
447479
}
448-
449-
onTableLineCLick(el) {
450-
this.idToRemove = el.getAttribute("id");
480+
onRemoveEl(el) {
481+
if (el)
482+
this.idToRemove = el.getAttribute("id");
483+
this.optionsModal.close();
451484
this.removeCronModal.open();
452485
}
486+
onElClick(el) {
487+
console.log(window.screen.width);
488+
if (window.screen.width < 1000) {
489+
this.idToRemove = el.getAttribute("id");
490+
this.optionsModal.open();
491+
}
492+
}
493+
onOpenEdit(el) {
494+
if (el)
495+
this.idToRemove = el.getAttribute("id");
496+
document.querySelector("#contentEdit").textContent = document.querySelector("#"+this.idToRemove).querySelector(".description").innerText;
497+
M.textareaAutoResize(document.querySelector("#contentEdit"));
498+
M.updateTextFields();
499+
this.editMessageModal.open();
500+
}
453501
onConfirmRemoveCron() {
454502
fetch(`/ajax/remove_message?id=${this.idToRemove}&guild_id=${this.guild_id}`).then((response) => {
455503
if (response.status != 200) {
@@ -475,6 +523,39 @@ class VueDashboard {
475523
document.querySelector(".guild-timezone h5").textContent = "Timezone : " + timezone;
476524
this.timezoneModal.close();
477525
}
526+
async onConfirmUpdateMessage() {
527+
const message = document.querySelector("#contentEdit").value;
528+
const formData = new FormData();
529+
530+
let sysContent = message;
531+
document.channels.forEach(el => {
532+
sysContent = sysContent.replace("#"+el.name, "<#"+el.id+">");
533+
});
534+
document.users.forEach(el => {
535+
const name = el.nickname || el.username;
536+
sysContent = sysContent.replace("@"+name, "<@"+el.id+">");
537+
});
538+
document.roles.forEach(el => {
539+
sysContent = sysContent.replace("@"+el.username, "<@&"+el.id+">");
540+
});
541+
542+
formData.append("content", message);
543+
formData.append("msg_id", this.idToRemove);
544+
formData.append("guild_id", this.guild_id);
545+
formData.append("sys_content", sysContent);
546+
const req = await fetch("/ajax/set_message", {
547+
body: formData,
548+
method: "POST"
549+
});
550+
if (req.status != 200) {
551+
console.log("Error : ", req.status, " ", req.statusText);
552+
M.toast({html: "Error : Impossible to set this message"}, 5000);
553+
return;
554+
}
555+
this.editMessageModal.close();
556+
M.toast({html: "Message updated !"});
557+
document.querySelector("#"+this.idToRemove).querySelector(".description").textContent = message;
558+
}
478559
}
479560

480561
window.addEventListener("DOMContentLoaded", e => new VueDashboard());

0 commit comments

Comments
 (0)