Merge pull request #193 from SELab-2/web/feature/round-planning-rework

Frontend: planning herwerkt

api/postman.json

@@ -2025,4 +2025,4 @@
 			]
 		}
 	]
-}
+}

web/src/components/PhotoButton.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-file-input
+    label="File input"
+    outlined
+    dense
+    capture="user"
+    accept="image/*"
+  ></v-file-input>
+</template>
+
+<script setup lang="ts"></script>

web/src/components/cards/BuildingInfoCard.vue

@@ -0,0 +1,19 @@
+<template>
+  <BorderCard @click="$emit('clicked')" class="my-2">
+    <template v-slot:prepend>
+      <v-icon icon="mdi-office-building"></v-icon>
+    </template>
+    <template v-slot:title>{{ name }}</template
+    ><template v-slot:subtitle>{{ address }}</template>
+  </BorderCard>
+</template>
+
+<script setup lang="ts">
+import BorderCard from "@/layouts/CardLayout.vue";
+
+defineProps({
+  name: String,
+  address: String,
+  id: String,
+});
+</script>

web/src/components/cards/BuildingSelectCard.vue

@@ -0,0 +1,116 @@
+<template>
+  <BorderCard class="my-2">
+    <template v-slot:prepend>
+      <v-icon icon="mdi-office-building"></v-icon>
+    </template>
+    <template v-slot:title>{{ name }}</template
+    ><template v-slot:subtitle>{{ address }}</template>
+    <template v-slot:append>
+      <v-icon
+        @click="$emit('up')"
+        class="mx-1"
+        color="primary"
+        icon="mdi-chevron-up"
+      />
+      <v-icon
+        @click="$emit('down')"
+        class="mx-1"
+        color="primary"
+        icon="mdi-chevron-down"
+      />
+      <v-icon
+        @click="$emit('remove')"
+        class="mx-1"
+        color="error"
+        icon="mdi-close"
+      />
+    </template>
+    <v-expand-transition>
+      <v-table v-show="garbageinfo" class="mx-2 my-2" density="compact">
+        <thead>
+          <tr>
+            <th
+              v-for="day in ['MA', 'DI', 'WO', 'DO', 'VR', 'ZA', 'ZO']"
+              :key="day"
+              class="text-center"
+            >
+              {{ day }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in ['REST', 'GFT', 'PMD']" :key="item">
+            <td class="text-center" v-for="index in 7" :key="index">
+              <v-chip size="small" v-if="handleGarbageMap(item, index)">{{
+                item
+              }}</v-chip>
+            </td>
+          </tr>
+        </tbody>
+      </v-table>
+    </v-expand-transition>
+  </BorderCard>
+</template>
+
+<script setup lang="ts">
+import BorderCard from "@/layouts/CardLayout.vue";
+import { ref, onMounted } from "vue";
+import { GarbageQuery } from "@selab-2/groep-1-query";
+import { tryOrAlertAsync } from "@/try";
+
+// TODO: discuss with group proper format temp actions
+const tempActions = ["REST", "GFT", "PMD"];
+const garbageMap = ref<Map<String, Boolean[]>>(new Map());
+
+onMounted(() => {
+  for (const action of tempActions) {
+    garbageMap.value.set(action, new Array(7).fill(false));
+  }
+
+  tryOrAlertAsync(async () => {
+    const garbageOfBuilding = await new GarbageQuery().getAll({
+      building_id: props.buildingId,
+    });
+
+    for (const garbage of garbageOfBuilding) {
+      const dayIndex = new Date(garbage.pickup_time).getDay();
+      const actionDesc = garbage.action.description;
+
+      // See if it is garbage to pick up or just a task
+      if (actionDesc.includes("Ophaling")) {
+        const garbageType = actionDesc.split(" ")[1];
+
+        garbageMap.value.get(
+          garbageType === "restafval" ? "REST" : garbageType,
+        )![dayIndex] = true;
+      }
+    }
+  });
+});
+
+const props = defineProps({
+  name: { type: String, required: true },
+  address: { type: String, required: true },
+  buildingId: { type: Number, required: true },
+  garbageinfo: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+function handleGarbageMap(garbageType: String, day: number) {
+  const planningArray = garbageMap.value.get(garbageType);
+  if (planningArray) {
+    return planningArray[day];
+  } else {
+    return false;
+  }
+}
+</script>
+
+<style scoped>
+td {
+  border-right: solid 1px rgb(216, 216, 216);
+  border-left: solid 1px rgb(216, 216, 216);
+}
+</style>

web/src/components/cards/RoundSelectCard.vue

@@ -0,0 +1,32 @@
+<template>
+  <BorderCard class="my-2">
+    <template v-slot:title>{{ date?.toLocaleDateString() }}</template
+    ><template v-slot:append>
+      <div class="mx-1 pb-5">
+        <v-chip class="mr-4" prepend-icon="mdi-clock-time-two-outline">{{
+          time
+        }}</v-chip>
+        <v-icon @click="$emit('remove')" color="error" icon="mdi-close" />
+      </div>
+    </template>
+    <template v-slot:subtitle>
+      <div class="d-flex">
+        <Avatar class="mx-1" size="x-small" :name="name" /><v-card-subtitle>{{
+          name
+        }}</v-card-subtitle>
+      </div></template
+    >
+  </BorderCard>
+</template>
+
+<script setup lang="ts">
+import BorderCard from "@/layouts/CardLayout.vue";
+import Avatar from "@/components/Avatar.vue";
+
+defineProps({
+  name: String,
+  date: Date,
+  time: String,
+  id: String,
+});
+</script>

web/src/components/models/RoundPlanning.ts

@@ -0,0 +1,8 @@
+import Round from "./Round";
+
+export default interface RoundPlanning {
+  date: string;
+  round: Round | null;
+  showinfo: boolean;
+  edit: boolean;
+}

web/src/router/index.ts

@@ -112,7 +112,7 @@ const routes: any[] = [
         },
       },
       {
-        path: "/ronde/plannen",
+        path: "/ronde/:id/plannen",
         name: "round_plan",
         component: RoundPlanner,
         meta: {

web/src/views/dashboard/Round.vue

@@ -8,14 +8,6 @@
     >
       Nieuwe ronde maken
     </v-btn>
-    <v-btn
-      prepend-icon="mdi-plus"
-      color="primary"
-      class="mr-3"
-      :to="{ name: 'round_plan' }"
-    >
-      Nieuwe ronde Plannen
-    </v-btn>
   </div>
   <Table
     :entries="rounds"

web/src/views/round/Round.vue

@@ -1,7 +1,15 @@
 <template>
   <HFillWrapper>
     <div class="space-y-8">
-      <h1>Ronde Korenmarkt</h1>
+      <div style="display: flex; gap: 8px; align-items: center" class="mt-8">
+        <h1>{{ round?.name }}</h1>
+        <div class="flex-grow-1"></div>
+        <RoundedButton
+          icon="mdi-delete-outline"
+          value="Verwijderen"
+          @click="deleteRound()"
+        ></RoundedButton>
+      </div>
 
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -31,7 +39,11 @@
       <div style="display: flex; gap: 8px; align-items: center" class="mt-8">
         <h2>Planning</h2>
         <div class="flex-grow-1"></div>
-        <RoundedButton icon="mdi-calendar" value="Inplannen"></RoundedButton>
+        <RoundedButton
+          icon="mdi-calendar"
+          value="Inplannen"
+          @click="router.push({ name: 'round_plan', params: { id: round_id } })"
+        ></RoundedButton>
       </div>
 
       <div class="space-y-8">
@@ -65,16 +77,31 @@
 </template>
 
 <script setup lang="ts">
-import { BuildingQuery, Result, ScheduleQuery } from "@selab-2/groep-1-query";
+import {
+  BuildingQuery,
+  Result,
+  RoundQuery,
+  ScheduleQuery,
+} from "@selab-2/groep-1-query";
 import { ref, Ref } from "vue";
 import { tryOrAlertAsync } from "@/try";
 import HFillWrapper from "@/layouts/HFillWrapper.vue";
 import RoundedButton from "@/components/buttons/RoundedButton.vue";
 import RoundCard from "@/components/round/RoundCard.vue";
 import BuildingCard from "@/components/building/BuildingCard.vue";
+import router from "@/router";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const round_id: number = Number(route.params.id);
 
 const buildings: Ref<Array<Result<BuildingQuery>>> = ref([]);
 const schedules: Ref<Array<Result<ScheduleQuery>>> = ref([]);
+const round = ref<Result<RoundQuery>>();
+
+tryOrAlertAsync(async () => {
+  round.value = await new RoundQuery().getOne(round_id);
+});
 
 tryOrAlertAsync(async () => {
   buildings.value = await new BuildingQuery().getAll({ take: 5 });
@@ -83,6 +110,13 @@ tryOrAlertAsync(async () => {
 tryOrAlertAsync(async () => {
   schedules.value = await new ScheduleQuery().getAll({ take: 5 });
 });
+
+function deleteRound() {
+  tryOrAlertAsync(async () => {
+    await new RoundQuery().deleteOne({ id: round_id, name: round.value?.name });
+    router.push({ name: "round_overview" });
+  });
+}
 </script>
 
 <style scoped lang="sass">

web/src/views/round/RoundDetail.vue

@@ -164,12 +164,16 @@ import { ProgressQuery, Result, ScheduleQuery } from "@selab-2/groep-1-query";
 import { tryOrAlertAsync } from "@/try";
 import RoundedButton from "@/components/buttons/RoundedButton.vue";
 import router from "@/router";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const schedule_id: number = Number(route.params.id);
 
 const data: Ref<Result<ScheduleQuery> | null> = ref(null);
 const progressItems: Ref<Map<Number, Result<ProgressQuery>>> = ref(new Map());
 
 tryOrAlertAsync(async () => {
-  data.value = await new ScheduleQuery().getOne(35);
+  data.value = await new ScheduleQuery().getOne(schedule_id);
 });
 
 tryOrAlertAsync(async () => {