feat: Add Dataset selection panel to Project Config page

OpenGeoscience · Oct 1, 2024 · bb21859 · bb21859
1 parent 8977ada
commit bb21859
Show file tree

Hide file tree

Showing 8 changed files with 557 additions and 335 deletions.
diff --git a/uvdat/core/rest/project.py b/uvdat/core/rest/project.py
@@ -2,10 +2,11 @@
 from django.http import HttpResponse
 from rest_framework.decorators import action
 from rest_framework.viewsets import ModelViewSet
+from rest_framework.response import Response
 
-from uvdat.core.models import Project
+from uvdat.core.models import Dataset, Project
 from uvdat.core.rest.access_control import GuardianFilter, GuardianPermission
-from uvdat.core.rest.serializers import ProjectSerializer
+from uvdat.core.rest.serializers import DatasetSerializer, ProjectSerializer
 from uvdat.core.tasks.osmnx import load_roads
 
 
@@ -21,6 +22,21 @@ def perform_create(self, serializer):
         user: User = self.request.user
         project.set_permissions(owner=user)
 
+    def partial_update(self, request, id):
+        project = self.get_object()
+        project.datasets.set(
+            Dataset.objects.filter(
+                id__in=request.data.get('dataset_ids')
+            )
+        )
+        project.save()
+        response = ProjectSerializer(project).data
+        response.update(datasets=[
+            DatasetSerializer(dataset).data
+            for dataset in project.datasets.all()
+        ])
+        return Response(response, status=200)
+
     @action(detail=True, methods=['get'])
     def regions(self, request, **kwargs):
         project = self.get_object()

diff --git a/web/src/App.vue b/web/src/App.vue
@@ -8,6 +8,7 @@ import {
   availableProjects,
   currentChart,
   currentSimulationType,
+  projectConfigMode,
 } from "./store";
 import { oauthClient, logout } from "./api/auth";
 import { loadProjects } from "./storeFunctions";
@@ -16,6 +17,7 @@ import MainDrawerContents from "./components/MainDrawerContents.vue";
 import OptionsDrawerContents from "./components/OptionsDrawerContents.vue";
 import ChartJS from "./components/ChartJS.vue";
 import SimulationsPanel from "./components/SimulationsPanel.vue";
+import ProjectConfig from "./components/ProjectConfig.vue";
 
 export default defineComponent({
   components: {
@@ -24,6 +26,7 @@ export default defineComponent({
     OptionsDrawerContents,
     ChartJS,
     SimulationsPanel,
+    ProjectConfig,
   },
   setup() {
     const drawer = ref(true);
@@ -54,6 +57,7 @@ export default defineComponent({
       showError,
       currentChart,
       currentSimulationType,
+      projectConfigMode,
     };
   },
 });
@@ -94,7 +98,10 @@ export default defineComponent({
       </v-card>
     </v-overlay>
     <v-app-bar app prominent>
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
+      <v-app-bar-nav-icon
+        @click.stop="drawer = !drawer"
+        v-if="!projectConfigMode"
+      />
       <v-toolbar-title>UVDAT</v-toolbar-title>
       <v-spacer />
       <div v-if="currentUser" class="px-3">
@@ -113,35 +120,38 @@ export default defineComponent({
         </v-btn>
       </div>
     </v-app-bar>
-    <v-navigation-drawer
-      v-model="drawer"
-      permanent
-      width="350"
-      class="main-area drawer"
-    >
-      <MainDrawerContents />
-    </v-navigation-drawer>
-    <v-navigation-drawer
-      :model-value="currentDataset !== undefined"
-      permanent
-      width="300"
-      location="right"
-      class="main-area drawer"
-    >
-      <OptionsDrawerContents />
-    </v-navigation-drawer>
-    <div
-      :class="
-        drawer
-          ? currentDataset
-            ? 'main-area shifted-2'
-            : 'main-area shifted-1'
-          : 'main-area'
-      "
-    >
-      <Map />
-      <ChartJS v-if="currentChart" />
-      <SimulationsPanel v-if="currentSimulationType" />
+    <ProjectConfig v-if="projectConfigMode" />
+    <div v-else>
+      <v-navigation-drawer
+        v-model="drawer"
+        permanent
+        width="350"
+        class="main-area drawer"
+      >
+        <MainDrawerContents />
+      </v-navigation-drawer>
+      <v-navigation-drawer
+        :model-value="currentDataset !== undefined"
+        permanent
+        width="300"
+        location="right"
+        class="main-area drawer"
+      >
+        <OptionsDrawerContents />
+      </v-navigation-drawer>
+      <div
+        :class="
+          drawer
+            ? currentDataset
+              ? 'main-area shifted-2'
+              : 'main-area shifted-1'
+            : 'main-area'
+        "
+      >
+        <Map />
+        <ChartJS v-if="currentChart" />
+        <SimulationsPanel v-if="currentSimulationType" />
+      </div>
     </div>
   </v-app>
 </template>

diff --git a/web/src/api/rest.ts b/web/src/api/rest.ts
@@ -1,5 +1,6 @@
 import { apiClient } from "./auth";
 import {
+  User,
   Project,
   Dataset,
   NetworkNode,
@@ -12,6 +13,10 @@ import {
   Network,
 } from "@/types";
 
+export async function getUsers(): Promise<User[]> {
+  return (await apiClient.get(`users`)).data.results;
+}
+
 export async function getProjects(): Promise<Project[]> {
   return (await apiClient.get("projects")).data.results;
 }
@@ -47,6 +52,17 @@ export async function getProjectDatasets(
   return (await apiClient.get(`datasets?project=${projectId}`)).data.results;
 }
 
+export async function setProjectDatasets(
+  projectId: number,
+  datasetIds: number[]
+): Promise<Project> {
+  return (
+    await apiClient.patch(`projects/${projectId}/`, {
+      dataset_ids: datasetIds,
+    })
+  ).data;
+}
+
 export async function getProjectCharts(projectId: number): Promise<Chart[]> {
   return (await apiClient.get(`charts?project=${projectId}`)).data.results;
 }
@@ -65,6 +81,10 @@ export async function getProjectSimulationTypes(
     .data;
 }
 
+export async function getDatasets(): Promise<Dataset[]> {
+  return (await apiClient.get(`datasets`)).data.results;
+}
+
 export async function getDataset(datasetId: number): Promise<Dataset> {
   return (await apiClient.get(`datasets/${datasetId}`)).data;
 }