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) { function confirmAction (intent, sender) {
if (['rename', 'unconfirm', 'delete'].includes (intent) == false) return if (['rename', 'unconfirm', 'delete'].includes (intent) == false) return
let href = sender.getAttribute('action') let href = sender.getAttribute('action')
let intentTitle = document.querySelector("#intentText") let intentTitle = document.querySelector("#modalOrderEditDialog #intentText")
let intentEdit = document.querySelector("#intentRename") let intentEdit = document.querySelector("#modalOrderEditDialog #intentRename")
let intentEditPanel = document.querySelector("#intentEditPanel") let intentEditPanel = document.querySelector("#modalOrderEditDialog #intentEditPanel")
let intentFormAction = document.querySelector("#intentFormAction") let intentFormAction = document.querySelector("#intentFormAction")
let intentSend = document.querySelector("#intentSend") let intentSend = document.querySelector("#modalOrderEditDialog #intentSend")
// Resetting ui // Resetting ui
intentEdit.removeAttribute('required') intentEdit.removeAttribute('required')
intentEdit.removeAttribute('minlength') intentEdit.removeAttribute('minlength')
@ -27,5 +27,29 @@ function confirmAction (intent, sender) {
case 'delete': case 'delete':
break 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; 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 { div.room-actions > a {
background-color: var(--card-background-color); background-color: var(--card-background-color);
font-size: 12pt; font-size: 12pt;
@ -17,3 +29,25 @@ div.room-actions > a:hover {
div.room-actions > a.act-del:hover { div.room-actions > a.act-del:hover {
background-color: var(--del-color); 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; top: 0rem;
transition: top 300ms; transition: top 300ms;
line-height: 2em; line-height: 2em;
max-width:98vw; max-width:100%;
overflow-x: hidden;
} }
nav#topbar a { nav#topbar a {

View File

@ -19,7 +19,16 @@
<img src="/res/furizon-light.png" style="height:4rem;text-align:center;"> <img src="/res/furizon-light.png" style="height:4rem;text-align:center;">
</picture> </picture>
</header> </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> <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 %} {% if filtered and order %}
{% for person in filtered.values() %} {% for person in filtered.values() %}
{% if loop.first %} {% if loop.first %}
@ -47,6 +56,7 @@
<span>{{o.room_name}}</span> <span>{{o.room_name}}</span>
{% if order and order.isAdmin() %} {% if order and order.isAdmin() %}
<div class="room-actions"> <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('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 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> <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 %} {% endfor %}
<form id="intentFormAction" method="GET" action=""> <form id="intentFormAction" method="GET" action="">
<dialog id="modalRoomconfirm"> <dialog id="modalOrderEditDialog">
<article> <article>
<a href="#close" aria-label="Close" class="close" onClick="javascript:this.parentElement.parentElement.removeAttribute('open')"></a> <a href="#close" aria-label="Close" class="close" onClick="javascript:this.parentElement.parentElement.removeAttribute('open')"></a>
<h3 id="intentText">Confirm room edit</h3> <h3 id="intentText">Confirm room edit</h3>
@ -151,5 +161,17 @@
</dialog> </dialog>
</form> </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> </main>
{% endblock %} {% endblock %}