collarbone-annihilation/iu9-ca-web-chat
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Doing frontend now. Added these cool popup windows in list-rooms.nytl.html

Browse Source
This commit is contained in:
Андреев Григорий 2024-09-01 13:03:52 +03:00
parent 07711a93b0
commit 21a23be96e
5 changed files with 136 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
assets/HypertextPages/list-rooms.nytl.html
View File

@ -15,16 +15,36 @@
let userinfo = {% PUT jsinsert userinfo %};
let initial_chatListUpdResp = {% PUT jsinsert initial_chatListUpdResp %};
</script>
<div id="popup-overlay-veil"></div>
<div id="chat-creation-win" class="popup-window">
<h1>Input identifying information for your new chat</h1>
<h1 class="popup-window-msg">Input identifying information for your new chat</h1>
<table class="id-str-input-table">
<tr>
<td class="id-str-input-td1">
<label for="chat-nickname-input">Enter nickname for new chat:</label>
</td>
<td class="id-str-input-td2">
<input name="name" id="chat-nickname-input" type="text" placeholder="Take a nickname" class="one-line-input" required>
</td>
</tr>
<tr>
<td class="id-str-input-td1">
<label for="chat-name-input">Enter name for new chat:</label>
</td>
<td class="id-str-input-td2">
<input name="password" id="chat-name-input" type="text" placeholder="Come up with name" class="one-line-input" required>
</td>
</tr>
</table>
<h1 class="popup-window-msg">Create new chat?</h1>
<button class="popup-window-btn-yes" id="chat-creation-win-yes">Yes, create</button>
<button class="popup-window-btn-no" id="chat-creation-win-no">No, cancel</button>
</div>
<div id="chat-renunciation-win" class="popup-window">
<!-- header will actually be rewritten before showing the window to include chat nickname -->
<h1 id="chat-renunciation-win-title">Are you sure you want to leave chat?</h1>
<button class="chat-renunciation-win-yes">Yes, leave</button>
<button class="chat-renunciation-win-no">No, cancel</button>
<h1 id="chat-renunciation-win-title" class="popup-window-msg">Are you sure you want to leave chat?</h1>
<button class="popup-window-btn-yes" id="chat-renunciation-win-yes">Yes, leave</button>
<button class="popup-window-btn-no" id="chat-renunciation-win-no">No, cancel</button>
</div>
x
@ -45,6 +65,7 @@ x
</div>
</div>
</div>
<script src="/assets/js/common-popup.js"></script>
<script src="/assets/js/list-rooms.js"></script>
</body>
</html>

24
assets/css/common-popup.css
View File

@ -1,10 +1,10 @@
#popup-overlay-veil {
.popup-overlay-veil {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.6);
z-index: 99;
display: none; /* Hidden by default */
@ -28,3 +28,23 @@
padding: 5px;
border-bottom: 3px;
}
.popup-window-btn-yes {
background-color: #0c7f0e;
border-radius: 5px;
padding: 12px;
color: white;
}
.popup-window-btn-no {
background-color: #ff0005;
border-radius: 5px;
padding: 12px;
color: white;
}
.popup-window-msg {
padding-left: 20px;
font-weight: bold;
font-size: 1.3em;
}

19
assets/css/list-rooms.css
View File

@ -33,3 +33,22 @@
width: 16px;
cursor: pointer;
}
/* The morbid thing */
table.id-str-input-table {
width: 100%;
border-collapse: collapse; /* Combine borders */
}
.id-str-input-td1, .id-str-input-td2 {
border: none;
}
.id-str-input-td1 {
text-align: left;
padding-right: 5px;
white-space: nowrap; /* Prevent text wrap, keeping it in one line */
overflow: hidden; /* Hide overflow content */
text-overflow: ellipsis; /* Show ellipsis for overflowing text */
}
.id-str-input-td2 {
width: 100%;
}

26
assets/js/common-popup.js
View File

@ -0,0 +1,26 @@
let activePopupWinId = "";
function activatePopupWindow__(el){
let veil = document.createElement("div");
veil.id = "popup-overlay-veil-OBJ"
veil.className = "popup-overlay-veil";
veil.style.display = "block";
document.body.appendChild(veil);
el.style.display = "block";
}
function activatePopupWindowById(id){
if (activePopupWinId !== "")
return;
/* Lmao, this thing is just... SO unsafe */
activePopupWinId = id;
activatePopupWindow__(document.getElementById(id))
}
function deactivateActivePopup(){
if (activePopupWinId === "")
return
document.getElementById("popup-overlay-veil-OBJ").remove();
document.getElementById(activePopupWinId).style.display = "none";
activePopupWinId = "";
}

51
assets/js/list-rooms.js
View File

@ -38,14 +38,52 @@ function convertStToBox(myMembershipSt){
inBoxLeaveBtn.className = "CL-my-chat-box-leave-btn";
inBoxLeaveBtn.src = "/assets/img/delete.svg";
inBoxLeaveBtn.onclick = function (ev) {
if (ev.button === 0){
console.log("Tried to leave chat" + ID);
}
if (ev.button !== 0)
return;
console.log("Tried to leave chat" + ID);
activatePopupWindowById("chat-renunciation-win");
};
return box;
}
function configureChatCreationInterface(){
document.getElementById("chat-creation-win-yes").onclick = function (ev) {
if (ev.button !== 0)
return;
deactivateActivePopup();
// todo: create chat, send request
};
document.getElementById("chat-creation-win-no").onclick = function (ev) {
if (ev.button !== 0)
return;
deactivateActivePopup();
}
document.getElementById("CL-bacbe").onclick = function (ev){
if (ev.button !== 0)
return;
activatePopupWindowById("chat-creation-win");
console.log("Tried to show chat creation window");
};
}
function configureChatRenunciationInterfaceWinPart(){
document.getElementById("chat-renunciation-win-yes").onclick = function (ev){
if (ev.button !== 0)
return;
deactivateActivePopup();
// todo: actually leave chat
}
document.getElementById("chat-renunciation-win-no").onclick = function(ev) {
if (ev.button !== 0)
return;
deactivateActivePopup();
}
}
window.onload = function () {
console.log("Loading complete");
LocalHistoryId = initial_chatListUpdResp.HistoryId;
@ -64,9 +102,6 @@ window.onload = function () {
}
}
document.getElementById("CL-bacbe").onclick = function (ev){
if (ev.button === 0){
}
};
configureChatCreationInterface();
configureChatRenunciationInterfaceWinPart();
};