join links

unity_package/Runtime/VELConnectManager.cs

@@ -128,7 +128,7 @@ namespace VELConnect
 		// Start is called before the first frame update
 		private void Start()
 		{
-			SetDeviceBaseData(new Dictionary<string, object>
+			SetDeviceField(new Dictionary<string, object>
 			{
 				{ "current_app", Application.productName },
 				{ "pairing_code", PairingCode }
@@ -141,7 +141,7 @@ namespace VELConnect
 
 			VelNetManager.OnJoinedRoom += room =>
 			{
-				SetDeviceBaseData(new Dictionary<string, object>
+				SetDeviceField(new Dictionary<string, object>
 				{
 					{ "current_app", Application.productName },
 					{ "current_room", room },
@@ -463,11 +463,11 @@ namespace VELConnect
 		/// <summary>
 		/// Sets data on the device keys themselves
 		/// </summary>
-		public static void SetDeviceBaseData(Dictionary<string, object> data)
+		public static void SetDeviceField(Dictionary<string, object> device)
 		{
 			instance.PostRequestCallback(
 				instance.velConnectUrl + "/api/v2/device/set_data/" + DeviceId,
-				JsonConvert.SerializeObject(data),
+				JsonConvert.SerializeObject(device),
 				new Dictionary<string, string> { { "modified_by", DeviceId } }
 			);
 		}

velconnect/routes/website.py

@@ -1,5 +1,7 @@
+import fastapi
 from fastapi import APIRouter
 from fastapi.responses import FileResponse
+from fastapi.templating import Jinja2Templates
 
 # APIRouter creates path operations for user module
 router = APIRouter(
@@ -8,6 +10,8 @@ router = APIRouter(
     include_in_schema=False
 )
 
+templates = Jinja2Templates(directory="templates")
+
 
 @router.get('/')
 def index():
@@ -27,3 +31,8 @@ def success():
 @router.get('/failure')
 def failure():
     return FileResponse("templates/failure.html")
+
+
+@router.get('/join/{app_id}/{link}')
+def join(request: fastapi.Request, app_id: str, link: str):
+    return templates.TemplateResponse("join.html", {"request": request, "app_id": app_id, "link": link})

velconnect/static/js/device_details.js

@@ -0,0 +1,34 @@
+{
+// check cookie
+    let hw_id = getCookie('hw_id');
+
+    if (hw_id !== "" && hw_id !== undefined && hw_id !== "undefined") {
+
+        httpGetAsync('/api/v2/device/get_data/' + hw_id, (resp) => {
+            console.log(resp);
+            let respData = JSON.parse(resp);
+
+            if ("error" in respData) {
+                window.location.href = "/pair";
+            }
+
+            writeClass('hw_id', respData['device']['hw_id']);
+            writeClass('pairing_code', respData['device']['pairing_code']);
+            writeValue('current_app', respData['device']['current_app']);
+            writeValue('current_room', respData['device']['current_room']);
+            writeClass('date_created', respData['device']['date_created'] + "<br>" + timeSinceString(respData['device']['date_created']) + " ago");
+            writeClass('last_modified', respData['device']['last_modified'] + "<br>" + timeSinceString(respData['device']['last_modified']) + " ago");
+            writeValue('user_name', respData['device']['friendly_name']);
+            writeValue('avatar_url', respData['device']['data']?.['avatar_url']);
+            writeValue('tv_url', respData['room']?.['data']?.['tv_url']);
+            writeValue('carpet_color', respData['room']?.['data']?.['carpet_color']);
+            if (carpet_color) carpet_color.parentElement.style.color = "" + respData['room']?.['data']?.['carpet_color'];
+
+            loading.style.display = "none";
+            headset_details.style.display = "block";
+        }, (status) => {
+            loading.style.display = "none";
+            failure.style.display = "block";
+        });
+    }
+}

velconnect/static/js/velconnect_util.js

@@ -0,0 +1,48 @@
+function setDeviceField(device) {
+    let hw_id = getCookie('hw_id');
+    fetch('/api/v2/device/set_data/' + hw_id, {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+
+        body: JSON.stringify(device)
+    })
+        .then(_ => console.log('success'))
+        .catch(_ => console.log('fail'));
+}
+
+function setDeviceData(data, successCallback, failureCallback) {
+    let hw_id = getCookie('hw_id');
+    fetch('/api/v2/device/set_data/' + hw_id, {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+
+        body: JSON.stringify({"data": data})
+    })
+        .then(_ => {
+            console.log('success');
+            successCallback?.();
+        })
+        .catch(_ => {
+            console.log('fail');
+            failureCallback?.();
+        });
+}
+
+function setRoomData(data) {
+    fetch('/api/v2/set_data/' + current_app.value + "_" + current_room.value, {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+    })
+        .then(_ => console.log('success'))
+        .catch(_ => console.log('fail'));
+}

velconnect/templates/index.html

@@ -93,7 +93,7 @@
                         </div>
                         <div class="tile tile-centered col-6">
                             <div class="tile-content">
-                                <div class="tile-title text-bold">Last Login</div>
+                                <div class="tile-title text-bold">Last Modified</div>
                                 <div class="tile-subtitle last_modified">---</div>
                             </div>
                         </div>

velconnect/templates/join.html

@@ -0,0 +1,168 @@
+<html>
+
+<head>
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png">
+    <link rel="manifest" href="/static/favicons/site.webmanifest">
+    <link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#b91d47">
+    <meta name="theme-color" content="#ffffff">
+
+    <title>VEL Connect</title>
+
+    <link rel="stylesheet" type="text/css" href="/static/css/spectre.min.css">
+    <link rel="stylesheet" type="text/css" href="/static/css/spectre-exp.min.css">
+    <link rel="stylesheet" type="text/css" href="/static/css/spectre-icons.min.css">
+    <link rel="stylesheet" type="text/css" href="/static/css/coloris.min.css">
+    <script type="application/javascript" src="/static/js/util.js"></script>
+    <style>
+        .container {
+            max-width: 30em;
+        }
+
+        .card {
+            margin: 1em;
+            box-shadow: 0 0 2em #0003;
+        }
+
+        input.btn {
+            cursor: auto;
+            user-select: auto;
+        }
+
+        .centered {
+            margin: auto;
+        }
+
+        hr {
+            color: #0004;
+        }
+    </style>
+</head>
+
+<body>
+<div class="container">
+
+    <div id="loading"><br><br>
+        <div class="loading loading-lg"></div>
+    </div>
+    <div id="failure" style="display: none;"><br><br><br>☹️</div>
+
+
+    <div id="headset_details" style="display: none;">
+        <div class="panel card">
+            <div class="card-image">
+                <img class="img-responsive" src="/static/img/mini_landscape.png" alt="conVRged Logo">
+            </div>
+            <div class="panel-header text-center">
+                <figure class="avatar avatar-lg" style="background: none;"><img
+                        src="/static/favicons/android-chrome-192x192.png" alt="Avatar"></figure>
+                <div class="panel-title h5 mt-10">Headset ID:</div>
+                <code class="panel-subtitle hw_id">---</code>
+                <br>
+                <br>
+                <div class="container">
+                    <div class="columns">
+                        <div class="col-6">
+                            <div class="panel-title h5 mt-10">Pairing Code:</div>
+                            <code class="panel-subtitle pairing_code">---</code>
+                        </div>
+                        <div class="col-6">
+                            <a href="/pair">
+                                <button class="btn btn-primary btn-lg tooltip tooltip-right" id="pair_new"
+                                        data-tooltip="Clear this headset and pair a new headset">Pair New
+                                </button>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <hr>
+            </div>
+
+
+            <div class="panel-body">
+                <div class="container">
+                    <div class="columns">
+                        <div class="tile tile-centered col-6">
+                            <div class="tile-content">
+                                <div class="tile-title text-bold">First Seen</div>
+                                <div class="tile-subtitle date_created">---</div>
+                            </div>
+                        </div>
+                        <div class="tile tile-centered col-6">
+                            <div class="tile-content">
+                                <div class="tile-title text-bold">Last Modified</div>
+                                <div class="tile-subtitle last_modified">---</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <br>
+
+                <div class="divider text-center" data-content="Join Link"></div>
+
+                <div style="display: none;"  class="text-center" id="join_success">
+                    <h2>Success!</h2>
+
+                    <p>Your device will now join the room <strong>{{ link }}</strong> when you launch {{ app_id }}.</p>
+                </div>
+                <div style="display: none;" class="text-center" id="join_failure">
+                    <h2>FAIL!</h2>
+
+                    <p>Something went wrong sending the join request to your device.</p>
+                </div>
+                <br>
+            </div>
+        </div>
+    </div>
+
+    <script type="application/javascript" src="/static/js/coloris.min.js"></script>
+    <script type="application/javascript" src="/static/js/device_details.js"></script>
+    <script type="application/javascript" src="/static/js/velconnect_util.js"></script>
+    <script>
+
+        let submit_button = document.getElementById('submit_pairing_code');
+        let pair_code_input = document.getElementById('pair_code');
+        let loading = document.getElementById('loading');
+        let enter_pairing_id = document.getElementById('enter_pairing_id');
+        let headset_details = document.getElementById('headset_details');
+        let hw_id_field = document.getElementById('hw_id');
+        let failure = document.getElementById('failure');
+        let current_app = document.getElementById('current_app');
+        let current_room = document.getElementById('current_room');
+        let set_room_id = document.getElementById('set_room_id');
+        let set_user_color = document.getElementById('set_user_color');
+        let user_color = document.getElementById('user_color');
+        let carpet_color = document.getElementById('carpet_color');
+        let set_user_name = document.getElementById('set_user_name');
+        let set_tv_url = document.getElementById('set_tv_url');
+        let set_carpet_color = document.getElementById('set_carpet_color');
+        let set_avatar_url = document.getElementById('set_avatar_url');
+
+
+        // check cookie
+        let hw_id = getCookie('hw_id');
+
+        if (hw_id !== "" && hw_id !== undefined && hw_id !== "undefined") {
+
+            setDeviceData({
+                "join_room_request_{{app_id}}": "{{link}}"
+            }, () => {
+                document.getElementById("join_success").style.display = "block";
+            }, () => {
+                document.getElementById("join_failure").style.display = "block";
+            });
+
+        } else {
+            window.location.href = "/pair";
+        }
+
+
+    </script>
+</div>
+</body>
+
+</html>