mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-04 04:55:21 +02:00
init 2
This commit is contained in:
Hayden
commit
beed8576c2
137 changed files with 40218 additions and 0 deletions
23
frontend/src/components/Admin/Admin.vue
Normal file
23
frontend/src/components/Admin/Admin.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<Theme />
|
||||
<Backup />
|
||||
<Webhooks />
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Backup from "./Backup";
|
||||
import Webhooks from "./Webhooks";
|
||||
import Theme from "./Theme";
|
||||
export default {
|
||||
components: {
|
||||
Backup,
|
||||
Webhooks,
|
||||
Theme,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
121
frontend/src/components/Admin/Backup.vue
Normal file
121
frontend/src/components/Admin/Backup.vue
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<v-card :loading="backupLoading" class="mt-3">
|
||||
<v-card-title class="card-title"> Backup and Exports </v-card-title>
|
||||
<v-card-text>
|
||||
<p>
|
||||
Backups are exported in standard JSON format along with all the images
|
||||
stored on the file system. In your backup folder you'll find a .zip file
|
||||
that contains all of the recipe JSON and images from the database.
|
||||
Additionally, if you selected a markdown file, those will also be stored
|
||||
in the .zip file. To import a backup, it must be located in your backups
|
||||
folder. Automated backups are done each day at 3:00 AM.
|
||||
</p>
|
||||
|
||||
<v-row dense align="center">
|
||||
<v-col dense cols="12" sm="12" md="4">
|
||||
<v-text-field v-model="backupTag" label="Backup Tag"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-combobox
|
||||
auto-select-first
|
||||
label="Markdown Template"
|
||||
:items="availableTemplates"
|
||||
v-model="selectedTemplate"
|
||||
></v-combobox>
|
||||
</v-col>
|
||||
<v-col dense cols="12" sm="12" md="2">
|
||||
<v-btn block color="accent" @click="createBackup" width="165">
|
||||
Backup Recipes
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row dense align="center">
|
||||
<v-col dense cols="12" sm="12" md="4">
|
||||
<v-form ref="form">
|
||||
<v-combobox
|
||||
auto-select-first
|
||||
label="Select a Backup for Import"
|
||||
:items="availableBackups"
|
||||
v-model="selectedBackup"
|
||||
:rules="[(v) => !!v || 'Backup Selection is Required']"
|
||||
required
|
||||
></v-combobox>
|
||||
</v-form>
|
||||
</v-col>
|
||||
<v-col dense cols="12" sm="12" md="3" lg="2">
|
||||
<v-btn block color="accent" @click="importBackup">
|
||||
Import Backup
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col dense cols="12" sm="12" md="2" lg="2">
|
||||
<v-btn block color="error" @click="deleteBackup">
|
||||
Delete Backup
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from "../../api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
backupLoading: false,
|
||||
backupTag: null,
|
||||
selectedBackup: null,
|
||||
selectedTemplate: null,
|
||||
availableBackups: [],
|
||||
availableTemplates: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getAvailableBackups();
|
||||
},
|
||||
methods: {
|
||||
async getAvailableBackups() {
|
||||
let response = await api.backups.requestAvailable();
|
||||
this.availableBackups = response.imports;
|
||||
this.availableTemplates = response.templates;
|
||||
},
|
||||
importBackup() {
|
||||
if (this.$refs.form.validate()) {
|
||||
this.backupLoading = true;
|
||||
|
||||
api.backups.import(this.selectedBackup);
|
||||
this.backupLoading = false;
|
||||
}
|
||||
},
|
||||
deleteBackup() {
|
||||
if (this.$refs.form.validate()) {
|
||||
this.backupLoading = true;
|
||||
|
||||
api.backups.delete(this.selectedBackup);
|
||||
this.getAvailableBackups();
|
||||
|
||||
this.selectedBackup = null;
|
||||
this.backupLoading = false;
|
||||
}
|
||||
},
|
||||
async createBackup() {
|
||||
this.backupLoading = true;
|
||||
|
||||
let response = await api.backups.create(
|
||||
this.backupTag,
|
||||
this.selectedTemplate
|
||||
);
|
||||
|
||||
if (response.status == 201) {
|
||||
this.selectedBackup = null;
|
||||
this.getAvailableBackups();
|
||||
this.backupLoading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
12
frontend/src/components/Admin/SFTP.vue
Normal file
12
frontend/src/components/Admin/SFTP.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<v-card>
|
||||
<v-card-title class="card-title mt-1"> SFTP Settings </v-card-title>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
159
frontend/src/components/Admin/Theme.vue
Normal file
159
frontend/src/components/Admin/Theme.vue
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
<template>
|
||||
<v-card>
|
||||
<v-card-title class="card-title mt-1"> Theme Settings </v-card-title>
|
||||
<v-card-text>
|
||||
<p>
|
||||
Select a theme from the dropdown or create a new theme. Note that the
|
||||
default theme will be served to all users who have not set a theme
|
||||
preference.
|
||||
</p>
|
||||
<v-row dense align="center">
|
||||
<v-col cols="12" md="2" sm="5">
|
||||
<v-switch
|
||||
v-model="darkMode"
|
||||
inset
|
||||
label="Dark Mode"
|
||||
class="my-n3"
|
||||
@change="toggleDarkMode"
|
||||
></v-switch>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" sm="3">
|
||||
<v-form ref="form" lazy-validation>
|
||||
<v-select
|
||||
label="Saved Color Schemes"
|
||||
:items="avaiableThemes"
|
||||
item-text="name"
|
||||
item-value="colors"
|
||||
return-object
|
||||
v-model="selectedScheme"
|
||||
@change="themeSelected"
|
||||
:rules="[(v) => !!v || 'Theme is required']"
|
||||
required
|
||||
>
|
||||
</v-select>
|
||||
</v-form>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="1">
|
||||
<NewTheme @new-theme="appendTheme" />
|
||||
</v-col>
|
||||
<v-col cols="12" sm="1">
|
||||
<v-btn text color="error" @click="deleteSelected"> Delete </v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row dense align-content="center" v-if="activeTheme">
|
||||
<v-col>
|
||||
<ColorPicker button-text="Primary" v-model="activeTheme.primary" />
|
||||
</v-col>
|
||||
<v-col>
|
||||
<ColorPicker button-text="Accent" v-model="activeTheme.accent" />
|
||||
</v-col>
|
||||
<v-col>
|
||||
<ColorPicker
|
||||
button-text="Secondary"
|
||||
v-model="activeTheme.secondary"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<ColorPicker button-text="Success" v-model="activeTheme.success" />
|
||||
</v-col>
|
||||
<v-col>
|
||||
<ColorPicker button-text="Info" v-model="activeTheme.info" />
|
||||
</v-col>
|
||||
<v-col>
|
||||
<ColorPicker button-text="Warning" v-model="activeTheme.warning" />
|
||||
</v-col>
|
||||
<v-col>
|
||||
<ColorPicker button-text="Error" v-model="activeTheme.error" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-row>
|
||||
<v-col> </v-col>
|
||||
<v-col></v-col>
|
||||
<v-col align="end">
|
||||
<v-btn text color="success" @click="saveThemes"> Save Theme </v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from "../../api";
|
||||
import ColorPicker from "./ThemeUI/ColorPicker";
|
||||
import NewTheme from "./ThemeUI/NewTheme";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ColorPicker,
|
||||
NewTheme,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
themes: null,
|
||||
activeTheme: {},
|
||||
darkMode: false,
|
||||
avaiableThemes: [],
|
||||
selectedScheme: "",
|
||||
selectedLight: "",
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
this.avaiableThemes = await api.themes.requestAll();
|
||||
this.darkMode = this.$store.getters.getDarkMode;
|
||||
this.themes = this.$store.getters.getThemes;
|
||||
this.setThemeEditor();
|
||||
},
|
||||
|
||||
methods: {
|
||||
async deleteSelected() {
|
||||
if (this.$refs.form.validate()) {
|
||||
if (this.selectedScheme === "default") {
|
||||
// Notify User Can't Delete Default
|
||||
} else if (this.selectedScheme !== "") {
|
||||
api.themes.delete(this.selectedScheme.name);
|
||||
}
|
||||
this.avaiableThemes = await api.themes.requestAll();
|
||||
}
|
||||
},
|
||||
async appendTheme(newTheme) {
|
||||
api.themes.create(newTheme);
|
||||
this.avaiableThemes.push(newTheme);
|
||||
},
|
||||
themeSelected() {
|
||||
this.activeTheme = this.selectedScheme.colors;
|
||||
},
|
||||
setThemeEditor() {
|
||||
if (this.darkMode) {
|
||||
this.activeTheme = this.themes.dark;
|
||||
} else {
|
||||
this.activeTheme = this.themes.light;
|
||||
}
|
||||
},
|
||||
toggleDarkMode() {
|
||||
this.$store.commit("setDarkMode", this.darkMode);
|
||||
this.selectedScheme = "";
|
||||
|
||||
this.setThemeEditor();
|
||||
},
|
||||
saveThemes() {
|
||||
if (this.$refs.form.validate()) {
|
||||
if (this.darkMode) {
|
||||
this.themes.dark = this.activeTheme;
|
||||
} else {
|
||||
this.themes.light = this.activeTheme;
|
||||
}
|
||||
this.$store.commit("setThemes", this.themes);
|
||||
this.$store.dispatch("initCookies");
|
||||
api.themes.update(this.selectedScheme.name, this.activeTheme);
|
||||
} else;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
70
frontend/src/components/Admin/ThemeUI/ColorPicker.vue
Normal file
70
frontend/src/components/Admin/ThemeUI/ColorPicker.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-btn block :color="value" @click="dialog = true">
|
||||
{{ buttonText }}
|
||||
</v-btn>
|
||||
<v-dialog v-model="dialog" width="400">
|
||||
<v-card>
|
||||
<v-card-title> {{ buttonText }} Color </v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field v-model="color"> </v-text-field>
|
||||
<v-row>
|
||||
<v-col></v-col>
|
||||
<v-col>
|
||||
<v-color-picker
|
||||
dot-size="28"
|
||||
hide-inputs
|
||||
hide-mode-switch
|
||||
mode="hexa"
|
||||
:show-swatches="swatches"
|
||||
swatches-max-height="300"
|
||||
v-model="color"
|
||||
@change="updateColor"
|
||||
></v-color-picker>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn text @click="toggleSwatches"> Swatches </v-btn>
|
||||
<v-btn text @click="dialog = false"> Select </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
buttonText: String,
|
||||
value: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
swatches: false,
|
||||
color: "#FF00FF",
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
color() {
|
||||
this.updateColor();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleSwatches() {
|
||||
if (this.swatches) {
|
||||
this.swatches = false;
|
||||
} else this.swatches = true;
|
||||
},
|
||||
updateColor() {
|
||||
this.$emit("input", this.color);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
62
frontend/src/components/Admin/ThemeUI/NewTheme.vue
Normal file
62
frontend/src/components/Admin/ThemeUI/NewTheme.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-btn text color="success" @click="dialog = true"> New </v-btn>
|
||||
<v-dialog v-model="dialog" width="400">
|
||||
<v-card>
|
||||
<v-card-title> Add a New Theme </v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field label="Theme Name" v-model="themeName"></v-text-field>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="success" text @click="Select"> Create </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
buttonText: String,
|
||||
value: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
themeName: "",
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
color() {
|
||||
this.updateColor();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
randomColor() {
|
||||
return "#" + Math.floor(Math.random() * 16777215).toString(16);
|
||||
},
|
||||
Select() {
|
||||
const newTheme = {
|
||||
name: this.themeName,
|
||||
colors: {
|
||||
primary: this.randomColor(),
|
||||
accent: this.randomColor(),
|
||||
secondary: this.randomColor(),
|
||||
success: this.randomColor(),
|
||||
info: this.randomColor(),
|
||||
warning: this.randomColor(),
|
||||
error: this.randomColor(),
|
||||
},
|
||||
};
|
||||
|
||||
this.$emit("new-theme", newTheme);
|
||||
this.dialog = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
12
frontend/src/components/Admin/Users.vue
Normal file
12
frontend/src/components/Admin/Users.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<v-card>
|
||||
<v-card-title class="card-title mt-1"> User Settings </v-card-title>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
114
frontend/src/components/Admin/Webhooks.vue
Normal file
114
frontend/src/components/Admin/Webhooks.vue
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<template>
|
||||
<v-card>
|
||||
<v-card-title class="card-title mt-1"> Meal Planner Webhooks </v-card-title>
|
||||
<v-card-text>
|
||||
<p>
|
||||
The URLs listed below will recieve webhooks containing the recipe data
|
||||
for the meal plan on it's scheduled day. Currently Webhooks will execute
|
||||
at <strong>{{ time }}</strong>
|
||||
</p>
|
||||
|
||||
<v-row dense align="center">
|
||||
<v-col cols="12" md="2" sm="5">
|
||||
<v-switch
|
||||
v-model="enabled"
|
||||
inset
|
||||
label="Enabled"
|
||||
class="my-n3"
|
||||
></v-switch>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3" sm="5">
|
||||
<TimePicker @save-time="saveTime" />
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" sm="5">
|
||||
<v-btn text color="info" @click="testWebhooks"> Test Webhooks </v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row v-for="(url, index) in webhooks" :key="index" align="center" dense>
|
||||
<v-col cols="1">
|
||||
<v-btn icon color="error" @click="removeWebhook(index)">
|
||||
<v-icon>mdi-minus</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
v-model="webhooks[index]"
|
||||
label="Webhook URL"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-btn icon color="success" @click="addWebhook">
|
||||
<v-icon>mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col> </v-col>
|
||||
<v-col align="end">
|
||||
<v-btn text color="success" @click="saveWebhooks">
|
||||
Save Webhooks
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from "../../api";
|
||||
import TimePicker from "./Webhooks/TimePicker";
|
||||
export default {
|
||||
components: {
|
||||
TimePicker,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: "main",
|
||||
webhooks: [],
|
||||
enabled: false,
|
||||
time: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getSiteSettings();
|
||||
},
|
||||
methods: {
|
||||
saveTime(value) {
|
||||
this.time = value;
|
||||
},
|
||||
async getSiteSettings() {
|
||||
let settings = await api.settings.requestAll();
|
||||
this.webhooks = settings.webhooks.webhookURLs;
|
||||
this.name = settings.name;
|
||||
this.time = settings.webhooks.webhookTime;
|
||||
this.enabled = settings.webhooks.enabled;
|
||||
},
|
||||
addWebhook() {
|
||||
this.webhooks.push(" ");
|
||||
},
|
||||
removeWebhook(index) {
|
||||
this.webhooks.splice(index, 1);
|
||||
},
|
||||
saveWebhooks() {
|
||||
const body = {
|
||||
name: this.name,
|
||||
webhooks: {
|
||||
webhookURLs: this.webhooks,
|
||||
webhookTime: this.time,
|
||||
enabled: this.enabled,
|
||||
},
|
||||
};
|
||||
api.settings.update(body);
|
||||
},
|
||||
testWebhooks() {
|
||||
api.settings.testWebhooks();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
45
frontend/src/components/Admin/Webhooks/TimePicker.vue
Normal file
45
frontend/src/components/Admin/Webhooks/TimePicker.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<v-dialog
|
||||
ref="dialog"
|
||||
v-model="modal2"
|
||||
:return-value.sync="time"
|
||||
persistent
|
||||
width="290px"
|
||||
>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-text-field
|
||||
v-model="time"
|
||||
label="Set New Time"
|
||||
prepend-icon="mdi-clock-time-four-outline"
|
||||
readonly
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
></v-text-field>
|
||||
</template>
|
||||
<v-time-picker v-if="modal2" v-model="time" full-width>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text color="primary" @click="modal2 = false"> Cancel </v-btn>
|
||||
<v-btn text color="primary" @click="saveTime"> OK </v-btn>
|
||||
</v-time-picker>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
time: null,
|
||||
modal2: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
saveTime() {
|
||||
this.$refs.dialog.save(this.time);
|
||||
this.$emit("save-time", this.time);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue