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

ui improvements (shopping and meal plan)

Browse Source 
- fixed content scaling for meal plan and shopping
- style fixes on shopping list
- touch based swipe actions for shopping list
- better mobile experience overall
This commit is contained in:
Kaibu
2022-04-23 01:28:20 +02:00
parent 6953f763d2
commit b037203b8f
5 changed files with 693 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
vue/src/apps/MealPlanView/MealPlanView.vue
View File

@@ -2,7 +2,7 @@
<div> <div>
<b-tabs content-class="mt-3" v-model="current_tab"> <b-tabs content-class="mt-3" v-model="current_tab">
<b-tab :title="$t('Planner')" active> <b-tab :title="$t('Planner')" active>
<div class="row"> <div class="row calender-row">
<div class="col-12 calender-parent"> <div class="col-12 calender-parent">
<calendar-view <calendar-view
:show-date="showDate" :show-date="showDate"
@@ -693,19 +693,24 @@ export default {
opacity: 0; opacity: 0;
} }
.calender-row {
height: calc(100% - 240px);
}
.calender-parent { .calender-parent {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
height: 70vh; height: 100%
} }
.cv-item { .cv-item {
white-space: inherit !important; white-space: inherit !important;
} }
.isHovered { .isHovered {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
} }
@@ -837,4 +842,10 @@ having to override as much.
opacity: 0.5; opacity: 0.5;
background: #c8ebfb; background: #c8ebfb;
} }
@media (max-width: 767.9px) {
.periodLabel {
font-size: 18px !important;
}
}
</style> </style>

6
vue/src/apps/RecipeView/RecipeView.vue
View File

@@ -233,7 +233,7 @@ export default {
this.loadRecipe(window.RECIPE_ID) this.loadRecipe(window.RECIPE_ID)
this.$i18n.locale = window.CUSTOM_LOCALE this.$i18n.locale = window.CUSTOM_LOCALE
this.requestWakeLock() this.requestWakeLock()
window.addEventListener('resize', this.handleRezise); window.addEventListener('resize', this.handleResize);
}, },
beforeUnmount() { beforeUnmount() {
this.destroyWakeLock() this.destroyWakeLock()
@@ -249,7 +249,7 @@ export default {
} }
} }
}, },
handleRezise: function () { handleResize: function () {
if (document.getElementById('nutrition_container') !== null) { if (document.getElementById('nutrition_container') !== null) {
this.ingredient_height = document.getElementById('ingredient_container').clientHeight - document.getElementById('nutrition_container').clientHeight this.ingredient_height = document.getElementById('ingredient_container').clientHeight - document.getElementById('nutrition_container').clientHeight
} else { } else {
@@ -300,7 +300,7 @@ export default {
this.loading = false this.loading = false
setTimeout(() => { setTimeout(() => {
this.handleRezise() this.handleResize()
}, 100) }, 100)
}) })
}, },

391
vue/src/apps/ShoppingListView/ShoppingListView.vue
View File

