aleksis/apps/lesrooster/frontend/components/lesson_raster/BreakCard.vue

+<script>
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+  name: "BreakCard",
+  props: {
+    item: {
+      period: Number,
+      weekday: String,
+      timeStart: String,
+      timeEnd: String,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+})
+</script>
+
+<template>
+  <v-card
+      :style="{
+          gridColumn: item.weekday,
+        }"
+      :disabled="disabled"
+  >
+    <v-card-text>
+      <v-row align="center">
+        <v-col cols="6" class="text-h4">
+          <v-icon>mdi-timer-sand-paused</v-icon>
+        </v-col>
+        <v-col cols="6">
+          <div>{{ $d(new Date("1970-01-01T" + item.timeStart), "shortTime") }}</div>
+          <div>{{ $d(new Date("1970-01-01T" + item.timeEnd), "shortTime") }}</div>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file

aleksis/apps/lesrooster/frontend/components/lesson_raster/LessonRaster.vue

+<template>
+  <div id="slot-container">
+    <!--    <v-hover v-slot="{ hover }">-->
+    <!--      <v-card elevation="0">-->
+    <!--        <v-card-title>-->
+    <!--          <validity-range-field-->
+    <!--              solo-->
+    <!--              hide-details-->
+    <!--              v-model="internalValidityRange"-->
+    <!--              :loading="$apollo.queries.currentValidityRange.loading"-->
+    <!--          />-->
+    <!--          <v-btn-->
+    <!--              v-if="canAddDay('A_0')"-->
+    <!--              v-show="hover"-->
+    <!--              color="secondary"-->
+    <!--              fab-->
+    <!--              dark-->
+    <!--              small-->
+    <!--              absolute-->
+    <!--              right-->
+    <!--              style="right: calc(-20px - 0.5rem)"-->
+    <!--          >-->
+    <!--            <v-icon>mdi-plus</v-icon>-->
+    <!--          </v-btn>-->
+    <!--        </v-card-title>-->
+    <!--      </v-card>-->
+    <!--    </v-hover>-->
+
+    <v-hover
+        v-for="weekday in weekdays"
+        :style="{
+          gridColumn: weekday,
+        }"
+        v-slot="{ hover }"
+    >
+      <v-card :loading="$apollo.queries.items.loading">
+        <v-card-title class="d-flex flex-wrap justify-space-between">
+          <span>{{ $t("weekdays." + weekday) }}</span>
+
+          <v-menu offset-y>
+            <template #activator="{ on, attrs }">
+              <secondary-action-button
+                  v-bind="attrs"
+                  v-on="on"
+                  icon-text="mdi-application-export"
+                  i18n-key="actions.copy_to_day"
+              />
+            </template>
+            <v-list>
+              <v-list-item
+                  v-for="(item, index) in weekdays.filter(day => day != weekday)"
+                  :key="index"
+              >
+                <v-list-item-title>{{ $t("weekdays." + item) }}</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+
+
+          <v-btn
+              v-if="canAddDay(left(weekday))"
+              v-show="hover"
+              color="secondary"
+              fab
+              dark
+              small
+              absolute
+              left
+              style="left: calc(-20px - 0.5rem)"
+              @click="add(left(weekday))"
+          >
+            <v-icon>mdi-plus</v-icon>
+          </v-btn>
+          <v-btn
+              v-if="canAddDay(right(weekday))"
+              v-show="hover"
+              color="secondary"
+              fab
+              dark
+              small
+              absolute
+              right
+              style="right: calc(-20px - 0.5rem)"
+              @click="add(right(weekday))"
+          >
+            <v-icon>mdi-plus</v-icon>
+          </v-btn>
+        </v-card-title>
+      </v-card>
+    </v-hover>
+
+    <template
+        v-for="slot in slots"
+    >
+      <slot-card
+          v-if="slot.model === 'Slot'"
+          :item="slot"
+          :disabled="$apollo.queries.items.loading"
+      />
+      <break-card
+          v-else
+          :item="slot"
+          :disabled="$apollo.queries.items.loading"
+      />
+    </template>
+  </div>
+</template>
+
+<script>
+import {createBreakSlot} from "../break.graphql";
+import {
+  slots,
+  createSlot,
+  deleteSlot,
+  deleteSlots,
+  updateSlots,
+} from "../slot.graphql";
+import {currentValidityRange} from "../validityRange.graphql";
+import ValidityRangeField from "../ValidityRangeField.vue";
+
+import SecondaryActionButton from "aleksis.core/components/generic/buttons/SecondaryActionButton.vue";
+import SlotCard from "./SlotCard.vue";
+import BreakCard from "./BreakCard.vue";
+
+export default {
+  name: "LessonRaster",
+  components: {BreakCard, SlotCard, SecondaryActionButton, ValidityRangeField},
+  apollo: {
+    items: {
+      query: slots,
+      variables() {
+        return {
+          filters: JSON.stringify({
+            "validity_range__id": this.internalValidityRange.id
+          })
+        }
+      },
+      result(data) {
+        this.weekdays = Array.from(new Set(data.data.items.map(slot => slot.weekday)));
+      },
+      skip() {
+        return this.internalValidityRange === null;
+      }
+    },
+    currentValidityRange: {
+      query: currentValidityRange,
+      result(data) {
+        this.internalValidityRange = data.data.currentValidityRange;
+      }
+    }
+  },
+  data() {
+    return {
+      weekdays: [],
+      internalValidityRange: null,
+    }
+  },
+  computed: {
+    slots() {
+      return this.items;
+    },
+    columns() {
+      return this.weekdays.map(
+          day => `[${day}] 1fr`
+      ).join(" ");
+    }
+  },
+  methods: {
+    canAddDay(weekday) {
+      if (!weekday) {
+        return false;
+      }
+
+      return !this.weekdays.includes(weekday);
+    },
+    add(weekday) {
+      if (!this.weekdays.includes(weekday)) {
+        this.weekdays.push(weekday)
+        this.weekdays.sort();
+      }
+    },
+    right(weekday) {
+      return weekday === "A_6" ? null : weekday.replace(/\d+$/, (match) => parseInt(match) + 1);
+    },
+    left(weekday) {
+      return weekday === "A_0" ? null : weekday.replace(/\d+$/, (match) => parseInt(match) - 1);
+    }
+  },
+}
+</script>
+
+<style scoped>
+#slot-container {
+  display: grid;
+  grid-template-columns: v-bind(columns);
+  grid-auto-rows: 1fr;
+  gap: 1rem;
+}
+</style>
\ No newline at end of file

