j3d1/toolshed
2
1
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity

stash

Browse source
This commit is contained in:
j3d1 2024-09-02 20:06:49 +02:00
parent 448c166507
commit 17bfb84a94
62 changed files with 62258 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

115
frontend/src/views/Admin.vue Normal file
View file

@ -0,0 +1,115 @@
<template>
<BaseLayout>
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Admin</h1>
<div class="row">
<div class="col-6 col-xl-3">
<div class="card">
<div class="card-header">
<h5 class="card-title">Tags</h5>
</div>
<div class="card-body">
<ul>
<li v-for="tag in tags.sort()" :key="tag.id">
{{ tag }}
</li>
</ul>
</div>
</div>
</div>
<div class="col-6 col-xl-3">
<div class="card">
<div class="card-header">
<h5 class="card-title">Properties</h5>
</div>
<div class="card-body">
<ul>
<li v-for="property in properties.sort()" :key="property.id">
{{ property.name }} ({{ property.unit_name }}, {{ property.unit_symbol }})
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">Categories</h5>
</div>
<div class="card-body">
<ul>
<li v-for="category in categories.sort()" :key="category.id">
{{ category }}
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">Domains</h5>
</div>
<div class="card-body">
<ul>
<li v-for="domain in domains.sort()" :key="domain.id">
{{ domain }}
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">Availability Policies</h5>
</div>
<div class="card-body">
<ul>
<li v-for="policy in availability_policies.sort()" :key="policy.id">
{{ policy.text }}
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">Storage Locations</h5>
</div>
<div class="card-body">
<ul>
<li v-for="location in storage_locations.sort()" :key="location.id">
{{ location.path }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>
</BaseLayout>
</template>
<script>
import {mapActions, mapState} from "vuex";
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
export default {
name: "Admin",
components: {
BaseLayout,
...BIcons
},
computed: {
...mapState(["tags", "properties", "categories", "availability_policies", "domains", "storage_locations"])
},
methods: {
...mapActions(["fetchInfo", "fetchStorageLocations"])
},
async mounted() {
await this.fetchInfo();
await this.fetchStorageLocations();
}
}
</script>
<style scoped>
</style>

11
frontend/src/views/Dashboard.vue
View file

@ -5,7 +5,16 @@
<h1 class="h3 mb-3">Dashboard</h1>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Empty card</h5>
</div>
<div class="card-body">
<div class="logo">
<img src="/src/assets/icons/toolshed-48x48.png" alt="Toolshed logo">
</div>
</div>
</div>
</div>
</div>
</div>

71
frontend/src/views/Files.vue Normal file
View file

@ -0,0 +1,71 @@
<template>
<BaseLayout>
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Files</h1>
<div class="card">
<div class="card-header">
<h5 class="card-title">Images</h5>
</div>
<div class="card-body">
<span v-for="files in only_images(files)" :key="files.id">
<deletable-wrapper @delete="deleteFile(files)">
<authenticated-image :src="files.name" :owner="files.owner"
class="img-thumbnail"/>
</deletable-wrapper>
</span>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">Other files</h5>
</div>
<div class="card-body">
<ul>
<li v-for="file in whithout_images(files)" :key="file.id">
{{ file.name }}
</li>
</ul>
</div>
</div>
</div>
</main>
</BaseLayout>
</template>
<script>
import {mapActions, mapState} from "vuex";
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
import DeletableWrapper from "@/components/DeletableWrapper.vue";
export default {
name: "Files",
components: {
AuthenticatedImage,
BaseLayout,
DeletableWrapper,
...BIcons
},
computed: {
...mapState(["files"])
},
methods: {
...mapActions(["fetchFiles", "deleteFile"]),
only_images(files) {
return files.filter(file => file.mime_type.startsWith("image/"));
},
whithout_images(files) {
return files.filter(file => !file.mime_type.startsWith("image/"));
}
},
mounted() {
this.fetchFiles();
}
}
</script>
<style scoped>
</style>

5
frontend/src/views/Inventory.vue
View file

@ -2,8 +2,9 @@
<BaseLayout>
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Inventory Own & Friends"</h1>
<div class="row">
<div class="col-12 col-xl-6">
<div class="col-12 col-xl-12">
<div class="card">
<div class="card-header">
<h5 class="card-title">{{ user }}'s Inventory</h5>
@ -45,7 +46,7 @@
</table>
<div class="card-body" v-else>
<div class="row">
<div class="col-12 col-md-6 col-lg-4 col-xl-3" v-for="item in inventory_items"
<div class="col-12 col-md-4 col-lg-3 col-xl-2" v-for="item in inventory_items"
:key="item.id">
<div class="card">
<img :src="item.image" class="" :alt="item.image">

3
frontend/src/views/InventoryDetail.vue
View file

@ -59,14 +59,11 @@ import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
import {mapActions, mapGetters} from "vuex";
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
import PropertyField from "../components/PropertyField.vue";
import TagField from "../components/TagField.vue";
export default {
name: "InventoryDetail",
components: {
AuthenticatedImage,
PropertyField, TagField,
BaseLayout,
...BIcons
},

256
frontend/src/views/Profile.vue Normal file
View file

@ -0,0 +1,256 @@
<template>
<BaseLayout>
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Profile</h1>
<div class="row">
<div class="col-md-4 col-xl-3">
<div class="card mb-3">
<div class="card-header">
<h5 class="card-title mb-0">Profile Details</h5>
</div>
<div class="card-body text-center">
<img src="/assets/img/avatars/avatar.png"
alt="Christina Mason" class="img-fluid rounded-circle mb-2" width="128"
height="128"/>
<h5 class="card-title mb-0">
{{ user.username }}
</h5>
<div class="text-muted mb-2">
{{ user.email }}
</div>
<div>
<a class="btn btn-primary btn-sm" href="#">Follow</a>
<a class="btn btn-primary btn-sm" href="#"><span
data-feather="message-square"></span> Message</a>
</div>
</div>
<!--{% if user.bio %}-->
<hr class="my-0"/>
<div class="card-body">
<h5 class="h6 card-title">Bio</h5>
<div class="text-muted mb-2">
{{ user.bio }}
</div>
</div>
<!--{% endif %}-->
<hr class="my-0"/>
<div class="card-body">
<h5 class="h6 card-title">Skills</h5>
<a href="#" class="badge bg-primary mr-1 my-1">HTML</a>
<a href="#" class="badge bg-primary mr-1 my-1">JavaScript</a>
<a href="#" class="badge bg-primary mr-1 my-1">Sass</a>
<a href="#" class="badge bg-primary mr-1 my-1">Angular</a>
<a href="#" class="badge bg-primary mr-1 my-1">Vue</a>
<a href="#" class="badge bg-primary mr-1 my-1">React</a>
<a href="#" class="badge bg-primary mr-1 my-1">Redux</a>
<a href="#" class="badge bg-primary mr-1 my-1">UI</a>
<a href="#" class="badge bg-primary mr-1 my-1">UX</a>
</div>
<hr class="my-0"/>
<div class="card-body">
<h5 class="h6 card-title">About</h5>
<ul class="list-unstyled mb-0">
<!--{% if user.location %}-->
<li class="mb-1"><span data-feather="home" class="feather-sm mr-1"></span> Lives
in <a href="#">{{ user.location }}</a></li>
<!--{% endif %}-->
<li class="mb-1"><span data-feather="briefcase" class="feather-sm mr-1"></span>
Works at <a href="#">GitHub</a></li>
<li class="mb-1"><span data-feather="map-pin" class="feather-sm mr-1"></span>
From <a href="#">Boston</a></li>
</ul>
</div>
<hr class="my-0"/>
<div class="card-body">
<h5 class="h6 card-title">Elsewhere</h5>
<ul class="list-unstyled mb-0">
<li class="mb-1"><span class="fas fa-globe fa-fw mr-1"></span> <a href="#">staciehall.co</a>
</li>
<li class="mb-1"><span class="fab fa-twitter fa-fw mr-1"></span> <a
href="#">Twitter</a>
</li>
<li class="mb-1"><span class="fab fa-facebook fa-fw mr-1"></span> <a href="#">Facebook</a>
</li>
<li class="mb-1"><span class="fab fa-instagram fa-fw mr-1"></span> <a href="#">Instagram</a>
</li>
<li class="mb-1"><span class="fab fa-linkedin fa-fw mr-1"></span> <a href="#">LinkedIn</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-8 col-xl-9">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Activities</h5>
</div>
<div class="card-body h-100">
<div class="d-flex align-items-start">
<img src="/assets/img/avatars/avatar-5.png" width="36" height="36"
class="rounded-circle mr-2" alt="Vanessa Tucker">
<div class="flex-grow-1">
<small class="float-right text-navy">5m ago</small>
<strong>Vanessa Tucker</strong> started following <strong>Christina
Mason</strong><br/>
<small class="text-muted">Today 7:51 pm</small><br/>
</div>
</div>
<hr/>
<div class="d-flex align-items-start">
<img src="/assets/img/avatars/avatar.png" width="36" height="36"
class="rounded-circle mr-2" alt="Charles Hall">
<div class="flex-grow-1">
<small class="float-right text-navy">30m ago</small>
<strong>Charles Hall</strong> posted something on <strong>Christina
Mason</strong>'s timeline<br/>
<small class="text-muted">Today 7:21 pm</small>
<div class="border text-sm text-muted p-2 mt-1">
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem
quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam
nunc, blandit vel, luctus
pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis
ante.
</div>
<a href="#" class="btn btn-sm btn-danger mt-1"><i class="feather-sm"
data-feather="heart"></i>
Like</a>
</div>
</div>
<hr/>
<div class="d-flex align-items-start">
<img src="/assets/img/avatars/avatar-4.png" width="36" height="36"
class="rounded-circle mr-2" alt="Christina Mason">
<div class="flex-grow-1">
<small class="float-right text-navy">1h ago</small>
<strong>Christina Mason</strong> posted a new blog<br/>
<small class="text-muted">Today 6:35 pm</small>
</div>
</div>
<hr/>
<div class="d-flex align-items-start">
<img src="/assets/img/avatars/avatar-2.png" width="36" height="36"
class="rounded-circle mr-2" alt="William Harris">
<div class="flex-grow-1">
<small class="float-right text-navy">3h ago</small>
<strong>William Harris</strong> posted two photos on <strong>Christina
Mason</strong>'s timeline<br/>
<small class="text-muted">Today 5:12 pm</small>
<div class="row g-0 mt-1">
<div class="col-6 col-md-4 col-lg-4 col-xl-3">
<img src="/assets/img/photos/unsplash-1.jpg"
class="img-fluid pr-2" alt="Unsplash">
</div>
<div class="col-6 col-md-4 col-lg-4 col-xl-3">
<img src="/assets/img/photos/unsplash-2.jpg"
class="img-fluid pr-2" alt="Unsplash">
</div>
</div>
<a href="#" class="btn btn-sm btn-danger mt-1"><i class="feather-sm"
data-feather="heart"></i>
Like</a>
</div>
</div>
<hr/>
<div class="d-flex align-items-start">
<img src="/assets/img/avatars/avatar-2.png" width="36" height="36"
class="rounded-circle mr-2" alt="William Harris">
<div class="flex-grow-1">
<small class="float-right text-navy">1d ago</small>
<strong>William Harris</strong> started following <strong>Christina
Mason</strong><br/>
<small class="text-muted">Yesterday 3:12 pm</small>
<div class="d-flex align-items-start mt-1">
<a class="pr-3" href="#">
<img src="/assets/img/avatars/avatar-4.png" width="36"
height="36" class="rounded-circle mr-2" alt="Christina Mason">
</a>
<div class="flex-grow-1">
<div class="border text-sm text-muted p-2 mt-1">
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id,
lorem. Maecenas nec odio et ante tincidunt tempus.
</div>
</div>
</div>
</div>
</div>
<hr/>
<div class="d-flex align-items-start">
<img src="/assets/img/avatars/avatar-4.png" width="36" height="36"
class="rounded-circle mr-2" alt="Christina Mason">
<div class="flex-grow-1">
<small class="float-right text-navy">1d ago</small>
<strong>Christina Mason</strong> posted a new blog<br/>
<small class="text-muted">Yesterday 2:43 pm</small>
</div>
</div>
<hr/>
<div class="d-flex align-items-start">
<img src="/assets/img/avatars/avatar.png" width="36" height="36"
class="rounded-circle mr-2" alt="Charles Hall">
<div class="flex-grow-1">
<small class="float-right text-navy">1d ago</small>
<strong>Charles Hall</strong> started following <strong>Christina
Mason</strong><br/>
<small class="text-muted">Yesterdag 1:51 pm</small>
</div>
</div>
<hr/>
<a href="#" class="btn btn-primary btn-block">Load more</a>
</div>
</div>
</div>
</div>
</div>
</main>
</BaseLayout>
</template>
<script>
import BaseLayout from "@/components/BaseLayout.vue";
export default {
name: 'Profile',
data() {
return {
user: {
name: 'John Doe',
avatar: '/static/assets/img/avatars/avatar.png',
cover: '/static/assets/img/photos/unsplash-1.jpg',
occupation: 'Frontend Developer',
company: 'Facebook Inc.',
email: 'foo@bar.com',
phone: '+12 345 678 001',
address: 'Boulevard of Broken Dreams, 1234',
}
}
},
components: {BaseLayout},
}
</script>
<style scoped>
</style>

92
frontend/src/views/Search.vue Normal file
View file

@ -0,0 +1,92 @@
<template>
<BaseLayout hide-search>
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Search Inventories</h1>
<div class="row">
<div class="col-md-3">
<div class="card">
<SearchBox @change=""/>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Results for "{{ query }}"</h5>
</div>
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th style="width:40%;">Name</th>
<th style="width:25%">Owner</th>
<th class="d-none d-md-table-cell" style="width:25%">Amount</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search_results" :key="item.id">
<td>
<router-link :to="`/inventory/${item.id}`">{{ item.name }}</router-link>
</td>
<td>{{ item.owner }}</td>
<td class="d-none d-md-table-cell">{{ item.owned_quantity }}</td>
<td class="table-action">
<!--<router-link :to="`/inventory/${item.id}/edit`">
<b-icon-pencil-square></b-icon-pencil-square>
</router-link>
<a :href="`/inventory/${item.id}/delete`"
@click.prevent="deleteInventoryItem(item)">
<b-icon-trash></b-icon-trash>
</a>-->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
</BaseLayout>
</template>
<script>
import {mapActions} from 'vuex';
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
import SearchBox from "@/components/SearchBox.vue";
export default {
name: 'Search',
components: {
SearchBox,
...BIcons,
BaseLayout
},
props: {
query: {
type: String,
required: true
}
},
data() {
return {
search_results: [],
}
},
methods: {
...mapActions(['fetchSearchResults']),
},
async mounted() {
this.fetchSearchResults({query: this.query}).then((results) => {
this.search_results = results;
});
}
}
</script>
<style scoped>
</style>

382
frontend/src/views/Settings.vue Normal file
View file

@ -0,0 +1,382 @@
<template>
<BaseLayout>
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Settings</h1>
<div class="row">
<div class="col-md-3 col-xl-2">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Profile Settings</h5>
</div>
<div class="list-group list-group-flush" role="tablist">
<a class="list-group-item list-group-item-action" @click="active_tab = 'account'"
:class="{ active: active_tab === 'account' }" href="#" role="tab">
Account
</a>
<a class="list-group-item list-group-item-action" @click="active_tab = 'password'"
:class="{ active: active_tab === 'password' }" href="#"
role="tab">
Password
</a>
<a class="list-group-item list-group-item-action" @click="active_tab = 'privacy'"
:class="{ active: active_tab === 'privacy' }" href="#" role="tab">
Privacy and safety
</a>
<a class="list-group-item list-group-item-action" @click="active_tab = 'email'"
:class="{ active: active_tab === 'email' }" href="#" role="tab">
Email notifications
</a>
<a class="list-group-item list-group-item-action" @click="active_tab = 'notifications'"
:class="{ active: active_tab === 'notifications' }" href="#">
Web notifications
</a>
<a class="list-group-item list-group-item-action" @click="active_tab = 'data'"
:class="{ active: active_tab === 'data' }" href="#">
Your data
</a>
<a class="list-group-item list-group-item-action delete" @click="deleteAccount"
href="#">
Delete account
</a>
</div>
</div>
</div>
<div class="col-md-9 col-xl-10">
<div class="tab-content">
<div class="tab-pane fade" :class="{ 'show active': active_tab === 'account' }" id="account"
role="tabpanel">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Public info</h5>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="col-md-8">
<div class="mb-3">
<label class="form-label"
for="inputUsername">Username</label>
<input type="text" class="form-control" id="inputUsername"
placeholder="Username">
</div>
<div class="mb-3">
<label class="form-label"
for="inputUsername">Biography</label>
<textarea rows="2" class="form-control" id="inputBio"
placeholder="Tell something about yourself"></textarea>
</div>
</div>
<div class="col-md-4">
<div class="text-center">
<img alt="Charles Hall"
src="/assets/img/avatars/avatar.png"
class="rounded-circle img-responsive mt-2" width="128"
height="128"/>
<div class="mt-2">
<span class="btn btn-primary"><i
class="fas fa-upload"></i> Upload</span>
</div>
<small>For best results, use an image at least 128px by
128px in .jpg format</small>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Private info</h5>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="mb-3 col-md-6">
<label class="form-label" for="inputFirstName">First
name</label>
<input type="text" class="form-control" id="inputFirstName"
placeholder="First name">
</div>
<div class="mb-3 col-md-6">
<label class="form-label" for="inputLastName">Last name</label>
<input type="text" class="form-control" id="inputLastName"
placeholder="Last name">
</div>
</div>
<div class="mb-3">
<label class="form-label" for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4"
placeholder="Email">
</div>
<div class="mb-3">
<label class="form-label" for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress"
placeholder="1234 Main St">
</div>
<div class="mb-3">
<label class="form-label" for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2"
placeholder="Apartment, studio, or floor">
</div>
<div class="row">
<div class="mb-3 col-md-6">
<label class="form-label" for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="mb-3 col-md-4">
<label class="form-label" for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="mb-3 col-md-2">
<label class="form-label" for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
<div class="tab-pane fade" :class="{ 'show active': active_tab === 'password' }"
id="password" role="tabpanel">
<div class="card">
<div class="card-body">
<h5 class="card-title">Password</h5>
<form>
<div class="mb-3">
<label class="form-label" for="inputPasswordCurrent">Current
password</label>
<input type="password" class="form-control"
id="inputPasswordCurrent">
<small><a href="#">Forgot your password?</a></small>
</div>
<div class="mb-3">
<label class="form-label" for="inputPasswordNew">New
password</label>
<input type="password" class="form-control" id="inputPasswordNew">
</div>
<div class="mb-3">
<label class="form-label" for="inputPasswordNew2">Verify
password</label>
<input type="password" class="form-control" id="inputPasswordNew2">
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
<div class="tab-pane fade" :class="{ 'show active': active_tab === 'privacy' }" id="privacy"
role="tabpanel">
<div class="card">
<div class="card-body">
<h5 class="card-title">Privacy and safety</h5>
<form>
<div class="mb-3">
<label class="form-label d-block">Profile visibility</label>
<div class="form-check form-switch">
<input class="form-check input-switch" type="checkbox"
id="flexSwitchCheckDefault">
<label class="form-check
label-switch" for="flexSwitchCheckDefault">Visible to
everyone</label>
</div>
</div>
<div class="mb-3">
<label class="form-label
d-block">Photo visibility</label>
<div class="form-check
form-switch">
<input class="form-check
input-switch" type="checkbox"
id="flexSwitchCheckDefault">
<label class="form-check
label-switch" for="flexSwitchCheckDefault">Visible to
everyone</label>
</div>
</div>
<div class="mb-3">
<label class="form-label
d-block">Last seen</label>
<div class="form-check
form-switch">
<input class="form-check
input-switch" type="checkbox"
id="flexSwitchCheckDefault">
<label class="form-check
label-switch" for="flexSwitchCheckDefault">Visible to
everyone</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Save
changes
</button>
</form>
</div>
<div class="card-footer">
<small>Changes will be reflected to all your devices</small>
</div>
</div>
</div>
<div class="tab-pane fade" :class="{ 'show active': active_tab === 'email' }" id="email"
role="tabpanel">
<div class="card">
<div class="card-body">
<h5 class="card-title
mb-0">Email notifications</h5>
<form>
<div class="mb-3">
<label class="form-label
d-block">Email notifications</label>
<div class="form-check
form-switch">
<input class="form-check
input-switch" type="checkbox"
id="flexSwitchCheckDefault">
<label class="form-check
label-switch" for="flexSwitchCheckDefault">Receive
email notifications</label>
</div>
</div>
<div class="mb-3">
<label class="form-label
d-block">Send email notifications to</label>
<input type="email" class="form-control"
id="inputEmail">
</div>
<button type="submit" class="btn btn-primary">Save
changes
</button>
</form>
</div>
</div>
</div>
<div class="tab-pane fade" :class="{ 'show active': active_tab === 'notifications' }"
id="notifications" role="tabpanel">
<div class="card">
<div class="card-body">
<h5 class="card-title mb-0">Web notifications</h5>
<form>
<div class="mb-3">
<label class="form-label d-block">Web notifications</label>
<div class="form-check form-switch">
<input class="form-check input-switch" type="checkbox"
id="flexSwitchCheckDefault">
<label class="form-check label-switch" for="flexSwitchCheckDefault">Receive
web notifications</label>
<small>These notifications can be sent to your email or
phone</small>
</div>
</div>
<div class="mb-3">
<label class="form-label d-block">Send web notifications to</label>
<input type="email" class="form-control"
id="inputEmail">
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
<div class="tab-pane fade" :class="{ 'show active': active_tab === 'data' }" id="data"
role="tabpanel">
<div class="card">
<div class="card-body">
<h5 class="card-title mb-0">Export</h5>
<form>
<div class="mb-3">
<label class="form-label
d-block">Download your data</label>
<button type="button" class="btn btn-primary">Download</button>
<small>Download all your data including photos, videos,
comments, profile information and more</small>
</div>
<div class="mb-3">
<label class="form-label
d-block">Delete your data</label>
<button type="button" class="btn btn-danger">Delete</button>
<small>Delete all your data including photos, videos,
comments, profile information and more</small>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title mb-0">Import</h5>
<form>
<div class="mb-3">
<label class="form-label
d-block">Import data</label>
<button type="button" class="btn btn-primary">Import</button>
<small>Import data from backup or other instances</small>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</BaseLayout>
</template>
<script>
import BaseLayout from "@/components/BaseLayout.vue";
export default {
name: 'Settings',
components: {BaseLayout},
data: () => ({
active_tab: "account"
}),
methods: {
deleteAccount() {
if (confirm('Are you sure you want to delete your account?')) {
alert('Account deleted');
}
}
}
}
</script>
<style scoped>
.delete {
color: var(--bs-danger);
}
.delete:hover {
color: var(--bs-light);
background-color: var(--bs-danger);
}
</style>

4907
frontend/src/views/Swatch.vue Normal file
View file

File diff suppressed because it is too large Load diff