Skip to content
Snippets Groups Projects
Commit aceb22a4 authored by Julian's avatar Julian
Browse files

Move example 4 to separate component and docs

parent 2fbb7844
No related branches found
No related tags found
1 merge request!2Resolve "Implement basic functionality"
Hide whitespace changes
Inline Side-by-side
docs/.vuepress/config.js
+ 1
− 0
View file @ aceb22a4
......@@ -10,6 +10,7 @@ module.exports = {
'/examples/Generic.md',
'/examples/TicTacToe.md',
'/examples/Counters.md',
'/examples/Lessons.md',
]
}
],
......
docs/examples/Lessons.md 0 → 100644
+ 17
− 0
View file @ aceb22a4
# Example 4: Dynamic lessons
These lessons are loaded from `computed` to simulate a
non-editable source like an API. they are changed using the method
`handleLessonMoved`. Try changing the sizes of Lesson1, the
grid and the texts of the items! The lesson container on the side doesn't
have a highlight and doesn't keep track of the item position. Try moving
`item3` back and forth, the text will change!
<ClientOnly>
<script setup>
import Example4Lessons from "../../example/src/Example4Lessons.vue";
</script>
<Example4Lessons />
</ClientOnly>
\ No newline at end of file
example/src/App.vue
+ 2
− 154
View file @ aceb22a4
......@@ -4,6 +4,7 @@ import CircularCard from "./components/CircularCard.vue";
import Example1Generic from "./Example1Generic.vue";
import Example2TicTacToe from "./Example2TicTacToe.vue";
import Example3Counters from "./Example3Counters.vue";
import Example4Lessons from "./Example4Lessons.vue";
</script>
<template>
......@@ -45,63 +46,8 @@ import Example3Counters from "./Example3Counters.vue";
have a highlight and doesn't keep track of the item position. Try moving
<code>item3</code> back and forth!
</p>
<div class="ttt-container">
<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"
:cols="parseInt(lesson1Cols)"
:rows="parseInt(lesson1Rows)"
class="bordered"
context="lesson"
grid-id="lesson-plan"
@itemChanged="handleLessonMoved"
>
<template #item="item">
<div class="container">{{ item }}</div>
</template>
</drag-grid>
<drag-grid
:value="lessons1"
:cols="1"
:rows="10"
context="lesson"
grid-id="lesson-storage"
@itemChanged="handleLessonDropInContainer"
no-highlight
>
<template #item="item">
<div class="container">{{ item }}</div>
</template>
</drag-grid>
</div>
<example4-lessons></example4-lessons>
<h2>Example 5: Dynamic colors</h2>
<p>
......@@ -237,29 +183,6 @@ import Example3Counters from "./Example3Counters.vue";
export default {
name: "App",
methods: {
handleLessonMoved(lesson) {
this.logInput(lesson);
switch (lesson.key) {
case "lesson1":
this.lesson1X = lesson.x;
this.lesson1Y = lesson.y;
break;
case "lesson2":
this.lesson2X = lesson.x;
this.lesson2Y = lesson.y;
break;
case "lesson3":
this.lesson3X = lesson.x;
this.lesson3Y = lesson.y;
this.lesson3inPlan = true;
break;
default:
console.error("Something is wrong here!");
}
},
handleLessonDropInContainer(lesson) {
if (lesson.key === "lesson3") this.lesson3inPlan = false;
},
contains(array, search) {
return array.filter((obj) => obj === search).length > 0;
},
......@@ -309,24 +232,6 @@ export default {
{ x: 1, y: 1, w: 1, h: 1, key: "a1", data: { text: "X" } },
{ x: 3, y: 3, w: 1, h: 1, key: "b1", data: { text: "O" } },
],
lesson1Length: 1,
lesson1Cols: 4,
lesson1Rows: 6,
lesson1X: 1,
lesson1Y: 1,
lesson2X: 2,
lesson2Y: 1,
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",
},
},
placedA: ["item1", "item2"],
placedB: ["item3", "item4"],
placedC: ["item5", "item6"],
......@@ -368,63 +273,6 @@ export default {
};
},
computed: {
lessons1() {
return [
{
x: (grid) => {
return grid.gridId === "lesson-plan" ? this.lesson1X : 0;
},
y: (grid) => {
return grid.gridId === "lesson-plan" ? this.lesson1Y : 0;
},
w: 1,
h: this.lesson1Length,
key: "lesson1",
data: {
text: this.lessonData.lesson1,
},
},
{
x: (grid) => {
return grid.gridId === "lesson-plan" ? this.lesson2X : 0;
},
y: (grid) => {
return grid.gridId === "lesson-plan" ? this.lesson2Y : 0;
},
w: 1,
h: parseInt(this.lesson1Length) + 1,
key: "lesson2",
data: {
text: this.lessonData.lesson2,
},
},
{
x: (grid) => {
if (this.lesson3inPlan) {
return grid.gridId === "lesson-plan" ? this.lesson3X : -1;
}
return grid.gridId === "lesson-plan" ? -1 : 0;
},
y: (grid) => {
if (this.lesson3inPlan) {
return grid.gridId === "lesson-plan" ? this.lesson3Y : -1;
}
return grid.gridId === "lesson-plan" ? -1 : 0;
},
w: 1,
h: parseInt(this.lesson1Length) + 1,
key: "lesson3",
data: (grid) => {
return {
text:
grid.gridId === "lesson-storage"
? this.lessonData.lesson3.outside
: this.lessonData.lesson3.inside,
};
},
},
];
},
colorGrid() {
let items = ["item1", "item2", "item3", "item4", "item5", "item6"];
let greens = [
......
example/src/Example4Lessons.vue 0 → 100644
+ 210
− 0
View file @ aceb22a4
<script setup>
import DragGrid from "../../src/DragGrid.vue";
</script>
<template>
<div>
<div class="row">
<div>
<label>
Lesson 1 has length: {{ lesson1Length }}
<input
type="range"
v-model="lesson1Length"
min="1"
max="5"
step="1"
/>
</label>
<label for="lesson1">Text of Lesson 1:</label>
<input id="lesson1" 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>
<label for="lesson2">Text of Lesson 2:</label>
<input id="lesson2" 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" />
</label>
<label for="lesson3">Texts of Lesson 3:</label>
<input id="lesson3" type="text" v-model="lessonData.lesson3.inside" />
<input type="text" v-model="lessonData.lesson3.outside" />
</div>
</div>
<div class="row">
<drag-grid
:value="lessons1"
:cols="parseInt(lesson1Cols)"
:rows="parseInt(lesson1Rows)"
class="bordered"
context="lesson"
grid-id="lesson-plan"
@itemChanged="handleLessonMoved"
>
<template #item="item">
<div class="container">{{ item }}</div>
</template>
</drag-grid>
<drag-grid
:value="lessons1"
:cols="1"
:rows="10"
context="lesson"
grid-id="lesson-storage"
@itemChanged="handleLessonDropInContainer"
no-highlight
class="bordered"
>
<template #item="item">
<div class="container">{{ item }}</div>
</template>
</drag-grid>
</div>
</div>
</template>
<script>
export default {
name: "Example4Lessons",
data() {
return {
lesson1Length: 1,
lesson1Cols: 4,
lesson1Rows: 6,
lesson1X: 1,
lesson1Y: 1,
lesson2X: 2,
lesson2Y: 1,
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",
},
},
};
},
methods: {
logInput(input) {
console.log("New movement detected:", input);
},
handleLessonMoved(lesson) {
this.logInput(lesson);
switch (lesson.key) {
case "lesson1":
this.lesson1X = lesson.x;
this.lesson1Y = lesson.y;
break;
case "lesson2":
this.lesson2X = lesson.x;
this.lesson2Y = lesson.y;
break;
case "lesson3":
this.lesson3X = lesson.x;
this.lesson3Y = lesson.y;
this.lesson3inPlan = true;
break;
default:
console.error("Something is wrong here!");
}
},
handleLessonDropInContainer(lesson) {
if (lesson.key === "lesson3") this.lesson3inPlan = false;
},
},
computed: {
lessons1() {
return [
{
x: (grid) => {
return grid.gridId === "lesson-plan" ? this.lesson1X : 0;
},
y: (grid) => {
return grid.gridId === "lesson-plan" ? this.lesson1Y : 0;
},
w: 1,
h: this.lesson1Length,
key: "lesson1",
data: {
text: this.lessonData.lesson1,
},
},
{
x: (grid) => {
return grid.gridId === "lesson-plan" ? this.lesson2X : 0;
},
y: (grid) => {
return grid.gridId === "lesson-plan" ? this.lesson2Y : 0;
},
w: 1,
h: parseInt(this.lesson1Length) + 1,
key: "lesson2",
data: {
text: this.lessonData.lesson2,
},
},
{
x: (grid) => {
if (this.lesson3inPlan) {
return grid.gridId === "lesson-plan" ? this.lesson3X : -1;
}
return grid.gridId === "lesson-plan" ? -1 : 0;
},
y: (grid) => {
if (this.lesson3inPlan) {
return grid.gridId === "lesson-plan" ? this.lesson3Y : -1;
}
return grid.gridId === "lesson-plan" ? -1 : 0;
},
w: 1,
h: parseInt(this.lesson1Length) + 1,
key: "lesson3",
data: (grid) => {
return {
text:
grid.gridId === "lesson-storage"
? this.lessonData.lesson3.outside
: this.lessonData.lesson3.inside,
};
},
},
];
},
},
};
</script>
<style scoped>
.row {
display: flex;
justify-content: space-between;
}
.row > div:not(.bordered) {
display: flex;
flex-direction: column;
gap: 3px;
}
.bordered {
border: 2px solid grey;
}
.container {
background: lightcoral;
width: 100%;
height: 100%;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment