basics of new settings page working
This commit is contained in:
vabene1111
66
vue/src/apps/SettingsView/SettingsView.vue
Normal file
66
vue/src/apps/SettingsView/SettingsView.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div id="app" class="row">
|
||||
<div class="col-md-3 col-12">
|
||||
<b-nav vertical>
|
||||
<b-nav-item :active="visible_settings === 'cosmetic'" @click="visible_settings = 'cosmetic'"><i
|
||||
class="fas fa-fw fa-eye"></i> Cosmetic
|
||||
</b-nav-item>
|
||||
<b-nav-item :active="visible_settings === 'account'" @click="visible_settings = 'account'"><i
|
||||
class="fas fa-fw fa-user"></i> Account
|
||||
</b-nav-item>
|
||||
<b-nav-item :active="visible_settings === 'search'" @click="visible_settings = 'search'"><i
|
||||
class="fas fa-fw fa-search"></i> Search
|
||||
</b-nav-item>
|
||||
<b-nav-item :active="visible_settings === 'shopping'" @click="visible_settings = 'shopping'"><i
|
||||
class="fas fa-fw fa-shopping-cart"></i> Shopping
|
||||
</b-nav-item>
|
||||
<b-nav-item :active="visible_settings === 'meal_plan'" @click="visible_settings = 'meal_plan'"><i
|
||||
class="fas fa-fw fa-calendar"></i> Meal Plan
|
||||
</b-nav-item>
|
||||
<b-nav-item :active="visible_settings === 'api'" @click="visible_settings = 'api'"><i
|
||||
class="fas fa-fw fa-code"></i> API
|
||||
</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
<div class="col-md-9 col-12">
|
||||
Overview
|
||||
<cosmetic-settings-component v-if="visible_settings === 'cosmetic'" :user_id="user_id"></cosmetic-settings-component>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue"
|
||||
import {BootstrapVue} from "bootstrap-vue"
|
||||
|
||||
import "bootstrap-vue/dist/bootstrap-vue.css"
|
||||
import {ApiApiFactory} from "@/utils/openapi/api"
|
||||
import CookbookSlider from "@/components/CookbookSlider"
|
||||
import LoadingSpinner from "@/components/LoadingSpinner"
|
||||
import {StandardToasts, ApiMixin} from "@/utils/utils"
|
||||
import CosmeticSettingsComponent from "@/components/Settings/CosmeticSettingsComponent";
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
export default {
|
||||
name: "ProfileView",
|
||||
mixins: [],
|
||||
components: {CosmeticSettingsComponent},
|
||||
data() {
|
||||
return {
|
||||
visible_settings: 'cosmetic',
|
||||
user_id: window.USER_ID,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$i18n.locale = window.CUSTOM_LOCALE
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
17
vue/src/apps/SettingsView/main.js
Normal file
17
vue/src/apps/SettingsView/main.js
Normal file
@ -0,0 +1,17 @@
|
||||
import Vue from 'vue'
|
||||
import App from './SettingsView.vue'
|
||||
import i18n from '@/i18n'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
// TODO move this and other default stuff to centralized JS file (verify nothing breaks)
|
||||
let publicPath = localStorage.STATIC_URL + 'vue/'
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
publicPath = 'http://localhost:8080/'
|
||||
}
|
||||
export default __webpack_public_path__ = publicPath // eslint-disable-line
|
||||
|
||||
new Vue({
|
||||
i18n,
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
110
vue/src/components/Settings/CosmeticSettingsComponent.vue
Normal file
110
vue/src/components/Settings/CosmeticSettingsComponent.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div v-if="user_preferences !== undefined">
|
||||
|
||||
<b-form-input v-model="user_preferences.default_unit" @change="updateSettings"></b-form-input>
|
||||
|
||||
{{ user_preferences.ingredient_decimals }}
|
||||
<b-form-input type="range" min="0" max="4" step="1" v-model="user_preferences.ingredient_decimals"
|
||||
@change="updateSettings"></b-form-input>
|
||||
|
||||
<b-form-checkbox v-model="user_preferences.use_fractions" @change="updateSettings"></b-form-checkbox>
|
||||
|
||||
<hr/>
|
||||
Language
|
||||
<b-form-select v-model="$i18n.locale" @change="updateLanguage">
|
||||
<b-form-select-option v-bind:key="l[0]" v-for="l in languages" :value="l[1]">{{ l[0] }} ({{
|
||||
l[1]
|
||||
}})
|
||||
</b-form-select-option>
|
||||
</b-form-select>
|
||||
|
||||
<b-form-select v-model="user_preferences.theme" @change="updateSettings(true);">
|
||||
<b-form-select-option value="TANDOOR">Tandoor</b-form-select-option>
|
||||
<b-form-select-option value="BOOTSTRAP">Bootstrap</b-form-select-option>
|
||||
<b-form-select-option value="DARKLY">Darkly</b-form-select-option>
|
||||
<b-form-select-option value="FLATLY">Flatly</b-form-select-option>
|
||||
<b-form-select-option value="SUPERHERO">Superhero</b-form-select-option>
|
||||
</b-form-select>
|
||||
|
||||
<b-form-checkbox v-model="user_preferences.sticky_navbar" @change="updateSettings(true);"></b-form-checkbox>
|
||||
|
||||
<b-form-select v-model="user_preferences.nav_color" @change="updateSettings(true);">
|
||||
<b-form-select-option value="PRIMARY">Primary</b-form-select-option>
|
||||
<b-form-select-option value="SECONDARY">Secondary</b-form-select-option>
|
||||
<b-form-select-option value="SUCCESS">Success</b-form-select-option>
|
||||
<b-form-select-option value="INFO">Info</b-form-select-option>
|
||||
<b-form-select-option value="WARNING">Warning</b-form-select-option>
|
||||
<b-form-select-option value="DANGER">Danger</b-form-select-option>
|
||||
<b-form-select-option value="LIGHT">Light</b-form-select-option>
|
||||
<b-form-select-option value="DARK">Dark</b-form-select-option>
|
||||
</b-form-select>
|
||||
|
||||
<hr/>
|
||||
|
||||
<b-form-checkbox v-model="user_preferences.use_kj" @change="updateSettings();"></b-form-checkbox>
|
||||
<b-form-checkbox v-model="user_preferences.comments" @change="updateSettings();"></b-form-checkbox>
|
||||
<b-form-checkbox v-model="user_preferences.left_handed" @change="updateSettings();"></b-form-checkbox>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ApiApiFactory} from "@/utils/openapi/api";
|
||||
import {resolveDjangoUrl, StandardToasts} from "@/utils/utils";
|
||||
|
||||
import axios from "axios";
|
||||
|
||||
axios.defaults.xsrfCookieName = 'csrftoken'
|
||||
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
|
||||
|
||||
export default {
|
||||
name: "CosmeticSettingsComponent",
|
||||
props: {
|
||||
user_id: Number,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user_preferences: undefined,
|
||||
languages: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.user_preferences = this.preferences
|
||||
this.languages = window.AVAILABLE_LANGUAGES
|
||||
this.loadSettings()
|
||||
},
|
||||
methods: {
|
||||
loadSettings: function () {
|
||||
let apiFactory = new ApiApiFactory()
|
||||
apiFactory.retrieveUserPreference(this.user_id.toString()).then(result => {
|
||||
this.user_preferences = result.data
|
||||
}).catch(err => {
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
|
||||
})
|
||||
},
|
||||
updateSettings: function (reload) {
|
||||
let apiFactory = new ApiApiFactory()
|
||||
apiFactory.partialUpdateUserPreference(this.user_id.toString(), this.user_preferences).then(result => {
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
|
||||
if (reload !== undefined) {
|
||||
location.reload()
|
||||
}
|
||||
}).catch(err => {
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
|
||||
})
|
||||
},
|
||||
updateLanguage: function () {
|
||||
axios.post(resolveDjangoUrl('set_language'), new URLSearchParams({'language': this.$i18n.locale})).then(result => {
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
|
||||
location.reload()
|
||||
}).catch(err => {
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -3110,6 +3110,43 @@ export interface Space {
|
||||
* @memberof Space
|
||||
*/
|
||||
file_size_mb?: string;
|
||||
/**
|
||||
*
|
||||
* @type {SpaceImage}
|
||||
* @memberof Space
|
||||
*/
|
||||
image?: SpaceImage;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface SpaceImage
|
||||
*/
|
||||
export interface SpaceImage {
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof SpaceImage
|
||||
*/
|
||||
id?: number;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof SpaceImage
|
||||
*/
|
||||
name: string;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof SpaceImage
|
||||
*/
|
||||
file_download?: string;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof SpaceImage
|
||||
*/
|
||||
preview?: string;
|
||||
}
|
||||
/**
|
||||
*
|
||||
@ -3528,6 +3565,12 @@ export interface UserPreference {
|
||||
* @memberof UserPreference
|
||||
*/
|
||||
user: number;
|
||||
/**
|
||||
*
|
||||
* @type {RecipeFile}
|
||||
* @memberof UserPreference
|
||||
*/
|
||||
image?: RecipeFile | null;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
@ -3570,6 +3613,12 @@ export interface UserPreference {
|
||||
* @memberof UserPreference
|
||||
*/
|
||||
plan_share?: Array<CustomFilterShared> | null;
|
||||
/**
|
||||
*
|
||||
* @type {boolean}
|
||||
* @memberof UserPreference
|
||||
*/
|
||||
sticky_navbar?: boolean;
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
|
||||
Reference in New Issue
Block a user