mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-01 04:10:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

basic plan table drag and drop working

Browse Source
This commit is contained in:
vabene1111
2020-06-03 12:05:43 +02:00
parent aea3f62f9b
commit 3b5b505116
1 changed files with 39 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
cookbook/templates/meal_plan.html
View File

@@ -50,58 +50,25 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="t in meal_types"> <tr v-for="mp in meal_plan">
<td>[[t]]</td> <td v-for="d in mp.days">
<draggable class="list-group" :list="d.items" group="plan" @change="log('l2', $event)">
<div
class="list-group-item"
v-for="(element, index) in d.items"
:key="element.id"
>
[[element.name]] - [[element.id]]
</div>
</draggable>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
[[plan_entries]] [[plan_entries]]
<h1>drag n drop</h1> [[meal_types]]
<div class="row">
<div class="col-3">
<h3>Draggable 1</h3>
<draggable class="list-group" :list="plan_entries" group="plan_entries" @change="log( 'l1', $event)">
<div
class="list-group-item"
v-for="(element, index) in plan_entries"
:key="element.title"
>
[[element]]
</div>
</draggable>
</div>
<div class="col-3">
<h3>Draggable 2</h3>
<draggable class="list-group" :list="meal_types" group="plan_entries" @change="log('l2', $event)">
<div
class="list-group-item"
v-for="(element, index) in meal_types"
:key="element.name"
>
[[element]]
</div>
</draggable>
</div>
<div class="col-3">
<h3>Draggable 2</h3>
<draggable class="list-group" :list="meal_plan[0].items" group="plan_entries"
@change="log('l3', $event)">
<div
class="list-group-item"
v-for="(element, index) in meal_plan[0].items"
:key="element.name"
>
[[element]]
</div>
</draggable>
</div>
</div>
</div> </div>
@@ -117,26 +84,19 @@
days: moment.weekdays(), days: moment.weekdays(),
plan_entries: [], plan_entries: [],
meal_types: [], meal_types: [],
list3: [],
meal_plan: [ meal_plan: [
{
name: "Breakfast",
id: 1,
items: []
}
], ],
}, },
mounted: function () { mounted: function () {
this.getPlanEntries(); this.getPlanEntries();
this.getPlanTypes();
}, },
methods: { methods: {
getPlanEntries: function () { getPlanEntries: function () {
this.loading = true; this.loading = true;
this.$http.get("{% url 'api:mealplan-list' %}?week=" + week).then((response) => { this.$http.get("{% url 'api:mealplan-list' %}?week=" + week).then((response) => {
this.plan_entries = response.data; this.plan_entries = response.data;
this.loading = false; this.getPlanTypes();
}) })
.catch((err) => { .catch((err) => {
this.loading = false; this.loading = false;
@@ -156,21 +116,28 @@
}) })
}, },
buildGrid: function () { buildGrid: function () {
for (t of this.meal_types) {
console.log(t.name)
var type = {
name: t.name,
days: []
}
for (d of this.days) {
type.days.push({
name: d,
items: [
{'id':Math.round(Math.random()*1000), "name": "Test"}
]
})
}
this.meal_plan.push(type)
}
}, },
log: function (param, evt) { log: function (param, evt) {
console.log("param") console.log("param")
console.log(param) console.log(param)
console.log("EVT") console.log("EVT")
console.log(evt) console.log(evt)
},
test: function (evt, originalEvent) {
console.log("THIS")
console.log(this)
console.log("EVT")
console.log(evt)
console.log("OEV")
console.log(originalEvent)
} }
} }
}); });