Merge branch 'main' of github.com:Picolab/pico-pods

Picolab · Mar 20, 2024 · e5c7a6d · e5c7a6d
2 parents ad9e83f + e0a30d9
commit e5c7a6d
Show file tree

Hide file tree

Showing 7 changed files with 207 additions and 87 deletions.
diff --git a/samples/index_style.css → samples/index.css b/samples/index_style.css → samples/index.css
diff --git a/samples/index.html b/samples/index.html
@@ -4,35 +4,19 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Welcome to the dApps!</title>
-    <link rel="stylesheet" href="index_style.css">
+    <link rel="stylesheet" href="index.css">
+    <script src="index.js"></script> 
 </head>
 <body>
     <div class="login-container">
-        <h2>Welcome to the dApps!</h2>
+        <h2>Welcome to THE dApps!</h2>
         <form id="loginForm">
             <div class="input-group">
-                <input type="text" id="podURL" required>
-                <label for="podURL">Pod URL</label>
+                <input type="text" id="PicoECI" required>
+                <label for="PicoECI">Pico ECI</label>
             </div>
-            <div class="input-group">
-                <input type="text" id="webID" required>
-                <label for="webID">WebID</label>
-            </div>
-            <div class="input-group">
-                <input type="text" id="clientID" required>
-                <label for="clientID">Client ID</label>
-            </div>
-            <div class="input-group">
-                <input type="password" id="clientSecret" required>
-                <label for="clientSecret">Client Secret</label>
-            </div>
-            <div class="input-group">
-                <input type="text" id="tokenURL" required>
-                <label for="tokenURL">Token URL</label>
-            </div>
-            <button id="attachButton" type="submit">attach</button>
+            <button id="attachButton" type="submit" onclick="attach(event)">Attach</button>
         </form>
     </div>
-<script src="index_script.js"></script> 
 </body>
 </html>
diff --git a/samples/index.js b/samples/index.js
@@ -0,0 +1,41 @@
+let ECI = '';
+let pod = true;
+
+async function attach(event) {
+    event.preventDefault();
+    ECI = document.getElementById('PicoECI').value;
+    console.log("Pico ECI: ", ECI);
+    window.location.href = 'pod.html';
+}
+
+function toggleDetachAttachButtons() {
+    const detachPodButton = document.getElementById('detachPod');
+    const attachPodButton = document.getElementById('attachPod');
+
+    if (pod) {
+        pod = false;
+        detachPodButton.style.display = 'none';
+        attachPodButton.style.display = 'inline-block';
+    } else {
+        pod = true;
+        const modal = document.getElementById('myModal');
+        modal.style.display = 'block';
+        detachPodButton.style.display = 'inline-block';
+        attachPodButton.style.display = 'none';
+    }
+}
+
+async function allPhotos() {
+    const sharedPhotosButton = document.getElementById('listAllSharedPhotos');
+    const allPhotosButton = document.getElementById('listAllPhotos');
+    allPhotosButton.classList.add('active');
+    sharedPhotosButton.classList.remove('active');
+
+}
+
+async function sharedPhotos() {
+    const sharedPhotosButton = document.getElementById('listAllSharedPhotos');
+    const allPhotosButton = document.getElementById('listAllPhotos');
+    sharedPhotosButton.classList.add('active');
+    allPhotosButton.classList.remove('active');
+}
diff --git a/samples/index_script.js b/samples/index_script.js
diff --git a/samples/pod.css b/samples/pod.css
@@ -0,0 +1,119 @@
+button {
+    width: 5em;
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    color: white;
+    background-color: #007bff;
+    cursor: pointer;
+}
+
+.detach-button {
+    width: 10em;
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+}
+
+.attach-button {
+    width: 10em;
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    display: none;
+}
+
+#searchInput {
+    width: 20em;
+}
+
+.toggle-button {
+    padding: 8px 20px;
+    background-color: #0056b3;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.toggle-button.active {
+    background-color: #007bff;
+}
+
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 2; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+.modal-content {
+    position: absolute;
+    width: 100%;
+    max-width: 400px;
+    padding: 50px 75px 50px 50px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    text-align: center;
+}
+
+body, html {
+    height: 100%;
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f0f4f8;
+}
+
+h2 {
+    color: #333;
+    margin-bottom: 40px;
+}
+
+.input-group {
+    position: relative;
+    margin-bottom: 20px;
+}
+
+input[type="text"], input[type="password"] {
+    width: 100%;
+    padding: 10px;
+    border: 2px solid #ddd;
+    border-radius: 4px;
+    margin-top: 8px;
+}
+
+input[type="text"]:focus, input[type="password"]:focus {
+    border-color: #007bff;
+    outline: none;
+}
+
+label {
+    position: absolute;
+    top: -8px;
+    left: 10px;
+    background-color: white;
+    padding: 0 5px;
+    color: #007bff;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+
diff --git a/samples/pod.html b/samples/pod.html
@@ -4,20 +4,51 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Pod</title>
+    <script src="index.js"></script> 
+    <link rel="stylesheet" href="pod.css">
 </head>
 <body>
-    <p>Welcome to your pod!</p>
+    <p>Welcome to your pico!</p>
+    <button id="detachPod" class="detach-button" onclick="toggleDetachAttachButtons()">Detach pod</button>
+    <button id="attachPod" class="attach-button" onclick="toggleDetachAttachButtons()">Attach pod</button>
     <div>
-        <button id="detachPod">Detach pod</button>
+        <input type="text" id="searchInput" class="search-input" placeholder="Search...">
         <button id="searchPhoto">Search photo</button>
+        <button id="listAllPhotos" class="toggle-button active" onclick="allPhotos()">All Photos</button>
+        <button id="listAllSharedPhotos" class="toggle-button" onclick="sharedPhotos()">Shared Photos</button>
     </div>
-    <img src="C:/Users/helam/Documents/myDoc/BYU/CS480/dApps/sample.jpg" alt="sample">
-    <button id="addPhoto">Add photo</button>
-    <button id="addFolder">Add folder</button>
-    <div>
-        <button id="listAllPhotos">All Photos</button>
-        <button id="listAllSharedPhotos">Shared Photos</button>
+    <img src="sample.jpg" alt="sample">
+    <div >
+        <button id="addPhoto">Add photo</button>
+        <button id="addFolder">Add folder</button>
+    </div>
+    <div id="myModal" class="modal">
+        <div class="modal-content">
+            <h2>Welcome to the dApps!</h2>
+        <form id="loginForm">
+            <div class="input-group">
+                <input type="text" id="podURL" required>
+                <label for="podURL">Pod URL</label>
+            </div>
+            <div class="input-group">
+                <input type="text" id="webID" required>
+                <label for="webID">WebID</label>
+            </div>
+            <div class="input-group">
+                <input type="text" id="clientID" required>
+                <label for="clientID">Client ID</label>
+            </div>
+            <div class="input-group">
+                <input type="text" id="clientSecret" required>
+                <label for="clientSecret">Client Secret</label>
+            </div>
+            <div class="input-group">
+                <input type="text" id="tokenURL" required>
+                <label for="tokenURL">Token URL</label>
+            </div>
+            <button id="attachButton" type="submit">Attach</button>
+        </form>
+        </div>
     </div>
-<script src="pod_script.js"></script> 
 </body>
-</html>
+</html>
diff --git a/samples/pod_script.js b/samples/pod_script.js