aleksis/apps/lesrooster/frontend/components/lesson_raster/SlotCard.vue

+<script>
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+  name: "SlotCard",
+  props: {
+    item: {
+      period: Number,
+      weekday: String,
+      timeStart: String,
+      timeEnd: String,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+})
+</script>
+
+<template>
+  <v-card
+      :style="{
+          gridColumn: item.weekday,
+          gridRow: item.period + 1,
+        }"
+      :disabled="disabled"
+  >
+    <v-card-text>
+      <v-row align="center">
+        <v-col cols="6" class="text-h4">
+          {{ item.period }}
+        </v-col>
+        <v-col cols="6">
+          <div>{{ $d(new Date("1970-01-01T" + item.timeStart), "shortTime") }}</div>
+          <div>{{ $d(new Date("1970-01-01T" + item.timeEnd), "shortTime") }}</div>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file

aleksis/apps/lesrooster/frontend/components/slot.graphql

 query slots($orderBy: [String], $filters: JSONString) {
     items: slots(orderBy: $orderBy, filters: $filters) {
         id
+        model
         name
         validityRange {
             id

aleksis/apps/lesrooster/frontend/index.js

@@ -23,6 +23,18 @@ export default {
                 permission: "lesrooster.view_validity_ranges_rule",
             },
         },
+        {
+          path: "raster/",
+          component: () => import("./components/lesson_raster/LessonRaster.vue"),
+          name: "lesrooster.lesson_raster",
+          meta: {
+              inMenu: true,
+              titleKey: "lesrooster.lesson_raster.menu_title",
+              toolbarTitle: "lesrooster.lesson_raster.menu_title",
+              icon: "mdi-grid-large",
+              permission: "lesrooster.view_lesson_raster_rule",
+          }
+        },
         {
             path: "slots/",
             component: () => import("./components/LesroosterSlot.vue"),

aleksis/apps/lesrooster/frontend/messages/en.json

@@ -29,5 +29,8 @@
       "title_plural": "Breaks",
       "create_item": "Create Break"
     }
+  },
+  "actions":{
+    "copy_to_day": "Copy to another day"
   }
 }
\ No newline at end of file

aleksis/apps/lesrooster/schema/__init__.py

@@ -23,7 +23,7 @@ from .validity_range import (
     ValidityRangeBatchDeleteMutation,
     ValidityRangeBatchPatchMutation
 )
-from ..models import Slot
+from ..models import Slot, ValidityRange
 
 
 class Query(graphene.ObjectType):
@@ -38,6 +38,10 @@ class Query(graphene.ObjectType):
         # FIXME: This does also return `Break` objects (but with type set to Slot)
         return Slot.objects.non_polymorphic()
 
+    @staticmethod
+    def resolve_current_validity_range(root, info):
+        return ValidityRange.current
+
 
 class Mutation(graphene.ObjectType):
     create_break_slot = BreakSlotCreateMutation.Field()

aleksis/apps/lesrooster/schema/break_type.py

@@ -15,6 +15,8 @@ from ..models import Break
 
 
 class BreakSlotType(PermissionsTypeMixin, DjangoFilterMixin, DjangoObjectType):
+    model = graphene.String(default_value="Break")
+
     class Meta:
         model = Break
         fields = ("id", "validity_range", "name", "weekday", "period", "time_start", "time_end")

aleksis/apps/lesrooster/schema/slot.py

@@ -22,6 +22,8 @@ slot_filters = {
 
 
 class SlotType(PermissionsTypeMixin, DjangoFilterMixin, DjangoObjectType):
+    model = graphene.String(default_value="Default")
+
     class Meta:
         model = Slot
         fields = ("id", "validity_range", "name", "weekday", "period", "time_start", "time_end")
@@ -31,6 +33,10 @@ class SlotType(PermissionsTypeMixin, DjangoFilterMixin, DjangoObjectType):
     def get_queryset(cls, queryset, info):
         return queryset  # FIXME filter this queryset based on permissions
 
+    @staticmethod
+    def resolve_model(root, info):
+        return root.get_real_instance_class().__name__
+
 
 class SlotCreateMutation(DjangoCreateMutation):
     class Meta: