mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-01 04:10:06 -05:00
373 lines
20 KiB
HTML
373 lines
20 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% trans 'Meal-Plan' %}{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div id="app">
|
|
<div class="row">
|
|
<div class="col-md-4 offset-md-4">
|
|
<div class="input-group" style="margin-top: 8px; margin-bottom: 8px">
|
|
<div class="input-group-prepend">
|
|
<button class="btn btn-outline-secondary shadow-none"
|
|
@click="changeStartDate(number_of_days * -1)">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</button>
|
|
</div>
|
|
<input name="date" id="id_date" class="form-control" type="date" v-model="start_date"
|
|
@change="updatePlan()">
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-secondary shadow-none" @click="changeStartDate(number_of_days)">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<table class="table table-sm table-striped table-responsive-sm" style=" table-layout:fixed;">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th v-for="d in dates" style="width: 14.2%; text-align: center">[[formatDateDayname(d)]]<br/>[[formatDateDay(d)]].
|
|
<button class="btn btn-sm btn-outline-secondary shadow-none" @click="addDayToShopping(d)"><i
|
|
class="fas fa-cart-plus fa-sm"></i></button>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody v-for="t in meal_types">
|
|
<tr v-if="meal_plan[t.name] !== undefined">
|
|
<td :colspan="number_of_days" style="text-align: center">
|
|
[[ meal_plan[t.name].name]]
|
|
<template
|
|
v-if="t.created_by !== {{ request.user.pk }} && user_names[t.created_by] !== undefined">
|
|
([[ user_names[t.created_by] ]])
|
|
</template>
|
|
</td>
|
|
</tr>
|
|
<tr v-if="meal_plan[t.name] !== undefined">
|
|
<td v-for="d in meal_plan[t.name].days">
|
|
<draggable class="list-group" :list="d.items" group="plan" style="min-height: 40px"
|
|
@change="dragChanged(d.date, t, $event)"
|
|
:empty-insert-threshold="10" handle=".handle">
|
|
<div class="" v-for="(element, index) in d.items" :key="element.id">
|
|
<!-- small layout with handle -->
|
|
<div class="d-block d-md-none">
|
|
<div class="col-">
|
|
<i class="fas fa-arrows-alt handle input-group-text"
|
|
style="width: 100%"></i>
|
|
</div>
|
|
<div class="list-group-item" style="word-wrap: break-word;">
|
|
<a href="#" @click="plan_detail = element" data-toggle="modal"
|
|
data-target="#id_plan_detail_modal">[[ planElementName(element)]]</a>
|
|
</div>
|
|
</div>
|
|
<!-- big layout -->
|
|
<div class="list-group-item handle d-md-block d-none"
|
|
style="word-wrap: break-word; padding: 2;margin-bottom: 4">
|
|
<div class="col-md-12" style="padding: 0">
|
|
<a href="#" @click="plan_detail = element" data-toggle="modal"
|
|
data-target="#id_plan_detail_modal">[[ planElementName(element)]]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</draggable>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fas fa-calendar-plus"></i> {% trans 'New Entry' %} <a href="#" data-toggle="modal"
|
|
data-target="#id_plan_help_modal"><i
|
|
class="far fa-question-circle"></i></a>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="input-group mb-3">
|
|
<input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes"
|
|
placeholder="{% trans 'Search Recipe' %}">
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-secondary" type="button"
|
|
@click="getRandomRecipes">
|
|
<i class="fas fa-dice"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<draggable class="list-group" :list="recipes"
|
|
:group="{ name: 'plan', pull: 'clone', put: false }" :clone="cloneRecipe">
|
|
<div class="list-group-item d-flex align-items-center justify-content-between"
|
|
v-for="(element, index) in recipes" :key="element.id">
|
|
<span>
|
|
<i class="fas fa-arrows-alt"></i> [[element.name]]
|
|
</span>
|
|
<span class="badge badge-light badge-pill">[[element.servings]]</span>
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div>
|
|
<div class="card-body">
|
|
<input type="text" class="form-control" v-model="new_note_title"
|
|
placeholder="{% trans 'Title' %}" style="margin-bottom: 8px">
|
|
<textarea class="form-control" v-model="new_note_text"
|
|
placeholder="{% trans 'Note (optional)' %}"></textarea>
|
|
<small><span
|
|
class="text-muted">{% trans 'You can use markdown to format this field. See the <a href="/docs/markdown/" target="_blank" rel="noopener noreferrer">docs here</a>' %}</span></small>
|
|
<br/>
|
|
<br/>
|
|
<input type="number" class="form-control" v-model="new_note_servings"
|
|
placeholder="{% trans 'Serving Count' %}" style="margin-bottom: 8px">
|
|
<br/>
|
|
<draggable :list="pseudo_note_list"
|
|
:group="{ name: 'plan', pull: 'clone', put: false }" :clone="cloneNote">
|
|
<div class="list-group-item" v-for="(element, index) in pseudo_note_list"
|
|
:key="element.id">
|
|
<i class="fas fa-arrows-alt"></i> {% trans 'Create only note' %}
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fas fa-shopping-cart"></i> {% trans 'Shopping List' %}
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<template v-if="shopping_list.length < 1">{% trans 'Shopping list currently empty' %}</template>
|
|
<template v-else>
|
|
<a v-bind:href="getShoppingUrl()" class="btn btn-success"
|
|
target="_blank">{% trans 'Open Shopping List' %}</a>
|
|
<br/>
|
|
<br/>
|
|
{% trans 'Recipes' %}
|
|
<ul class="list-group" style="margin-top: 8px">
|
|
<li class="list-group-item" v-for="item in shopping_list"> [[ item.recipe_name ]]</li>
|
|
</ul>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6" style="margin-top: 8px">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fas fa-shopping-cart"></i> {% trans 'Plan' %}
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col">
|
|
<label>
|
|
{% trans 'Number of Days' %}
|
|
<input class="form-control" type="number" v-model="number_of_days"
|
|
@change="updatePlan(); $cookies.set('number_of_days',number_of_days, -1)">
|
|
</label>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<label>
|
|
{% trans 'Weekday offset' %}
|
|
<input class="form-control" type="number" v-model="start_offset"
|
|
@change="updatePlan(); $cookies.set('start_offset',start_offset, -1)">
|
|
<small class="text-muted">{% trans 'Number of days starting from the first day of the week to offset the default view.' %}</small>
|
|
</label>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<a href="#" data-toggle="modal"
|
|
data-target="#id_plan_types_modal">{% trans 'Edit plan types' %}</a> <br/>
|
|
<a href="#" data-toggle="modal"
|
|
data-target="#id_plan_help_modal">{% trans 'Show help' %}</a><br/>
|
|
<a v-bind:href="getIcalUrl()">{% trans 'Week iCal export' %}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br/>
|
|
<br/>
|
|
|
|
<div class="modal fade" id="id_plan_detail_modal" tabindex="-1" role="dialog"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<template v-if="plan_detail.title !==''">[[ plan_detail.title ]]</template>
|
|
<template v-else>[[ plan_detail.recipe_name ]]</template>
|
|
<small
|
|
class="text-muted"><br/>[[ plan_detail.meal_type_name ]] [[
|
|
formatLocalDate(plan_detail.date) ]]</small>
|
|
</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<template v-if="plan_detail.recipe_name !== undefined ">
|
|
<small class="text-muted">{% trans 'Recipe' %}</small><br/>
|
|
<a v-bind:href="planDetailRecipeUrl()" target="_blank">[[ plan_detail.recipe_name ]]</a>
|
|
<br/>
|
|
<br/>
|
|
<small class="text-muted">{% trans 'Serving Count' %}</small><br/>
|
|
<span>[[ plan_detail.servings ]]</span>
|
|
</template>
|
|
|
|
<template v-if="plan_detail.note !== ''">
|
|
<small class="text-muted">{% trans 'Note' %}</small><br/>
|
|
<span v-html="plan_detail.note_markdown"></span>
|
|
<br/>
|
|
</template>
|
|
|
|
<br/>
|
|
<br/>
|
|
<template v-if="plan_detail.created_by !== undefined ">
|
|
<small class="text-muted">{% trans 'Created by' %}</small><br/>
|
|
[[ user_names[plan_detail.created_by] ]]
|
|
<br/>
|
|
</template>
|
|
|
|
<template v-if="plan_detail.shared.length > 0">
|
|
<small class="text-muted">{% trans 'Shared with' %}</small><br/>
|
|
<span>[[ planDetailUserList() ]]</span>
|
|
<br/>
|
|
</template>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger"
|
|
@click="deleteEntry(plan_detail)">{% trans 'Delete' %}</button>
|
|
<button type="button" class="btn btn-success"
|
|
v-if="!shopping_list.includes(plan_detail) && plan_detail.recipe_name !== undefined"
|
|
@click="shopping_list.push(plan_detail)">{% trans 'Add to Shopping' %}</button>
|
|
<a class="btn btn-primary" v-bind:href="planDetailEditUrl()">{% trans 'Edit' %}</a>
|
|
<button type="button" class="btn btn-secondary"
|
|
data-dismiss="modal">{% trans 'Close' %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="id_plan_types_modal" tabindex="-1" role="dialog"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{% trans 'Edit plan types' %}</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<draggable :list="meal_types_edit" handle=".handle"
|
|
:group="{ name: 'types'}">
|
|
<div v-for="(element, index) in meal_types_edit"
|
|
:key="element.id">
|
|
<template v-if="!element.delete">
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend handle">
|
|
<button tabindex="-1" class="btn btn-outline-secondary"><i
|
|
class="fas fa-arrows-alt-v"></i></button>
|
|
</div>
|
|
<input class="form-control" v-model="element.name">
|
|
<div class="input-group-append">
|
|
<button tabindex="-1" class="btn btn-outline-danger" type="button"
|
|
@click="markTypeDelete(element)"><i class="fas fa-trash-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary"
|
|
@click="meal_types_edit.push({name:'{% trans 'New meal type' %}', delete:false})">{% trans 'New' %}</button>
|
|
<button type="button" class="btn btn-success"
|
|
@click="updatePlanTypes()">{% trans 'Save' %}</button>
|
|
<button type="button" class="btn btn-secondary"
|
|
data-dismiss="modal">{% trans 'Close' %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="id_plan_help_modal" tabindex="-1" role="dialog"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{% trans 'Meal Plan Help' %}</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
{% blocktrans %}
|
|
<p>The meal plan module allows planning of meals both with recipes and notes.</p>
|
|
<p>Simply select a recipe from the list of recently viewed recipes or search the one you
|
|
want and drag it to the desired plan position. You can also add a note and a title and
|
|
then drag the recipe to create a plan entry with a custom title and note. Creating only
|
|
Notes is possible by dragging the create note box into the plan.</p>
|
|
<p>Click on a recipe in order to open the detailed view. There you can also add it to the
|
|
shopping list. You can also add all recipes of a day to the shopping list by
|
|
clicking the shopping cart at the top of the table.</p>
|
|
<p>Since a common use case is to plan meals together you can define
|
|
users you want to share your plan with in the settings.
|
|
</p>
|
|
<p>You can also edit the types of meals you want to plan. If you share your plan with
|
|
someone with
|
|
different meals, their meal types will appear in your list as well. To prevent
|
|
duplicates (e.g. Other and Misc.)
|
|
name your meal types the same as the users you share your meals with and they will be
|
|
merged.</p>
|
|
{% endblocktrans %}
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
|
|
data-dismiss="modal">{% trans 'Close' %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="{% url 'javascript-catalog' %}"></script>
|
|
|
|
{% load render_bundle from webpack_loader %}
|
|
<div id="app_2">
|
|
<app></app>
|
|
</div>
|
|
{% render_bundle 'chunk-vendors' %}
|
|
{% render_bundle 'vue_app_01' %}
|
|
|
|
{% endblock %} |