cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP meal plan and icon stuff

Browse Source
This commit is contained in:
vabene1111
2023-08-29 14:36:57 +02:00
parent ce84b3b385
commit 7f62ec28e3
5 changed files with 103 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -124,31 +124,6 @@
</b-tab>
<b-tab :title="$t('Settings')">
<div class="row mt-3">
<div class="col-12 col-md-3 calender-options">
<h5>{{ $t("Planner_Settings") }}</h5>
<b-form>
<b-form-group id="UomInput" :label="$t('Period')" :description="$t('Plan_Period_To_Show')"
label-for="UomInput">
<b-form-select id="UomInput" v-model="settings.displayPeriodUom"
:options="options.displayPeriodUom"></b-form-select>
</b-form-group>
<b-form-group id="PeriodInput" :label="$t('Periods')"
:description="$t('Plan_Show_How_Many_Periods')" label-for="PeriodInput">
<b-form-select id="PeriodInput" v-model="settings.displayPeriodCount"
:options="options.displayPeriodCount"></b-form-select>
</b-form-group>
<b-form-group id="DaysInput" :label="$t('Starting_Day')" :description="$t('Starting_Day')"
label-for="DaysInput">
<b-form-select id="DaysInput" v-model="settings.startingDayOfWeek"
:options="dayNames"></b-form-select>
</b-form-group>
<b-form-group id="WeekNumInput" :label="$t('Week_Numbers')">
<b-form-checkbox v-model="settings.displayWeekNumbers" name="week_num">
{{ $t("Show_Week_Numbers") }}
</b-form-checkbox>
</b-form-group>
</b-form>
</div>
<div class="col-12 col-md-9 col-lg-6">
<h5>{{ $t("Meal_Types") }}</h5>
<div>
@ -418,16 +393,6 @@ export default {
detailed_items: function () {
return this.settings.displayPeriodUom === "week"
},
dayNames: function () {
let options = []
this.getFormattedWeekdayNames(this.userLocale, "long", 0).forEach((day, index) => {
options.push({text: day, value: index})
})
return options
},
userLocale: function () {
return this.getDefaultBrowserLocale
},
item_height: function () {
if (this.settings.displayPeriodUom === "week") {
return "10rem"

45
vue/src/components/Settings/MealPlanSettingsComponent.vue
View File

@ -11,6 +11,29 @@
:placeholder="$t('User')"
></generic-multiselect>
</b-form-group>
<b-form v-if="meal_plan_store">
<b-form-group id="UomInput" :label="$t('Period')" :description="$t('Plan_Period_To_Show')"
label-for="UomInput">
<b-form-select id="UomInput" v-model="meal_plan_store.client_settings.displayPeriodUom"
:options="calendar_options.displayPeriodUom"></b-form-select>
</b-form-group>
<b-form-group id="PeriodInput" :label="$t('Periods')"
:description="$t('Plan_Show_How_Many_Periods')" label-for="PeriodInput">
<b-form-select id="PeriodInput" v-model="meal_plan_store.client_settings.displayPeriodCount"
:options="calendar_options.displayPeriodCount"></b-form-select>
</b-form-group>
<b-form-group id="DaysInput" :label="$t('Starting_Day')" :description="$t('Starting_Day')"
label-for="DaysInput">
<b-form-select id="DaysInput" v-model="meal_plan_store.client_settings.startingDayOfWeek"
:options="dayNames()"></b-form-select>
</b-form-group>
<b-form-group id="WeekNumInput" :label="$t('Week_Numbers')">
<b-form-checkbox v-model="meal_plan_store.client_settings.displayWeekNumbers" name="week_num">
{{ $t("Show_Week_Numbers") }}
</b-form-checkbox>
</b-form-group>
</b-form>
</div>
</template>
@ -20,6 +43,8 @@ import {ApiMixin, StandardToasts} from "@/utils/utils";
import axios from "axios";
import GenericMultiselect from "@/components/GenericMultiselect";
import {useMealPlanStore} from "@/stores/MealPlanStore";
import {CalendarMathMixin} from "vue-simple-calendar/src/components/bundle";
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
@ -28,7 +53,7 @@ let SETTINGS_COOKIE_NAME = "mealplan_settings"
export default {
name: "MealPlanSettingsComponent",
mixins: [ApiMixin],
mixins: [ApiMixin, CalendarMathMixin],
components: {GenericMultiselect},
props: {
user_id: Number,
@ -37,12 +62,23 @@ export default {
return {
user_preferences: undefined,
languages: [],
meal_plan_store: undefined,
calendar_options: {
displayPeriodUom: [
{text: this.$t("Week"), value: "week"},
{text: this.$t("Month"), value: "month",},
{text: this.$t("Year"), value: "year"},
],
displayPeriodCount: [1, 2, 3, 4],
},
}
},
mounted() {
this.user_preferences = this.preferences
this.languages = window.AVAILABLE_LANGUAGES
this.loadSettings()
this.meal_plan_store = useMealPlanStore()
},
methods: {
loadSettings: function () {
@ -64,6 +100,13 @@ export default {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
})
},
dayNames: function () {
let options = []
this.getFormattedWeekdayNames(this.getDefaultBrowserLocale(), "long", 0).forEach((day, index) => {
options.push({text: day, value: index})
})
return options
},
}
}
</script>

6
vue/src/stores/MealPlanStore.js
View File

@ -12,6 +12,12 @@ export const useMealPlanStore = defineStore(_STORE_ID, {
state: () => ({
plans: {},
currently_updating: null,
client_settings: {
displayPeriodUom: "week",
displayPeriodCount: 2,
startingDayOfWeek: 1,
displayWeekNumbers: true,
},
}),
getters: {
plan_list: function () {