forked from andyburke/autonomous.contact
		
	refactor: rooms => zones
This commit is contained in:
		
							parent
							
								
									525568d368
								
							
						
					
					
						commit
						20a5d1bc88
					
				
					 27 changed files with 2466 additions and 2044 deletions
				
			
		|  | @ -22,21 +22,21 @@ | |||
| 			<label id="sidebar-toggle-icon" for="sidebar-toggle"> | ||||
| 				<div class="icon right"></div> | ||||
| 			</label> | ||||
| 			<div id="room-creation-container" data-requires-permission="rooms.create"> | ||||
| 			<div id="zone-creation-container" data-requires-permission="zones.create"> | ||||
| 				<button | ||||
| 					id="toggle-room-creation-form-button" | ||||
| 					id="toggle-zone-creation-form-button" | ||||
| 					onclick="((event) => { | ||||
| 						event.preventDefault(); | ||||
| 					 	const room_create_form = document.getElementById( 'room-create' ); | ||||
| 						room_create_form.style[ 'height' ] = room_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem'; | ||||
| 					 	const zone_create_form = document.getElementById( 'zone-create' ); | ||||
| 						zone_create_form.style[ 'height' ] = zone_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem'; | ||||
| 					})(event)" | ||||
| 				> | ||||
| 					<div class="icon plus"></div> | ||||
| 				</button> | ||||
| 				<form | ||||
| 					id="room-create" | ||||
| 					id="zone-create" | ||||
| 					data-smart="true" | ||||
| 					action="/api/rooms" | ||||
| 					action="/api/zones" | ||||
| 					method="POST" | ||||
| 					style=" | ||||
| 						margin-top: 1rem; | ||||
|  | @ -48,11 +48,11 @@ | |||
| 					" | ||||
| 				> | ||||
| 					<input | ||||
| 						id="new-room-name-input" | ||||
| 						id="new-zone-name-input" | ||||
| 						type="text" | ||||
| 						name="name" | ||||
| 						value="" | ||||
| 						placeholder="new room" | ||||
| 						placeholder="new zone" | ||||
| 					/> | ||||
| 					<!-- <button class="primary" type="submit"> | ||||
| 						<div class="icon plus"></div> | ||||
|  | @ -61,34 +61,35 @@ | |||
| 					<script> | ||||
| 						{ | ||||
| 							const form = document.currentScript.closest("form"); | ||||
| 							const room_create_form = document.getElementById("room-create"); | ||||
| 							const new_room_name_input = | ||||
| 								document.getElementById("new-room-name-input"); | ||||
| 							const zone_create_form = document.getElementById("zone-create"); | ||||
| 							const new_zone_name_input = | ||||
| 								document.getElementById("new-zone-name-input"); | ||||
| 
 | ||||
| 							form.on_reply = (new_room) => { | ||||
| 								const room_list = document.getElementById("room-list"); | ||||
| 								room_list.insertAdjacentHTML( | ||||
| 							form.on_reply = (new_zone) => { | ||||
| 								const zone_list = document.getElementById("zone-list"); | ||||
| 								zone_list.insertAdjacentHTML( | ||||
| 									"beforeend", | ||||
| 									`<li id="room-selector-${new_room.id}" class="room"><a href="#/room/${new_room.id}">${new_room.name}</a></li>`, | ||||
| 									`<li id="zone-selector-${new_zone.id}" class="zone"><a href="#/zone/${new_zone.id}">${new_zone.name}</a></li>`, | ||||
| 								); | ||||
| 
 | ||||
| 								new_room_name_input.value = ""; | ||||
| 								window.location.hash = `/chat/room/${new_room.id}`; | ||||
| 								room_create_form.style["height"] = "0"; | ||||
| 								new_zone_name_input.value = ""; | ||||
| 								window.location.hash = `/chat/zone/${new_zone.id}`; | ||||
| 								zone_create_form.style["height"] = "0"; | ||||
| 							}; | ||||
| 						} | ||||
| 					</script> | ||||
| 				</form> | ||||
| 			</div> | ||||
| 			<div> | ||||
| 				<span class="title">chat rooms</span> | ||||
| 				<span class="title">chat zones</span> | ||||
| 			</div> | ||||
| 			<ul id="room-list" class="room-list"></ul> | ||||
| 			<ul id="zone-list" class="zone-list"></ul> | ||||
| 		</div> | ||||
| 		<div id="room-chat-container"> | ||||
| 			<div id="room-chat-content"></div> | ||||
| 			<div id="room-chat-entry-container"> | ||||
| 				<form id="room-chat-entry" action="" data-smart="true" data-method="POST"> | ||||
| 		<div id="zone-chat-container"> | ||||
| 			<div id="zone-chat-content"></div> | ||||
| 			<div id="zone-chat-entry-container"> | ||||
| 				<form id="zone-chat-entry" action="" data-smart="true" data-method="POST"> | ||||
| 					<input id="parent-id" type="hidden" name="parent_id" value="" /> | ||||
| 					<input | ||||
| 						id="file-upload-and-share-input" | ||||
| 						aria-label="Upload and share file" | ||||
|  | @ -100,12 +101,12 @@ | |||
| 						<div class="icon attachment"></div> | ||||
| 					</label> | ||||
| 					<textarea | ||||
| 						id="room-chat-input" | ||||
| 						class="room-chat-input" | ||||
| 						id="zone-chat-input" | ||||
| 						class="zone-chat-input" | ||||
| 						rows="1" | ||||
| 						name="data.message" | ||||
| 					></textarea> | ||||
| 					<button id="room-chat-send" class="primary" aria-label="Send a message"> | ||||
| 					<button id="zone-chat-send" class="primary" aria-label="Send a message"> | ||||
| 						<i class="icon send"></i> | ||||
| 					</button> | ||||
| 					<script> | ||||
|  | @ -114,10 +115,11 @@ | |||
| 							const file_input = document.querySelector( | ||||
| 								'input[name="file-upload-and-share"]', | ||||
| 							); | ||||
| 							const chat_input = document.getElementById("room-chat-input"); | ||||
| 							const room_chat_container = | ||||
| 								document.getElementById("room-chat-container"); | ||||
| 							const room_chat_content = document.getElementById("room-chat-content"); | ||||
| 							const chat_input = document.getElementById("zone-chat-input"); | ||||
| 							const parent_id_input = document.getElementById("parent-id"); | ||||
| 							const zone_chat_container = | ||||
| 								document.getElementById("zone-chat-container"); | ||||
| 							const zone_chat_content = document.getElementById("zone-chat-content"); | ||||
| 
 | ||||
| 							let messages_in_flight = {}; | ||||
| 
 | ||||
|  | @ -129,9 +131,9 @@ | |||
| 
 | ||||
| 							form.on_submit = async (event) => { | ||||
| 								const user = JSON.parse(document.body.dataset.user); | ||||
| 								const room_id = room_chat_container.dataset.room_id; | ||||
| 								if (!room_id) { | ||||
| 									alert("Failed to get room_id!"); | ||||
| 								const zone_id = zone_chat_container.dataset.zone_id; | ||||
| 								if (!zone_id) { | ||||
| 									alert("Failed to get zone_id!"); | ||||
| 									return false; | ||||
| 								} | ||||
| 
 | ||||
|  | @ -169,7 +171,7 @@ | |||
| 									return false; | ||||
| 								} | ||||
| 
 | ||||
| 								form.action = `/api/rooms/${room_id}/events`; | ||||
| 								form.action = `/api/zones/${zone_id}/events`; | ||||
| 							}; | ||||
| 
 | ||||
| 							form.on_parsed = (json) => { | ||||
|  | @ -196,7 +198,7 @@ | |||
| 								} | ||||
| 
 | ||||
| 								const user = JSON.parse(document.body.dataset.user); | ||||
| 								render_text_event(room_chat_content, json, user); | ||||
| 								render_text_event(zone_chat_content, json, user); | ||||
| 								document | ||||
| 									.getElementById(`chat-${temp_id}`) | ||||
| 									?.classList.add("sending"); | ||||
|  | @ -213,7 +215,8 @@ | |||
| 									.getElementById(`chat-${sent_message.meta?.temp_id ?? ""}`) | ||||
| 									?.classList.remove("sending"); | ||||
| 
 | ||||
| 								append_room_events([sent_message]); | ||||
| 								append_zone_events([sent_message]); | ||||
| 								parent_id_input.value = ""; | ||||
| 								chat_input.value = ""; | ||||
| 								chat_input.focus(); | ||||
| 							}; | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue