room autofill wip

Added a button in the nosecount
[Might be removed] a new dialog

res/icons/book-plus.svg

@@ -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>

res/icons/loading.svg

@@ -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>

res/scripts/roomManager.js

@@ -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 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 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 (){
+    
 }

res/styles/admin.css

@@ -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;
 }

res/styles/navbar.css

@@ -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 {

tpl/nosecount.html

@@ -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 %}