@@ -1,42 +1,50 @@
<template> <template>
<div id="app" style="margin-bottom: 4vh"> <div id="app" style="margin-bottom: 4vh">
<b-alert :show="!online" dismissible class="small float-up" variant="warning">{{ $t("OfflineAlert") }}</b-alert> <b-alert :show="!online" dismissible class="small float-up" variant="warning">{{ $t("OfflineAlert") }}</b-alert>
<div class="row float-top pl-0 pr-0"> <div class="row float-top w-100">
<div class="col-auto no-gutter ml-auto"> <div class="col-auto no-gutter ml-auto">
<b-button variant="link" class="px-1 pt-0 pb-1 d-none d-md-inline-block"> <b-button variant="link" class="px-1 pt-0 pb-1 d-none d-md-inline-block">
<i class="btn fas fa-plus-circle fa-lg px-0" @click="entrymode = !entrymode" :class="entrymode ? 'text-success' : 'text-primary'" /> <i class="btn fas fa-plus-circle fa-lg px-0" @click="entrymode = !entrymode"
:class="entrymode ? 'text-success' : 'text-primary'"/>
</b-button> </b-button>
<b-button variant="link" class="px-1 pt-0 pb-1 d-none d-md-inline-block"> <b-button variant="link" class="px-1 pt-0 pb-1 d-none d-md-inline-block">
<i class="fas fa-download fa-lg nav-link dropdown-toggle text-primary px-1" id="downloadShoppingLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i> <i class="fas fa-download fa-lg nav-link dropdown-toggle text-primary px-1"
id="downloadShoppingLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="downloadShoppingLink"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="downloadShoppingLink">
<DownloadPDF dom="#shoppinglist" name="shopping.pdf" :label="$t('download_pdf')" icon="far fa-file-pdf" /> <DownloadPDF dom="#shoppinglist" name="shopping.pdf" :label="$t('download_pdf')"
<DownloadCSV :items="csvData" :delim="settings.csv_delim" name="shopping.csv" :label="$t('download_csv')" icon="fas fa-file-csv" /> icon="far fa-file-pdf"/>
<CopyToClipboard :items="csvData" :settings="settings" :label="$t('copy_to_clipboard')" icon="fas fa-clipboard-list" /> <DownloadCSV :items="csvData" :delim="settings.csv_delim" name="shopping.csv"
<CopyToClipboard :items="csvData" :settings="settings" format="table" :label="$t('copy_markdown_table')" icon="fab fa-markdown" /> :label="$t('download_csv')" icon="fas fa-file-csv"/>
<CopyToClipboard :items="csvData" :settings="settings" :label="$t('copy_to_clipboard')"
icon="fas fa-clipboard-list"/>
<CopyToClipboard :items="csvData" :settings="settings" format="table"
:label="$t('copy_markdown_table')" icon="fab fa-markdown"/>
</div> </div>
</b-button> </b-button>
<b-button variant="link" id="id_filters_button" class="px-1 pt-0 pb-1"> <i id="id_filters_button" class="fas fa-filter fa-fw mt-1" style="font-size: 16px"
<i class="btn fas fa-filter text-decoration-none fa-lg px-1" :class="filterApplied ? 'text-danger' : 'text-primary'" /> :class="filterApplied ? 'text-danger' : 'text-primary'"/>
</b-button>
</div> </div>
</div> </div>
<b-tabs content-class="mt-3" v-model="current_tab"> <b-tabs content-class="mt-2" v-model="current_tab" class="mt-md-1" style="margin-top: 22px">
<!-- shopping list tab --> <!-- shopping list tab -->
<b-tab active> <b-tab active>
<template #title> <template #title>
<b-spinner v-if="loading" type="border" small></b-spinner> <b-spinner v-if="loading" type="border" small class="d-inline-block"></b-spinner>
{{ $t("Shopping_list") }} <i v-if="!loading" class="fas fa-shopping-cart fa-fw d-inline-block d-md-none"></i>
<span class="d-none d-md-block">{{ $t('Shopping_list') }}</span>
</template> </template>
<div class="container p-0" id="shoppinglist"> <div class="container p-0" id="shoppinglist">
<div class="row"> <div class="row">
<div class="col col-md-12 p-0 p-lg-3"> <div class="col col-md-12 p-0 p-lg-3">
<div role="tablist"> <div role="tablist">
<!-- add to shopping form --> <!-- add to shopping form -->
<div class="container">
<b-row class="justify-content-md-center align-items-center pl-1 pr-1" v-if="entrymode"> <b-row class="justify-content-md-center align-items-center pl-1 pr-1"
<b-col cols="12" md="3" v-if="!ui.entry_mode_simple" class="d-none d-md-block mt-1"> v-if="entrymode">
<b-col cols="12" md="3" v-if="!ui.entry_mode_simple"
class="d-none d-md-block mt-1">
<b-form-input <b-form-input
size="lg" size="lg"
min="1" min="1"
@@ -47,20 +55,28 @@
></b-form-input> ></b-form-input>
</b-col> </b-col>
<b-col cols="12" md="4" v-if="!ui.entry_mode_simple" class="mt-1"> <b-col cols="12" md="4" v-if="!ui.entry_mode_simple" class="mt-1">
<lookup-input :class_list="'mb-0'" :form="formUnit" :model="Models.UNIT" @change="new_item.unit = $event" :show_label="false" :clear="clear" /> <lookup-input :class_list="'mb-0'" :form="formUnit" :model="Models.UNIT"
@change="new_item.unit = $event" :show_label="false"
:clear="clear"/>
</b-col> </b-col>
<b-col cols="12" md="4" v-if="!ui.entry_mode_simple" class="mt-1"> <b-col cols="12" md="4" v-if="!ui.entry_mode_simple" class="mt-1">
<lookup-input :class_list="'mb-0'" :form="formFood" :model="Models.FOOD" @change="new_item.food = $event" :show_label="false" :clear="clear" /> <lookup-input :class_list="'mb-0'" :form="formFood" :model="Models.FOOD"
@change="new_item.food = $event" :show_label="false"
:clear="clear"/>
</b-col> </b-col>
<b-col cols="12" md="11" v-if="ui.entry_mode_simple" class="mt-1"> <b-col cols="12" md="11" v-if="ui.entry_mode_simple" class="mt-1">
<b-form-input size="lg" type="text" :placeholder="$t('QuickEntry')" v-model="new_item.ingredient" @keyup.enter="addItem"></b-form-input> <b-form-input size="lg" type="text" :placeholder="$t('QuickEntry')"
v-model="new_item.ingredient"
@keyup.enter="addItem"></b-form-input>
</b-col> </b-col>
<b-col cols="12" md="1" class="d-none d-md-block mt-1"> <b-col cols="12" md="1" class="d-none d-md-block mt-1">
<b-button variant="link" class="px-0"> <b-button variant="link" class="px-0">
<i class="btn fas fa-cart-plus fa-lg px-0 text-success" @click="addItem" /> <i class="btn fas fa-cart-plus fa-lg px-0 text-success"
@click="addItem"/>
</b-button> </b-button>
</b-col> </b-col>
<b-col cols="12" md="3" v-if="!ui.entry_mode_simple" class="d-block d-md-none mt-1"> <b-col cols="12" md="3" v-if="!ui.entry_mode_simple"
class="d-block d-md-none mt-1">
<b-row> <b-row>
<b-col cols="9"> <b-col cols="9">
<b-form-input <b-form-input
@@ -85,19 +101,24 @@
<b-form-checkbox switch v-model="ui.entry_mode_simple"> <b-form-checkbox switch v-model="ui.entry_mode_simple">
{{ $t("QuickEntry") }} {{ $t("QuickEntry") }}
</b-form-checkbox> </b-form-checkbox>
<b-button variant="success" size="sm" class="d-flex d-md-none p-0" v-if="ui.entry_mode_simple"> <b-button variant="success" size="sm" class="d-flex d-md-none p-0"
v-if="ui.entry_mode_simple">
<i class="btn fas fa-cart-plus" @click="addItem"/> <i class="btn fas fa-cart-plus" @click="addItem"/>
</b-button> </b-button>
</b-row> </b-row>
</div>
<!-- shopping list table --> <!-- shopping list table -->
<div v-if="items && items.length > 0"> <div v-if="items && items.length > 0">
<div v-for="(done, x) in Sections" :key="x"> <div v-for="(done, x) in Sections" :key="x">
<div v-if="x == 'true'" class="bg-header w-100 text-center d-flex justify-content-center align-items-center"> <div v-if="x == 'true'"
class="bg-header w-100 text-center d-flex justify-content-center align-items-center">
<span class="h4 d-flex mt-1 mb-1">{{ $t("Completed") }}</span> <span class="h4 d-flex mt-1 mb-1">{{ $t("Completed") }}</span>
</div> </div>
<div v-for="(s, i) in done" :key="i"> <div v-for="(s, i) in done" :key="i">
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true" v-if="Object.entries(s).length > 0"> <div class="dropdown b-dropdown position-static inline-block"
data-html2canvas-ignore="true" v-if="Object.entries(s).length > 0">
<button <button
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false" aria-expanded="false"
@@ -120,10 +141,12 @@
</b-button> </b-button>
</div> </div>
<div class="collapse" :id="'section-' + sectionID(x, i)" visible role="tabpanel" :class="{ show: x == 'false' }"> <div class="collapse" :id="'section-' + sectionID(x, i)" visible
role="tabpanel" :class="{ show: x == 'false' }">
<!-- passing an array of values to the table grouped by Food --> <!-- passing an array of values to the table grouped by Food -->
<transition-group name="slide-fade"> <transition-group name="slide-fade">
<div class="ml-4 mr-0" v-for="(entries, x) in Object.entries(s)" :key="x"> <div class="pl-4 pr-0" v-for="(entries, x) in Object.entries(s)"
:key="x">
<transition name="slide-fade" mode="out-in"> <transition name="slide-fade" mode="out-in">
<shopping-line-item <shopping-line-item
:entries="entries[1]" :entries="entries[1]"
@@ -131,6 +154,7 @@
:settings="settings" :settings="settings"
@open-context-menu="openContextMenu" @open-context-menu="openContextMenu"
@update-checkbox="updateChecked" @update-checkbox="updateChecked"
@update-delaythis="delayThis"
/> />
</transition> </transition>
</div> </div>
@@ -146,16 +170,35 @@
</b-tab> </b-tab>
<!-- recipe tab --> <!-- recipe tab -->
<b-tab :title="$t('Recipes')"> <b-tab :title="$t('Recipes')">
<template #title>
<i class="fas fa-book fa-fw d-block d-md-none"></i>
<span class="d-none d-md-block">{{ $t('Recipes') }}</span>
</template>
<div class="container p-0"> <div class="container p-0">
<b-row class="justify-content-md-center align-items-center p-1"> <div class="row">
<b-col cols="10"> <div class="col col-md-12 p-0 p-lg-3">
<b-input-group> <div role="tablist">
<b-input-group-prepend is-text> <!-- add to shopping form -->
{{ $t("Servings") }} <div class="container">
</b-input-group-prepend> <b-row class="justify-content-md-center align-items-center pl-1 pr-1">
<b-input-group-prepend is-text> <b-col cols="10" md="3" class="mt-1">
<input type="number" :min="1" v-model="add_recipe_servings" style="width: 3em" /> <b-form-input
</b-input-group-prepend> size="lg"
min="1"
type="number"
:description="$t('Servings')"
v-model="add_recipe_servings"
style="font-size: 16px; border-radius: 5px !important; border: 1px solid #e8e8e8 !important"
></b-form-input>
</b-col>
<b-col cols="2" md="1" class="d-block d-md-none mt-1">
<b-button variant="link" class="px-0">
<i class="btn fas fa-cart-plus fa-lg px-0 text-success"
@click="addRecipeToShopping"
:disabled="!new_recipe.id"/>
</b-button>
</b-col>
<b-col cols="12" md="8" class="mt-1">
<generic-multiselect <generic-multiselect
class="input-group-text m-0 p-0" class="input-group-text m-0 p-0"
@change="new_recipe = $event.val" @change="new_recipe = $event.val"
@@ -166,13 +209,16 @@
:limit="20" :limit="20"
:multiple="false" :multiple="false"
/> />
<b-input-group-append> </b-col>
<b-button variant="success" @click="addRecipeToShopping" :disabled="!new_recipe.id">{{ $t("Add_to_Shopping") }}</b-button> <b-col cols="12" md="1" class="d-none d-md-block mt-1">
</b-input-group-append> <b-button variant="link" class="px-0">
</b-input-group> <i class="btn fas fa-cart-plus fa-lg px-0 text-success"
@click="addRecipeToShopping"
:disabled="!new_recipe.id"/>
</b-button>
</b-col> </b-col>
</b-row> </b-row>
<table class="table w-100"> <table class="table w-100 mt-3 recipe-table">
<thead> <thead>
<tr> <tr>
<th scope="col">{{ $t("Meal_Plan") }}</th> <th scope="col">{{ $t("Meal_Plan") }}</th>
@@ -185,20 +231,36 @@
<td>{{ r.recipe_mealplan.name }}</td> <td>{{ r.recipe_mealplan.name }}</td>
<td>{{ r.recipe_mealplan.recipe_name }}</td> <td>{{ r.recipe_mealplan.recipe_name }}</td>
<td class="block-inline"> <td class="block-inline">
<b-form-input min="1" type="number" :debounce="300" :value="r.recipe_mealplan.servings" @input="updateServings($event, r.list_recipe)"></b-form-input> <b-form-input min="1" type="number" :debounce="300"
:value="r.recipe_mealplan.servings"
@input="updateServings($event, r.list_recipe)"></b-form-input>
</td> </td>
<td> <td>
<i class="btn text-primary far fa-eye fa-lg px-2 border-0" variant="link" :title="$t('view_recipe')" @click="editRecipeList($event, r)" /> <i class="text-primary far fa-eye fa-fw fa-lg"
</td> :title="$t('view_recipe')" @click="editRecipeList($event, r)"/>
<td> <i class="text-danger fas fa-trash fa-fw fa-lg mt-3"
<i class="btn text-danger fas fa-trash fa-lg px-2 border-0" variant="link" :title="$t('Delete')" @click="deleteRecipe($event, r.list_recipe)" /> :title="$t('Delete')" @click="deleteRecipe($event, r.list_recipe)"/>
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
</div>
</div>
</div>
</div>
</b-tab> </b-tab>
<!-- supermarkets tab --> <!-- supermarkets tab -->
<b-tab :title="$t('Supermarkets')"> <b-tab>
<template #title>
<i class="fas fa-store-alt fa-fw d-block d-md-none"></i>
<span class="d-none d-md-block">{{ $t('Supermarkets') }}</span>
</template>
<div class="container p-0">
<div class="row">
<div class="col col-md-12 p-0 p-lg-3">
<div role="tablist">
<!-- add to shopping form -->
<div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<!-- supermarkets column --> <!-- supermarkets column -->
<div class="col col-md-5"> <div class="col col-md-5">
@@ -219,7 +281,8 @@
}) })
" "
> >
<i class="btn fas fa-plus-circle fa-lg px-0" :class="new_supermarket.entrymode ? 'text-success' : 'text-primary'" /> <i class="btn fas fa-plus-circle fa-lg px-0"
:class="new_supermarket.entrymode ? 'text-success' : 'text-primary'"/>
</b-button> </b-button>
</h4> </h4>
</template> </template>
@@ -233,15 +296,21 @@
:header="new_supermarket.value ? new_supermarket.value : $t('SupermarketName')" :header="new_supermarket.value ? new_supermarket.value : $t('SupermarketName')"
> >
<b-input-group> <b-input-group>
<b-form-input type="text" class="form-control-append" :placeholder="$t('SupermarketName')" v-model="new_supermarket.value" /> <b-form-input type="text" class="form-control-append"
:placeholder="$t('SupermarketName')"
v-model="new_supermarket.value"/>
<b-input-group-append> <b-input-group-append>
<b-button class="input-group-append" variant="success" @click="addSupermarket"><i class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }} </b-button> <b-button class="input-group-append" variant="success"
@click="addSupermarket">
<i class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }}
</b-button>
</b-input-group-append> </b-input-group-append>
</b-input-group> </b-input-group>
</b-card> </b-card>
<b-card-body class="m-0 p-0"> <b-card-body class="m-0 p-0">
<b-card class="mt-1 p-0" v-for="s in supermarkets" v-bind:key="s.id"> <b-card class="mt-1 p-0" v-for="s in supermarkets"
v-bind:key="s.id">
<b-card-header class="p-2 border-0 pt-3"> <b-card-header class="p-2 border-0 pt-3">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
@@ -257,9 +326,12 @@
editSupermarket(s) editSupermarket(s)
" "
> >
<i class="btn fas fa-edit fa-lg px-0" :class="s.editmode ? 'text-success' : 'text-primary'" /> <i class="btn fas fa-edit fa-lg px-0"
:class="s.editmode ? 'text-success' : 'text-primary'"/>
</b-button> </b-button>
<b-button variant="link" class="p-0 m-0 float-right" @click="deleteSupermarket(s)"> <b-button variant="link"
class="p-0 m-0 float-right"
@click="deleteSupermarket(s)">
<i class="btn fas fa-trash fa-lg px-2 text-danger"/> <i class="btn fas fa-trash fa-lg px-2 text-danger"/>
</b-button> </b-button>
</h5> </h5>
@@ -267,7 +339,9 @@
</div> </div>
</b-card-header> </b-card-header>
<b-card-body class="m-0 p-0"> <b-card-body class="m-0 p-0">
<generic-pill :item_list="s.category_to_supermarket" label="category::name" color="info"></generic-pill> <generic-pill :item_list="s.category_to_supermarket"
label="category::name"
color="info"></generic-pill>
</b-card-body> </b-card-body>
</b-card> </b-card>
</b-card-body> </b-card-body>
@@ -286,7 +360,8 @@
new_supermarket.entrymode = false new_supermarket.entrymode = false
" "
> >
<i class="btn fas fa-plus-circle fa-lg px-0" :class="new_category.entrymode ? 'text-success' : 'text-primary'" /> <i class="btn fas fa-plus-circle fa-lg px-0"
:class="new_category.entrymode ? 'text-success' : 'text-primary'"/>
</b-button> </b-button>
</h4> </h4>
</template> </template>
@@ -300,15 +375,25 @@
:header="new_category.value ? new_category.value : $t('CategoryName')" :header="new_category.value ? new_category.value : $t('CategoryName')"
> >
<b-input-group> <b-input-group>
<b-form-input type="text" class="form-control-append" :placeholder="$t('CategoryName')" v-model="new_category.value" /> <b-form-input type="text" class="form-control-append"
:placeholder="$t('CategoryName')"
v-model="new_category.value"/>
<b-input-group-append> <b-input-group-append>
<b-button class="input-group-append" variant="success" @click="addCategory"><i class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }} </b-button> <b-button class="input-group-append" variant="success"
@click="addCategory"><i
class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }}
</b-button>
</b-input-group-append> </b-input-group-append>
</b-input-group> </b-input-group>
</b-card> </b-card>
<b-card-sub-title v-if="new_supermarket.editmode" class="pt-0 pb-3">{{ $t("CategoryInstruction") }} </b-card-sub-title> <b-card-sub-title v-if="new_supermarket.editmode" class="pt-0 pb-3">
<b-card v-if="new_supermarket.editmode && supermarketCategory.length === 0" class="m-0 p-0 font-weight-bold no-body" border-variant="success" v-bind:key="-1" /> {{ $t("CategoryInstruction") }}
</b-card-sub-title>
<b-card
v-if="new_supermarket.editmode && supermarketCategory.length === 0"
class="m-0 p-0 font-weight-bold no-body" border-variant="success"
v-bind:key="-1"/>
<draggable <draggable
class="list-group" class="list-group"
:list="supermarketCategory" :list="supermarketCategory"
@@ -319,7 +404,8 @@
@change="saveSupermarketCategoryOrder" @change="saveSupermarketCategoryOrder"
v-bind="{ animation: 200, disabled: !new_supermarket.editmode }" v-bind="{ animation: 200, disabled: !new_supermarket.editmode }"
> >
<transition-group type="transition" :name="!drag ? 'flip-list' : null"> <transition-group type="transition"
:name="!drag ? 'flip-list' : null">
<b-card <b-card
no-body no-body
v-hover v-hover
@@ -332,12 +418,17 @@
<b-card-header class="p-2 border-0"> <b-card-header class="p-2 border-0">
<div class="row"> <div class="row">
<div class="col-2" v-if="new_supermarket.editmode"> <div class="col-2" v-if="new_supermarket.editmode">
<button type="button" class="btn btn-lg shadow-none"><i class="fas fa-arrows-alt-v"></i></button> <button type="button"
class="btn btn-lg shadow-none"><i
class="fas fa-arrows-alt-v"></i></button>
</div> </div>
<div :class="new_supermarket.editmode ? 'col-10' : 'col-12'"> <div
:class="new_supermarket.editmode ? 'col-10' : 'col-12'">
<h5 class="mt-1 mb-1"> <h5 class="mt-1 mb-1">
{{ categoryName(c) }} {{ categoryName(c) }}
<b-button variant="link" class="p-0 m-0 float-right" @click="deleteCategory(c)"> <b-button variant="link"
class="p-0 m-0 float-right"
@click="deleteCategory(c)">
<i class="btn fas fa-trash fa-lg px-2 text-danger"/> <i class="btn fas fa-trash fa-lg px-2 text-danger"/>
</b-button> </b-button>
</h5> </h5>
@@ -347,8 +438,12 @@
</b-card> </b-card>
</transition-group> </transition-group>
</draggable> </draggable>
<hr style="height: 2px; background-color: black" v-if="new_supermarket.editmode" /> <hr style="height: 2px; background-color: black"
<b-card v-if="new_supermarket.editmode && notSupermarketCategory.length === 0" v-bind:key="-2" class="m-0 p-0 font-weight-bold no-body" border-variant="danger" /> v-if="new_supermarket.editmode"/>
<b-card
v-if="new_supermarket.editmode && notSupermarketCategory.length === 0"
v-bind:key="-2" class="m-0 p-0 font-weight-bold no-body"
border-variant="danger"/>
<draggable <draggable
class="list-group" class="list-group"
:list="notSupermarketCategory" :list="notSupermarketCategory"
@@ -359,17 +454,26 @@
v-if="new_supermarket.editmode" v-if="new_supermarket.editmode"
v-bind="{ animation: 200 }" v-bind="{ animation: 200 }"
> >
<transition-group type="transition" :name="!drag ? 'flip-list' : null"> <transition-group type="transition"
<b-card no-body v-hover class="mt-1 list-group-item p-2" style="cursor: move" v-for="c in notSupermarketCategory" v-bind:key="c.id" :border-variant="'danger'"> :name="!drag ? 'flip-list' : null">
<b-card no-body v-hover class="mt-1 list-group-item p-2"
style="cursor: move"
v-for="c in notSupermarketCategory" v-bind:key="c.id"
:border-variant="'danger'">
<b-card-header class="p-2 border-0"> <b-card-header class="p-2 border-0">
<div class="row"> <div class="row">
<div class="col-2" v-if="new_supermarket.editmode"> <div class="col-2" v-if="new_supermarket.editmode">
<button type="button" class="btn btn-lg shadow-none"><i class="fas fa-arrows-alt-v"></i></button> <button type="button"
class="btn btn-lg shadow-none"><i
class="fas fa-arrows-alt-v"></i></button>
</div> </div>
<div :class="new_supermarket.editmode ? 'col-10' : 'col-12'"> <div
:class="new_supermarket.editmode ? 'col-10' : 'col-12'">
<h5 class="mt-1 mb-1"> <h5 class="mt-1 mb-1">
{{ categoryName(c) }} {{ categoryName(c) }}
<b-button variant="link" class="p-0 m-0 float-right" @click="deleteCategory(c)"> <b-button variant="link"
class="p-0 m-0 float-right"
@click="deleteCategory(c)">
<i class="btn fas fa-trash fa-lg px-2 text-primary"/> <i class="btn fas fa-trash fa-lg px-2 text-primary"/>
</b-button> </b-button>
</h5> </h5>
@@ -382,16 +486,26 @@
</b-card> </b-card>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</b-tab> </b-tab>
<!-- settings tab --> <!-- settings tab -->
<b-tab :title="$t('Settings')"> <b-tab>
<template #title>
<i class="fas fa-user-cog fa-fw d-block d-md-none"></i>
<span class="d-none d-md-block">{{ $t('Settings') }}</span>
</template>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 col-md-8"> <div class="col-12 col-md-8">
<b-card class="no-body"> <b-card class="no-body">
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("mealplan_autoadd_shopping") }}</div> <div class="col col-md-6">{{ $t("mealplan_autoadd_shopping") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoadd_shopping" @change="saveSettings" /> <input type="checkbox" class="form-control settings-checkbox"
v-model="settings.mealplan_autoadd_shopping" @change="saveSettings"/>
</div> </div>
</div> </div>
<div class="row sm mb-3"> <div class="row sm mb-3">
@@ -403,7 +517,8 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("mealplan_autoexclude_onhand") }}</div> <div class="col col-md-6">{{ $t("mealplan_autoexclude_onhand") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoexclude_onhand" @change="saveSettings" /> <input type="checkbox" class="form-control settings-checkbox"
v-model="settings.mealplan_autoexclude_onhand" @change="saveSettings"/>
</div> </div>
</div> </div>
<div class="row sm mb-3"> <div class="row sm mb-3">
@@ -416,7 +531,8 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("mealplan_autoinclude_related") }}</div> <div class="col col-md-6">{{ $t("mealplan_autoinclude_related") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoinclude_related" @change="saveSettings" /> <input type="checkbox" class="form-control settings-checkbox"
v-model="settings.mealplan_autoinclude_related" @change="saveSettings"/>
</div> </div>
</div> </div>
<div class="row sm mb-3"> <div class="row sm mb-3">
@@ -453,7 +569,8 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("shopping_auto_sync") }}</div> <div class="col col-md-6">{{ $t("shopping_auto_sync") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="number" class="form-control" v-model="settings.shopping_auto_sync" @change="saveSettings" /> <input type="number" class="form-control" v-model="settings.shopping_auto_sync"
@change="saveSettings"/>
</div> </div>
</div> </div>
<div class="row sm mb-3"> <div class="row sm mb-3">
@@ -466,7 +583,8 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("shopping_add_onhand") }}</div> <div class="col col-md-6">{{ $t("shopping_add_onhand") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="checkbox" class="form-control settings-checkbox" v-model="settings.shopping_add_onhand" @change="saveSettings" /> <input type="checkbox" class="form-control settings-checkbox"
v-model="settings.shopping_add_onhand" @change="saveSettings"/>
</div> </div>
</div> </div>
<div class="row sm mb-3"> <div class="row sm mb-3">
@@ -479,7 +597,8 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("shopping_recent_days") }}</div> <div class="col col-md-6">{{ $t("shopping_recent_days") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="number" class="form-control" v-model="settings.shopping_recent_days" @change="saveSettings" /> <input type="number" class="form-control" v-model="settings.shopping_recent_days"
@change="saveSettings"/>
</div> </div>
</div> </div>
<div class="row sm mb-3"> <div class="row sm mb-3">
@@ -492,7 +611,8 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("filter_to_supermarket") }}</div> <div class="col col-md-6">{{ $t("filter_to_supermarket") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="checkbox" class="form-control settings-checkbox" v-model="settings.filter_to_supermarket" @change="saveSettings" /> <input type="checkbox" class="form-control settings-checkbox"
v-model="settings.filter_to_supermarket" @change="saveSettings"/>
</div> </div>
</div> </div>
<div class="row sm mb-3"> <div class="row sm mb-3">
@@ -505,7 +625,8 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("default_delay") }}</div> <div class="col col-md-6">{{ $t("default_delay") }}</div>
<div class="col col-md-6 text-right"> <div class="col col-md-6 text-right">
<input type="number" class="form-control" min="1" v-model="settings.default_delay" @change="saveSettings" /> <input type="number" class="form-control" min="1" v-model="settings.default_delay"
@change="saveSettings"/>
</div> </div>
</div> </div>
<div class="row sm mb-3"> <div class="row sm mb-3">
@@ -544,7 +665,8 @@
<div class="row"> <div class="row">
<div class="col col-md-6">{{ $t("left_handed") }}</div> <div class="col col-md-6">{{ $t("left_handed") }}</div>
<div class="col col-md-6"> <div class="col col-md-6">
<input type="checkbox" class="form-control settings-checkbox" v-model="settings.left_handed" @change="saveSettings" /> <input type="checkbox" class="form-control settings-checkbox"
v-model="settings.left_handed" @change="saveSettings"/>
</div> </div>
</div> </div>
<div class="row sm mb-3"> <div class="row sm mb-3">
@@ -561,9 +683,10 @@
</b-tabs> </b-tabs>
<transition name="slided-fade"> <transition name="slided-fade">
<div class="row fixed-bottom p-2 b-1 border-top text-center d-flex d-md-none" style="background: rgba(255, 255, 255, 0.6)" v-if="current_tab === 0"> <div class="row fixed-bottom p-2 b-1 border-top text-center d-flex d-md-none"
style="background: rgba(255, 255, 255, 0.6);width: 105%;" v-if="current_tab === 0">
<div class="col-6"> <div class="col-6">
<a class="btn btn-block btn-success shadow-none" @click="entrymode = !entrymode" <a class="btn btn-block btn-success shadow-none" @click="entrymode = !entrymode; "
><i class="fas fa-cart-plus"></i> ><i class="fas fa-cart-plus"></i>
{{ $t("New Entry") }} {{ $t("New Entry") }}
</a> </a>
@@ -571,10 +694,14 @@
<div class="col-6"> <div class="col-6">
<b-dropdown id="dropdown-dropup" block dropup variant="primary" class="shadow-none"> <b-dropdown id="dropdown-dropup" block dropup variant="primary" class="shadow-none">
<template #button-content><i class="fas fa-download"></i> {{ $t("Export") }}</template> <template #button-content><i class="fas fa-download"></i> {{ $t("Export") }}</template>
<DownloadPDF dom="#shoppinglist" name="shopping.pdf" :label="$t('download_pdf')" icon="far fa-file-pdf" /> <DownloadPDF dom="#shoppinglist" name="shopping.pdf" :label="$t('download_pdf')"
<DownloadCSV :items="csvData" :delim="settings.csv_delim" name="shopping.csv" :label="$t('download_csv')" icon="fas fa-file-csv" /> icon="far fa-file-pdf"/>
<CopyToClipboard :items="csvData" :settings="settings" :label="$t('copy_to_clipboard')" icon="fas fa-clipboard-list" /> <DownloadCSV :items="csvData" :delim="settings.csv_delim" name="shopping.csv"
<CopyToClipboard :items="csvData" :settings="settings" format="table" :label="$t('copy_markdown_table')" icon="fab fa-markdown" /> :label="$t('download_csv')" icon="fas fa-file-csv"/>
<CopyToClipboard :items="csvData" :settings="settings" :label="$t('copy_to_clipboard')"
icon="fas fa-clipboard-list"/>
<CopyToClipboard :items="csvData" :settings="settings" format="table"
:label="$t('copy_markdown_table')" icon="fab fa-markdown"/>
</b-dropdown> </b-dropdown>
</div> </div>
</div> </div>
@@ -585,23 +712,32 @@
<b-form-select v-model="group_by" :options="group_by_choices" size="sm"></b-form-select> <b-form-select v-model="group_by" :options="group_by_choices" size="sm"></b-form-select>
</b-form-group> </b-form-group>
<b-form-group v-bind:label="$t('Supermarket')" label-for="popover-input-2" label-cols="6" class="mb-1"> <b-form-group v-bind:label="$t('Supermarket')" label-for="popover-input-2" label-cols="6" class="mb-1">
<b-form-select v-model="ui.selected_supermarket" :options="supermarkets" text-field="name" value-field="id" size="sm"></b-form-select> <b-form-select v-model="ui.selected_supermarket" :options="supermarkets" text-field="name"
value-field="id" size="sm"></b-form-select>
</b-form-group> </b-form-group>
<!-- TODO: shade filters red when they are actually filtering content --> <!-- TODO: shade filters red when they are actually filtering content -->
<b-form-group v-bind:label="$t('ShowDelayed')" label-for="popover-input-3" content-cols="1" class="mb-1"> <b-form-group v-bind:label="$t('ShowDelayed')" label-for="popover-input-3" content-cols="1"
class="mb-1">
<b-form-checkbox v-model="show_delay"></b-form-checkbox> <b-form-checkbox v-model="show_delay"></b-form-checkbox>
</b-form-group> </b-form-group>
<b-form-group v-bind:label="$t('ShowUncategorizedFood')" label-for="popover-input-4" content-cols="1" class="mb-1" v-if="!ui.selected_supermarket"> <b-form-group v-bind:label="$t('ShowUncategorizedFood')" label-for="popover-input-4" content-cols="1"
class="mb-1" v-if="!ui.selected_supermarket">
<b-form-checkbox v-model="show_undefined_categories"></b-form-checkbox> <b-form-checkbox v-model="show_undefined_categories"></b-form-checkbox>
</b-form-group> </b-form-group>
<b-form-group v-bind:label="$t('SupermarketCategoriesOnly')" label-for="popover-input-5" content-cols="1" class="mb-1" v-if="ui.selected_supermarket"> <b-form-group v-bind:label="$t('SupermarketCategoriesOnly')" label-for="popover-input-5"
content-cols="1" class="mb-1" v-if="ui.selected_supermarket">
<b-form-checkbox v-model="supermarket_categories_only"></b-form-checkbox> <b-form-checkbox v-model="supermarket_categories_only"></b-form-checkbox>
</b-form-group> </b-form-group>
</div> </div>
<div class="row" style="margin-top: 1vh; min-width: 300px"> <div class="row" style="margin-top: 1vh; min-width: 300px">
<div class="col-12" style="text-align: right"> <div class="col-12" style="text-align: right">
<b-button size="sm" variant="primary" class="mx-1" @click="resetFilters">{{ $t("Reset") }}</b-button> <b-button size="sm" variant="primary" class="mx-1" @click="resetFilters">{{
<b-button size="sm" variant="secondary" class="mr-3" @click="$root.$emit('bv::hide::popover')">{{ $t("Close") }} </b-button> $t("Reset")
}}
</b-button>
<b-button size="sm" variant="secondary" class="mr-3" @click="$root.$emit('bv::hide::popover')">
{{ $t("Close") }}
</b-button>
</div> </div>
</div> </div>
</b-popover> </b-popover>
@@ -610,7 +746,8 @@
<ContextMenuItem> <ContextMenuItem>
<b-input-group> <b-input-group>
<template #prepend> <template #prepend>
<span class="dropdown-item p-2 text-decoration-none" style="user-select: none !important"><i class="fas fa-cubes"></i> {{ $t("MoveCategory") }}</span> <span class="dropdown-item p-2 text-decoration-none" style="user-select: none !important"><i
class="fas fa-cubes"></i> {{ $t("MoveCategory") }}</span>
</template> </template>
<b-form-select <b-form-select
class="form-control mt-1 mr-1" class="form-control mt-1 mr-1"
@@ -639,7 +776,8 @@
delayThis(contextData) delayThis(contextData)
" "
> >
<a class="dropdown-item p-2" href="#"><i class="fas fa-hourglass"></i> {{ $t("DelayFor", { hours: delay }) }}</a> <a class="dropdown-item p-2" href="#"><i class="fas fa-hourglass"></i>
{{ $t("DelayFor", {hours: delay}) }}</a>
</ContextMenuItem> </ContextMenuItem>
<ContextMenuItem <ContextMenuItem
@click=" @click="
@@ -655,11 +793,14 @@
deleteThis(contextData) deleteThis(contextData)
" "
> >
<a class="dropdown-item p-2 text-danger" href="#"><i class="fas fa-trash"></i> {{ $t("Delete") }}</a> <a class="dropdown-item p-2 text-danger" href="#"><i class="fas fa-trash"></i> {{
$t("Delete")
}}</a>
</ContextMenuItem> </ContextMenuItem>
</template> </template>
</ContextMenu> </ContextMenu>
<shopping-modal v-if="new_recipe.id" :recipe="new_recipe" :servings="parseInt(add_recipe_servings)" :modal_id="new_recipe.id" @finish="finishShopping" :list_recipe="new_recipe.list_recipe" /> <shopping-modal v-if="new_recipe.id" :recipe="new_recipe" :servings="parseInt(add_recipe_servings)"
:modal_id="new_recipe.id" @finish="finishShopping" :list_recipe="new_recipe.list_recipe"/>
</div> </div>
</template> </template>
@@ -753,6 +894,7 @@ export default {
id: undefined, id: undefined,
}, },
add_recipe_servings: 1, add_recipe_servings: 1,
shopping_list_height: '60vh'
} }
}, },
computed: { computed: {
@@ -881,7 +1023,13 @@ export default {
}, },
deep: true, deep: true,
}, },
entrymode: {
handler() {
if (this.entrymode) {
document.getElementById('shoppinglist').scrollTop = 0
}
}
},
new_recipe: { new_recipe: {
handler() { handler() {
this.add_recipe_servings = this.new_recipe.servings this.add_recipe_servings = this.new_recipe.servings
@@ -1187,7 +1335,8 @@ export default {
}) })
.then((entries) => { .then((entries) => {
entries.forEach((x) => { entries.forEach((x) => {
api.destroyShoppingListEntry(x).then((result) => {}) api.destroyShoppingListEntry(x).then((result) => {
})
}) })
}) })
}, },
@@ -1417,13 +1566,21 @@ export default {
this.getShoppingList() this.getShoppingList()
}, },
editRecipeList(e, r) { editRecipeList(e, r) {
this.new_recipe = { id: r.recipe_mealplan.recipe, name: r.recipe_mealplan.recipe_name, servings: r.recipe_mealplan.servings, list_recipe: r.list_recipe } this.new_recipe = {
id: r.recipe_mealplan.recipe,
name: r.recipe_mealplan.recipe_name,
servings: r.recipe_mealplan.servings,
list_recipe: r.list_recipe
}
this.$nextTick(function () { this.$nextTick(function () {
this.$bvModal.show(`shopping_${this.new_recipe.id}`) this.$bvModal.show(`shopping_${this.new_recipe.id}`)
}) })
// this.$bvModal.show(`shopping_${this.new_recipe.id}`) // this.$bvModal.show(`shopping_${this.new_recipe.id}`)
}, },
handleResize: function () {
this.shoppinglist_height = document.body.clientHeight - 115
},
}, },
directives: { directives: {
hover: { hover: {
@@ -1476,7 +1633,8 @@ export default {
} }
.slide-fade-enter, .slide-fade-leave-to .slide-fade-enter, .slide-fade-leave-to
/* .slider-fade-leave-active below version 2.1.8 */ { /* .slider-fade-leave-active below version 2.1.8 */
{
transform: translateX(10px); transform: translateX(10px);
opacity: 0; opacity: 0;
} }
@@ -1485,30 +1643,43 @@ export default {
font-size: 20px; font-size: 20px;
} }
@media screen and (max-width: 768px) {
#shoppinglist { #shoppinglist {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
height: 60vh; /* TODO use proper fill height here to not render list underneath bottom buttons */ height: calc(100% - 170px);
padding-right: 8px !important;
} }
#id_base_container {
padding-right: 5px;
padding-left: 5px;
} }
@media screen and (min-height: 700px) and (max-width: 768px) {
@media (min-width: 768px) {
#shoppinglist { #shoppinglist {
display: flex; overflow-y: auto;
flex-direction: column; overflow-x: auto;
flex-grow: 1; height: auto;
overflow-y: scroll; margin: auto;
overflow-x: hidden; }
height: 72vh;
padding-right: 8px !important; #id_base_container {
padding-right: 15px;
padding-left: 15px;
} }
} }
.settings-checkbox { .settings-checkbox {
font-size: 0.3rem; font-size: 0.3rem;
} }
@media (max-width: 767.9px) {
.recipe-table {
font-size: 14px;
}
}
</style> </style>

