added pod choice + finished pod registration

KNowledgeOnWebScale · Nov 12, 2024 · d0269bd · d0269bd
1 parent 5b099c9
commit d0269bd
Show file tree

Hide file tree

Showing 4 changed files with 248 additions and 147 deletions.
diff --git a/src/components/ContainerNav.vue b/src/components/ContainerNav.vue
@@ -32,6 +32,10 @@ import { currentWebId, getPodURLs } from "./login";
 import { fetchPermissionsData, fetchData, fetchAclAgents } from "./getData";
 
 export default {
+  name: 'ContainerNav',
+  props: {
+    currentPod: String
+  },
   data() {
     return {
       filters: ["containers", "resources"],
@@ -42,9 +46,7 @@ export default {
       userUrl: "",
       userUrlInvalid: false,
       submissionDone: false,
-
       webId: "",
-      podList: [],
       dirContents: WorkingData,
       containerContents: WorkingData,
       hasAcl: null,
@@ -77,7 +79,7 @@ export default {
           return segments[segments.length - 1] + "/";
         });
       // for navigating up a directory path (not possible when in root directory)
-      if (currentDir !== this.podList[0]) {
+      if (currentDir !== this.currentPod) {
         newUrlLst.push("/..");
       }
       return newUrlLst.sort((a, b) => a.length - b.length);
@@ -116,7 +118,7 @@ export default {
      * then sorts the array to reflect heirarchy
      */
     async getGeneralData() {
-      this.dirContents = await fetchData(this.podList[0]);
+      this.dirContents = await fetchData(this.currentPod);
       this.urls = getContainedResourceUrlAll(this.dirContents);
       this.separateUrls();
     },
@@ -138,8 +140,7 @@ export default {
      */
     async podURL() {
       this.webId = currentWebId();
-      this.podList = await getPodURLs();
-      this.currentLocation = this.podList[0]; // assuming that the user only has one pod at the moment...
+      this.currentLocation = this.currentPod; 
     },
     /**
      * Sorts container URLs and resource URLs into different lists
@@ -148,11 +149,11 @@ export default {
       this.containerUrls = this.urls.filter((url) => url.endsWith("/"));
       this.resourceUrls = this.urls.filter((url) => !url.endsWith("/"));
       if (
-        this.currentLocation === this.podList[0] &&
-        !this.urls.includes(this.podList[0])
+        this.currentLocation === this.currentPod &&
+        !this.urls.includes(this.currentPod)
       ) {
-        this.urls.push(this.podList[0]);
-        this.containerUrls.push(this.podList[0]);
+        this.urls.push(this.currentPod);
+        this.containerUrls.push(this.currentPod);
       }
       this.urls = this.urls.sort((a, b) => a.length - b.length);
       this.container = this.urls.sort((a, b) => a.length - b.length);
@@ -163,7 +164,11 @@ export default {
     // Delays the execution of these functions on page reload (to avoid async-related errors)
     this.podURL();
     setTimeout(() => {
-      this.getGeneralData();
+      try {
+        this.getGeneralData();
+      } catch(err) {
+        console.log(err);
+      }
     }, 500);
   },
 };

diff --git a/src/components/LandingPage.vue b/src/components/LandingPage.vue
@@ -3,65 +3,71 @@
     <v-col cols="12">
       <div class="logo-container">
         <img
-            :src="require('../assets/full-sc-logo-nb.png')"
-            alt="Full Solid Cockpit logo"
-          />
-        </div>
-
-        <div class="entry">
-          <h1>The best way to pilot your <a href="https://solidproject.org/">Solid Pod</a> is with <br /> <span>Solid Cockpit</span></h1>
-        </div>
-
+          :src="require('../assets/full-sc-logo-nb.png')"
+          alt="Full Solid Cockpit logo"
+        />
+      </div>
+
+      <div class="entry">
+        <h1>
+          The best way to pilot your
+          <a href="https://solidproject.org/">Solid Pod</a> is with <br />
+          <span>Solid Cockpit</span>
+        </h1>
+      </div>
     </v-col>
   </v-container>
 
   <div>
     <pod-login />
   </div>
 
-  <div>
+  <div class="pod-reg">
     <pod-registration />
   </div>
 
   <body>
     <!-- TODO: Make these drop downs (with more in-depth guides for non-experts) -->
     <div class="container">
       <h1 class="guide">What can this application do?</h1>
-      
+
       <hr />
 
       <h2 class="req">1. Connect to your Pod</h2>
-      
+
       <p>Login to your pod via your pod provider + personal credentials.</p>
 
       <hr />
 
       <h2 class="req">2. Manage files in your pod</h2>
-      <p>
-        Upload, delete, and move files in your Solid Pod.
-      </p>
+      <p>Upload, delete, and move files in your Solid Pod.</p>
 
       <hr />
 
       <h2 class="req">3. Query your pod (and SPARQL endpoints you specify)</h2>
       <p>
-        Execute SPARQL queries over your pod and other accessible Solid Pods or SPARQL Endpoints.
+        Execute SPARQL queries over your pod and other accessible Solid Pods or
+        SPARQL Endpoints.
       </p>
 
       <hr />
 
       <h2 class="req">4. Edit the privacy of files in your pod</h2>
       <p>
-        Modify access controls for files and containers in your pod + notify others of the changes.
+        Modify access controls for files and containers in your pod + notify
+        others of the changes.
       </p>
 
       <hr />
 
-      <h2 class="req">5. Coming soon: edit the profile information associated with your Pod/webId</h2>
+      <h2 class="req">
+        5. Coming soon: edit the profile information associated with your
+        Pod/webId
+      </h2>
       <p>
-        Edit the personal data incorporated with your Solid Pod and/or your WebID.
+        Edit the personal data incorporated with your Solid Pod and/or your
+        WebID.
       </p>
-
     </div>
   </body>
 </template>
@@ -76,6 +82,9 @@ export default {
     PodLogin,
     PodRegistration,
   },
+  props: {
+    currPod: String,
+  },
   data: () => ({
     login_status: true,
   }),
@@ -100,7 +109,7 @@ export default {
 <style scoped>
 .logo-container {
   display: flex;
-  align-items: center; 
+  align-items: center;
   justify-content: center;
 }
 img {
@@ -109,18 +118,25 @@ img {
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
+.pod-reg {
+  background-color: #445560;
+  border-radius: 8px;
+  max-width: 80%;
+  margin: auto;
+}
+
 .entry {
   font-family: "Oxanium", monospace;
   color: #28353e;
   text-align: center;
-  margin-top: 20px;
+  margin-top: 10px;
 }
 .entry a {
   text-decoration: none;
   color: #28353e;
 }
 .entry span {
-  font-family: 'Orbitron';
+  font-family: "Orbitron";
 }
 
 .guide {

diff --git a/src/components/PodRegistration.vue b/src/components/PodRegistration.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- TODO: the pod choosing / registering section -->
   <div class="pod-register" v-if="loggedIn">
     <div v-if="!podAccess">
       <v-alert
@@ -52,17 +51,35 @@
         </form>
       </v-alert>
     </div>
-
-    <!-- TODO: Add a section for pod selection -->
+
     <!-- Pod Selection dropdown -->
     <div class="select-pod" v-if="podAccess">
-      <span>Current Pod</span>
-      <v-select
-        variant="outlined"
-        color="#445560"
-        v-model="currentPod"
-        :items="podList"
-      ></v-select>
+      <ul class="horizontal-list">
+        <li>
+          <span>Selected Pod:</span>
+        </li>
+        <li>
+          <div class="sel-pod">
+            <v-select
+              variant="outlined"
+              v-model="currentPod"
+              :items="podList"
+            ></v-select>
+            <v-btn
+              class="pod-selectButton"
+              variant="tonal"
+              rounded="xs"
+              @click="selectPod"
+            >
+              Select Pod
+              <v-tooltip activator="parent" location="end"
+                >Click to select this pod
+              </v-tooltip>
+            </v-btn>
+            <v-icon v-if="podSuccess" color="green">mdi-check</v-icon>
+          </div>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
@@ -73,6 +90,7 @@ import { checkUrl } from "./privacyEdit";
 import { isLoggedin, currentWebId, getPodURLs } from "./login";
 
 export default {
+  name: "PodRegistration",
   data: () => ({
     loggedIn: false,
     menu: false,
@@ -82,6 +100,7 @@ export default {
     customPodUrl: "",
     currentPod: "",
     showFormIndex: false,
+    podSuccess: false,
     user: {
       webId: "",
       fullName: "John Doe", // TODO: Should pull this data from #card (and integrate to pop up)
@@ -103,11 +122,19 @@ export default {
      */
     async addToWebIdData() {
       console.log(checkUrl(this.customPodUrl, this.currentPod));
-      if (!checkUrl(this.customPodUrl, this.currentPod)) {
-        console.log(this.customPodUrl);
+      /* For TRIPLE consortium */
+      if (this.customPodUrl === "") {
         await webIdDataset(this.user.webId, this.customPodUrl);
       } else {
-        console.log("Not a valid URL ... ");
+        /* For provided URL */
+        if (!checkUrl(this.customPodUrl, this.currentPod)) {
+          console.log(this.customPodUrl);
+          await webIdDataset(this.user.webId, this.customPodUrl);
+        } else {
+          /* For invalid URL 
+        TODO: make this a little prettier */
+          console.log("Not a valid URL ... ");
+        }
       }
     },
 
@@ -116,8 +143,8 @@ export default {
      */
     async findPodList() {
       this.podList = await getPodURLs();
-      this.currentPod = this.podList[0];
       if (this.podList !== null) {
+        this.currentPod = this.podList[0];
         try {
           this.podAccess = this.podList.length !== 0 ? true : this.podAccess;
         } catch (err) {
@@ -129,6 +156,17 @@ export default {
     toggleForm() {
       this.showFormIndex = !this.showFormIndex;
     },
+
+    successfulSelection() {
+      this.podSuccess = true;
+    },
+    /* Emits selected pod to Parent component (LandingPage.vue) */
+    selectPod() {
+      const selectedPod = this.currentPod;
+      this.$emit("pod-selected", selectedPod);
+      console.log("Selected pod: " + selectedPod);
+      this.successfulSelection();
+    },
   },
   mounted() {
     setTimeout(() => {
@@ -144,9 +182,9 @@ export default {
 <style scoped>
 .pod-register {
   font-family: "Oxanium", monospace;
-  max-width: 75%;
   margin: auto;
-  margin-bottom: 20px;
+  margin-left: 15px;
+  margin-bottom: 10px;
 }
 
 /* For pod registration */
@@ -157,22 +195,43 @@ export default {
 .pod-registerButton {
   margin-top: 10px;
 }
-#addAccess{
+#addAccess {
   display: flex;
 }
-.refresh{
+.refresh {
   margin-left: auto;
 }
 
-/* For pod selection */
+/* For pod selection 
+   TODO: Fix the alignment of this :( */
 .select-pod {
-  padding: 15px;
-  margin: auto;
-  background-color: #445560;
+  margin-top: 10px;
+}
+.horizontal-list {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
 }
 .select-pod span {
   margin-bottom: 20px;
   font-size: 24px;
   font-weight: 700;
 }
+.sel-pod {
+  display: flex;
+  align-items: center;
+  margin-left: 15px;
+  gap: 20px;
+}
+.sel-pod .v-btn {
+  margin-bottom: 15px;
+}
+.sel-pod .v-select {
+  min-width: 150px;
+  margin-top: 15px;
+  font-family: "Oxanium", monospace;
+}
 </style>