Makeroom wizard #27

Merged
stranck merged 15 commits from drew-dev into stranck-dev 2024-05-20 10:32:09 +00:00
8 changed files with 90 additions and 7 deletions
Showing only changes of commit 63c0bb75db - Show all commits

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 204 KiB

1
res/icons/book-plus.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 19C13 20.1 13.3 21.12 13.81 22H6C4.89 22 4 21.11 4 20V4C4 2.9 4.89 2 6 2H7V9L9.5 7.5L12 9V2H18C19.1 2 20 2.89 20 4V13.09C19.67 13.04 19.34 13 19 13C15.69 13 13 15.69 13 19M20 18V15H18V18H15V20H18V23H20V20H23V18H20Z" /></svg>

After

Width:  |  Height:  |  Size: 297 B

1
res/icons/loading.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" /></svg>

After

Width:  |  Height:  |  Size: 121 B

View File

@ -1,11 +1,11 @@
function confirmAction (intent, sender) {
if (['rename', 'unconfirm', 'delete'].includes (intent) == false) return
let href = sender.getAttribute('action')
let intentTitle = document.querySelector("#intentText")
let intentEdit = document.querySelector("#intentRename")
let intentEditPanel = document.querySelector("#intentEditPanel")
let intentTitle = document.querySelector("#modalOrderEditDialog #intentText")
let intentEdit = document.querySelector("#modalOrderEditDialog #intentRename")
let intentEditPanel = document.querySelector("#modalOrderEditDialog #intentEditPanel")
let intentFormAction = document.querySelector("#intentFormAction")
let intentSend = document.querySelector("#intentSend")
let intentSend = document.querySelector("#modalOrderEditDialog #intentSend")
// Resetting ui
intentEdit.removeAttribute('required')
intentEdit.removeAttribute('minlength')
@ -27,5 +27,29 @@ function confirmAction (intent, sender) {
case 'delete':
break
}
document.getElementById('modalRoomconfirm').setAttribute('open', 'true');
document.getElementById('modalOrderEditDialog').setAttribute('open', 'true');
}
function setLoading (){
document.getElementById('loadingIndicator').style.visibility = 'unset';
}
function setLoaded (){
document.getElementById('loadingIndicator').style.visibility = 'hidden';
}
async function roomGuestEditAction (intent, sender) {
if (['new', 'fromOrder'].includes (intent) == false) return
setLoaded ();
document.getElementById('roomGuestEditorDialog').setAttribute('open', 'true');
}
async function retrieveUsers (type) {
setLoading();
setLoaded();
}
function adaptRoomFormat (){
}

View File

@ -3,6 +3,18 @@ div.room-actions {
float: right;
}
div.admin-actions-header {
container-name: room-actions;
float: unset !important;
max-height: 2rem;
margin: 1rem 0px;
}
div.admin-actions-header img {
max-height: 1.5rem;
}
div.room-actions > a {
background-color: var(--card-background-color);
font-size: 12pt;
@ -16,4 +28,26 @@ div.room-actions > a:hover {
div.room-actions > a.act-del:hover {
background-color: var(--del-color);
}
/* Spinning animation */
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
h3:has(.spin) {
overflow: hidden;
}
.spin {
animation-name: spin;
animation-duration: 500ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
max-height: 32px;
}

View File

@ -14,7 +14,8 @@ nav#topbar {
top: 0rem;
transition: top 300ms;
line-height: 2em;
max-width:98vw;
max-width:100%;
overflow-x: hidden;
}
nav#topbar a {

View File

@ -19,7 +19,16 @@
<img src="/res/furizon-light.png" style="height:4rem;text-align:center;">
</picture>
</header>
{% if order and order.isAdmin() %}
<div class="room-actions admin-actions-header">
<a onclick="roomGuestEditAction('new', this)" action="/manage/admin/{{order.code}}"><img src="/res/icons/book-plus.svg" class="icon" /><span>New room</span></a>
</div>
{% else %}
<p>Welcome to the nosecount page! Here you can see all of the available rooms at the convention, as well as the occupants currently staying in each room. Use this page to find your friends and plan your meet-ups.</p>
{% endif %}
{% if filtered and order %}
{% for person in filtered.values() %}
{% if loop.first %}
@ -47,6 +56,7 @@
<span>{{o.room_name}}</span>
{% if order and order.isAdmin() %}
<div class="room-actions">
<a onclick="roomGuestEditAction('fromOrder', this)" action="/manage/admin/{{o.code}}"><img src="/res/icons/users.svg" class="icon" /><span>Add members</span></a>
<a onclick="confirmAction('rename', this)" action="/manage/admin/room/rename/{{o.code}}"><img src="/res/icons/pencil.svg" class="icon" /><span>Rename</span></a>
<a onclick="confirmAction('unconfirm', this)" action="/manage/admin/room/unconfirm/{{o.code}}"><img src="/res/icons/door_open.svg" class="icon" /><span>Unconfirm</span></a>
<a class="act-del" onclick="confirmAction('delete', this)" action="/manage/admin/room/delete/{{o.code}}"><img src="/res/icons/delete.svg" class="icon" /><span>Delete</span></a>
@ -135,7 +145,7 @@
{% endfor %}
<form id="intentFormAction" method="GET" action="">
<dialog id="modalRoomconfirm">
<dialog id="modalOrderEditDialog">
<article>
<a href="#close" aria-label="Close" class="close" onClick="javascript:this.parentElement.parentElement.removeAttribute('open')"></a>
<h3 id="intentText">Confirm room edit</h3>
@ -151,5 +161,17 @@
</dialog>
</form>
<form id="roomFormAction" method="GET" action=""></form>
<dialog id="roomGuestEditorDialog">
<article>
<a href="#close" aria-label="Close" class="close" onClick="javascript:this.parentElement.parentElement.removeAttribute('open')"></a>
<h3 id="intentText"><span>Room editor<img id="loadingIndicator" src="/res/icons/loading.svg" class="icon spin" /></span></h3>
<div class="room-members-container">
</div>
<input type="hidden" name="orders">
</article>
</dialog>
</form>
</main>
{% endblock %}