Resolve "Implement basic functionality"

Closes #1 (closed) Closes #2 (closed) Closes #3 (closed) Closes #4 (closed) Closes #5 (closed) Closes #6 (closed)

example/src/App.vue

@@ -63,7 +63,9 @@ import NumberCounter from "./components/NumberCounter.vue";
           <number-counter v-model="item.data.num"></number-counter>
         </template>
         <template #highlight>
-          <div ref="highlight" class="custom-highlight">Das hier ist das Highlight</div>
+          <div ref="highlight" class="custom-highlight">
+            Das hier ist das Highlight
+          </div>
         </template>
       </drag-grid>
       <span>← Drag here please →</span>
@@ -74,18 +76,34 @@ import NumberCounter from "./components/NumberCounter.vue";
       </drag-grid>
     </div>
     <div class="ttt-container">
-      <label>
-        Lesson 1 has length: {{ lesson1Length }}
-        <input type="range" v-model="lesson1Length" min="1" max="5" step="1" />
-      </label>
-      <label>
-        Lesson grid has width: {{ lesson1Cols }}
-        <input type="range" v-model="lesson1Cols" min="2" max="5" step="1" />
-      </label>
-      <label>
-        Lesson grid has height: {{ lesson1Rows }}
-        <input type="range" v-model="lesson1Rows" min="6" max="10" step="1" />
-      </label>
+      <div>
+        <label>
+          Lesson 1 has length: {{ lesson1Length }}
+          <input
+            type="range"
+            v-model="lesson1Length"
+            min="1"
+            max="5"
+            step="1"
+          />
+        </label>
+        <input type="text" v-model="lessonData.lesson1" />
+      </div>
+      <div>
+        <label>
+          Lesson grid has width: {{ lesson1Cols }}
+          <input type="range" v-model="lesson1Cols" min="2" max="5" step="1" />
+        </label>
+        <input type="text" v-model="lessonData.lesson2" />
+      </div>
+      <div>
+        <label>
+          Lesson grid has height: {{ lesson1Rows }}
+          <input type="range" v-model="lesson1Rows" min="6" max="10" step="1" />
+          <input type="text" v-model="lessonData.lesson3.inside" />
+          <input type="text" v-model="lessonData.lesson3.outside" />
+        </label>
+      </div>
 
       <drag-grid
         :value="lessons1"
@@ -207,6 +225,14 @@ export default {
       lesson3X: -1,
       lesson3Y: -1,
       lesson3inPlan: false,
+      lessonData: {
+        lesson1: "Nothing",
+        lesson2: "Hallo",
+        lesson3: {
+          inside: "This is lesson 3 inside the plan",
+          outside: "This is lesson3 outside of the plan",
+        },
+      },
     };
   },
   computed: {
@@ -222,7 +248,9 @@ export default {
           w: 1,
           h: this.lesson1Length,
           key: "lesson1",
-          data: {},
+          data: {
+            text: this.lessonData.lesson1,
+          },
         },
         {
           x: (grid) => {
@@ -234,7 +262,9 @@ export default {
           w: 1,
           h: parseInt(this.lesson1Length) + 1,
           key: "lesson2",
-          data: {},
+          data: {
+            text: this.lessonData.lesson2,
+          },
         },
         {
           x: (grid) => {
@@ -252,7 +282,14 @@ export default {
           w: 1,
           h: parseInt(this.lesson1Length) + 1,
           key: "lesson3",
-          data: {},
+          data: (grid) => {
+            return {
+              text:
+                grid.gridId === "lesson-storage"
+                  ? this.lessonData.lesson3.outside
+                  : this.lessonData.lesson3.inside,
+            };
+          },
         },
       ];
     },