6
vue/src/components/MealPlanCard.vue
View File

@@ -127,4 +127,10 @@ export default {
.meal-plan-card { .meal-plan-card {
background-color: #fff; background-color: #fff;
} }
@media (max-width: 767.9px) {
.meal-plan-card {
font-size: 13px;
}
}
</style> </style>

162
vue/src/components/ShoppingLineItem.vue
View File

@@ -1,34 +1,43 @@
<template> <template>
<div id="shopping_line_item"> <div id="shopping_line_item" class="pt-1">
<b-row align-h="start"> <b-row align-h="start" v-touch:start="startHandler" v-touch:moving="moveHandler" v-touch:end="endHandler"
<b-col cols="2" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0" v-if="settings.left_handed"> ref="shopping_line_item" class="invis-border">
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" /> <b-col cols="2" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0"
<b-button size="sm" @click="showDetails = !showDetails" class="d-inline-block d-md-none p-0" variant="link"> v-if="settings.left_handed">
<div class="text-nowrap"><i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i></div> <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile"
:checked="formatChecked" @change="updateChecked" :key="entries[0].id"/>
<b-button size="sm" @click="showDetails = !showDetails" class="d-inline-block d-md-none p-0"
variant="link">
<div class="text-nowrap"><i class="fa fa-chevron-right rotate"
:class="showDetails ? 'rotated' : ''"></i></div>
</b-button> </b-button>
</b-col> </b-col>
<b-col cols="1" class="align-items-center d-flex"> <b-col cols="1" class="align-items-center d-flex">
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true" @click.stop="$emit('open-context-menu', $event, entries)"> <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"
@click.stop="$emit('open-context-menu', $event, entries)">
<button <button
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false" aria-expanded="false"
type="button" type="button"
:class="settings.left_handed ? 'dropdown-spacing' : ''" :class="settings.left_handed ? 'dropdown-spacing' : ''"
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-0 pl-1 dropdown-toggle-no-caret" class="btn dropdown-toggle btn-link text-decoration-none text-body pr-0 pl-1 dropdown-toggle-no-caret">
>
<i class="fas fa-ellipsis-v"></i> <i class="fas fa-ellipsis-v"></i>
</button> </button>
</div> </div>
</b-col> </b-col>
<b-col cols="1" class="px-1 justify-content-center align-items-center d-none d-md-flex"> <b-col cols="1" class="px-1 justify-content-center align-items-center d-none d-md-flex">
<input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" /> <input type="checkbox" class="form-control form-control-sm checkbox-control"
:checked="formatChecked" @change="updateChecked" :key="entries[0].id"/>
</b-col> </b-col>
<b-col cols="8"> <b-col cols="8">
<b-row class="d-flex h-100"> <b-row class="d-flex h-100">
<b-col cols="6" md="3" class="d-flex align-items-center" v-if="Object.entries(formatAmount).length == 1"> <b-col cols="6" md="3" class="d-flex align-items-center"
<strong class="mr-1">{{ Object.entries(formatAmount)[0][1] }}</strong> {{ Object.entries(formatAmount)[0][0] }} v-if="Object.entries(formatAmount).length == 1">
<strong class="mr-1">{{ Object.entries(formatAmount)[0][1] }}</strong>
{{ Object.entries(formatAmount)[0][0] }}
</b-col> </b-col>
<b-col cols="6" md="3" class="d-flex flex-column" v-if="Object.entries(formatAmount).length != 1"> <b-col cols="6" md="3" class="d-flex flex-column"
v-if="Object.entries(formatAmount).length != 1">
<div class="small" v-for="(x, i) in Object.entries(formatAmount)" :key="i"> <div class="small" v-for="(x, i) in Object.entries(formatAmount)" :key="i">
{{ x[1] }} &ensp; {{ x[1] }} &ensp;
{{ x[0] }} {{ x[0] }}
@@ -38,20 +47,27 @@
<b-col cols="6" md="6" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2"> <b-col cols="6" md="6" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
{{ formatFood }} {{ formatFood }}
</b-col> </b-col>
<b-col cols="3" data-html2canvas-ignore="true" class="align-items-center d-none d-md-flex justify-content-end"> <b-col cols="3" data-html2canvas-ignore="true"
<b-button size="sm" @click="showDetails = !showDetails" class="p-0 mr-0 mr-md-2 p-md-2 text-decoration-none" variant="link"> class="align-items-center d-none d-md-flex justify-content-end">
<b-button size="sm" @click="showDetails = !showDetails"
class="p-0 mr-0 mr-md-2 p-md-2 text-decoration-none" variant="link">
<div class="text-nowrap"> <div class="text-nowrap">
<i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i> <span class="d-none d-md-inline-block">{{ $t("Details") }}</span> <i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i>
<span class="d-none d-md-inline-block">{{ $t("Details") }}</span>
</div> </div>
</b-button> </b-button>
</b-col> </b-col>
</b-row> </b-row>
</b-col> </b-col>
<b-col cols="2" class="justify-content-start align-items-center d-flex d-md-none pl-0 pr-0" v-if="!settings.left_handed"> <b-col cols="2" class="justify-content-start align-items-center d-flex d-md-none pl-0 pr-0"
<b-button size="sm" @click="showDetails = !showDetails" class="d-inline-block d-md-none p-0" variant="link"> v-if="!settings.left_handed">
<div class="text-nowrap"><i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i></div> <b-button size="sm" @click="showDetails = !showDetails" class="d-inline-block d-md-none p-0"
variant="link">
<div class="text-nowrap"><i class="fa fa-chevron-right rotate"
:class="showDetails ? 'rotated' : ''"></i></div>
</b-button> </b-button>
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" /> <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile"
:checked="formatChecked" @change="updateChecked" :key="entries[0].id"/>
</b-col> </b-col>
</b-row> </b-row>
<b-row align-h="center" class="d-none d-md-flex"> <b-row align-h="center" class="d-none d-md-flex">
@@ -83,11 +99,14 @@
</b-col> </b-col>
</b-row> </b-row>
<b-row align-h="start"> <b-row align-h="start">
<b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0" v-if="settings.left_handed"> <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0"
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" /> v-if="settings.left_handed">
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile"
:checked="formatChecked" @change="updateChecked" :key="entries[0].id"/>
</b-col> </b-col>
<b-col cols="2" md="1" class="align-items-center d-flex"> <b-col cols="2" md="1" class="align-items-center d-flex">
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true" @click.stop="$emit('open-context-menu', $event, e)"> <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"
@click.stop="$emit('open-context-menu', $event, e)">
<button <button
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false" aria-expanded="false"
@@ -100,7 +119,8 @@
</div> </div>
</b-col> </b-col>
<b-col cols="1" class="justify-content-center align-items-center d-none d-md-flex"> <b-col cols="1" class="justify-content-center align-items-center d-none d-md-flex">
<input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" /> <input type="checkbox" class="form-control form-control-sm checkbox-control"
:checked="formatChecked" @change="updateChecked" :key="entries[0].id"/>
</b-col> </b-col>
<b-col cols="7" md="9"> <b-col cols="7" md="9">
<b-row class="d-flex align-items-center h-100"> <b-row class="d-flex align-items-center h-100">
@@ -111,16 +131,20 @@
{{ formatOneFood(e) }} {{ formatOneFood(e) }}
</b-col> </b-col>
<b-col cols="12" class="d-flex d-md-none"> <b-col cols="12" class="d-flex d-md-none">
<div class="small text-muted text-truncate" v-for="(n, i) in formatOneNote(e)" :key="i">{{ n }}</div> <div class="small text-muted text-truncate" v-for="(n, i) in formatOneNote(e)"
:key="i">{{ n }}
</div>
</b-col> </b-col>
</b-row> </b-row>
</b-col> </b-col>
<b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none" v-if="!settings.left_handed"> <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none"
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" /> v-if="!settings.left_handed">
<input type="checkbox" class="form-control form-control-sm checkbox-control-mobile"
:checked="formatChecked" @change="updateChecked" :key="entries[0].id"/>
</b-col> </b-col>
</b-row> </b-row>
<hr class="w-75" v-if="x !== entries.length - 1" /> <hr class="w-75 mt-1 mb-1 mt-md-3 mb-md-3" v-if="x !== entries.length - 1"/>
<div class="pb-4" v-if="x === entries.length - 1"></div> <div class="pb-1 pb-md-4" v-if="x === entries.length - 1"></div>
</div> </div>
</div> </div>
<hr class="m-1" v-if="!showDetails"/> <hr class="m-1" v-if="!showDetails"/>
@@ -132,7 +156,8 @@
<ContextMenuItem @click="$refs.menu.close()"> <ContextMenuItem @click="$refs.menu.close()">
<b-form-group label-cols="9" content-cols="3" class="text-nowrap m-0 mr-2"> <b-form-group label-cols="9" content-cols="3" class="text-nowrap m-0 mr-2">
<template #label> <template #label>
<a class="dropdown-item p-2" href="#"><i class="fas fa-pizza-slice"></i> {{ $t("Servings") }}</a> <a class="dropdown-item p-2" href="#"><i class="fas fa-pizza-slice"></i>
{{ $t("Servings") }}</a>
</template> </template>
<div @click.prevent.stop> <div @click.prevent.stop>
<b-form-input class="mt-2" min="0" type="number" v-model="servings"></b-form-input> <b-form-input class="mt-2" min="0" type="number" v-model="servings"></b-form-input>
@@ -141,6 +166,9 @@
</ContextMenuItem> </ContextMenuItem>
</template> </template>
</ContextMenu> </ContextMenu>
<i class="fa fa-hourglass fa-lg" style="display: none; position: absolute" aria-hidden="true"
ref="delay_icon"></i>
<i class="fa fa-check fa-lg" style="display: none; position: absolute" aria-hidden="true" ref="check_icon"></i>
</div> </div>
</template> </template>
@@ -152,8 +180,10 @@ import ContextMenu from "@/components/ContextMenu/ContextMenu"
import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem" import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem"
import {ApiMixin} from "@/utils/utils" import {ApiMixin} from "@/utils/utils"
import RecipeCard from "./RecipeCard.vue" import RecipeCard from "./RecipeCard.vue"
import Vue2TouchEvents from "vue2-touch-events"
Vue.use(BootstrapVue) Vue.use(BootstrapVue)
Vue.use(Vue2TouchEvents)
export default { export default {
// TODO ApiGenerator doesn't capture and share error information - would be nice to share error details when available // TODO ApiGenerator doesn't capture and share error information - would be nice to share error details when available
@@ -173,6 +203,8 @@ export default {
showDetails: false, showDetails: false,
recipe: undefined, recipe: undefined,
servings: 1, servings: 1,
dragStartX: 0,
distance_left: 0
} }
}, },
computed: { computed: {
@@ -249,6 +281,71 @@ export default {
timeStyle: "short", timeStyle: "short",
}).format(Date.parse(datetime)) }).format(Date.parse(datetime))
}, },
startHandler: function (event) {
if (event.changedTouches.length > 0) {
this.dragStartX = event.changedTouches[0].clientX
}
},
getOffset(el) {
let rect = el.getBoundingClientRect();
return {
left: rect.left + window.scrollX,
top: rect.top + window.scrollY,
right: rect.right - window.scrollX,
};
},
moveHandler: function (event) {
let item = this.$refs['shopping_line_item'];
this.distance_left = event.changedTouches[0].clientX - this.dragStartX;
item.style.marginLeft = this.distance_left
item.style.marginRight = -this.distance_left
item.style.backgroundColor = '#ddbf86'
item.style.border = "1px solid #000"
let delay_icon = this.$refs['delay_icon']
let check_icon = this.$refs['check_icon']
let color_factor = Math.abs(this.distance_left) / 100
if (this.distance_left > 0) {
item.parentElement.parentElement.style.backgroundColor = 'rgba(130,170,139,0)'.replace(/[^,]+(?=\))/, color_factor)
check_icon.style.display = "block"
check_icon.style.left = this.getOffset(item.parentElement.parentElement).left + 40
check_icon.style.top = this.getOffset(item.parentElement.parentElement).top - 92
check_icon.style.opacity = color_factor - 0.3
} else {
item.parentElement.parentElement.style.backgroundColor = 'rgba(185,135,102,0)'.replace(/[^,]+(?=\))/, color_factor)
delay_icon.style.display = "block"
console.log(item.parentElement.parentElement.clientWidth)
delay_icon.style.left = this.getOffset(item.parentElement.parentElement).right - 40
delay_icon.style.top = this.getOffset(item.parentElement.parentElement).top - 92
delay_icon.style.opacity = color_factor - 0.3
}
},
endHandler: function (event) {
let item = this.$refs['shopping_line_item'];
item.removeAttribute('style');
item.parentElement.parentElement.removeAttribute('style');
let delay_icon = this.$refs['delay_icon']
let check_icon = this.$refs['check_icon']
delay_icon.style.display = "none"
check_icon.style.display = "none"
if (Math.abs(this.distance_left) > window.screen.width / 6) {
if (this.distance_left > 0) {
let checked = false;
this.entries.forEach((cur) => {
checked = cur.checked
})
let update = {entries: this.entries.map((x) => x.id), checked: !checked}
this.$emit("update-checkbox", update)
} else {
this.$emit("update-delaythis", this.entries)
}
}
},
formatOneAmount: function (item) { formatOneAmount: function (item) {
return item?.amount ?? 1 return item?.amount ?? 1
}, },
@@ -303,6 +400,7 @@ export default {
} else { } else {
update = {entries: [item], checked: !item.checked} update = {entries: [item], checked: !item.checked}
} }
console.log(update)
this.$emit("update-checkbox", update) this.$emit("update-checkbox", update)
}, },
}, },
@@ -351,4 +449,8 @@ export default {
padding-right: 0 !important; padding-right: 0 !important;
} }
} }
.invis-border {
border: 1px solid transparent;
}
</style> </style>