Initial commit
Eloi Zalczer
commit
29f8902f26
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
# Vue 3 + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="./src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"name": "doxfood-frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vee-validate/yup": "^4.13.0",
|
||||
"daisyui": "^4.12.2",
|
||||
"datatables.net-vue3": "^3.0.1",
|
||||
"leaflet": "^1.9.4",
|
||||
"pinia": "^2.1.7",
|
||||
"pocketbase": "^0.21.3",
|
||||
"vee-validate": "^4.13.0",
|
||||
"vue": "^3.4.21",
|
||||
"vue-router": "^4.3.2",
|
||||
"yup": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"postcss": "^8.4.38",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"vite": "^5.2.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
<script setup lang="ts">
|
||||
import { RouterView } from "vue-router";
|
||||
import "./style.css";
|
||||
import NavigationBar from "./components/NavigationBar.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-screen w-full flex flex-col m-0">
|
||||
<NavigationBar />
|
||||
|
||||
<RouterView />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
line-height: 1.6;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
"Fira Sans",
|
||||
"Droid Sans",
|
||||
"Helvetica Neue",
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
.dt-input {
|
||||
@apply input;
|
||||
@apply input-sm;
|
||||
@apply input-bordered;
|
||||
}
|
||||
|
||||
.dt-full:has(.dt-length) {
|
||||
@apply grid;
|
||||
@apply grid-cols-2;
|
||||
}
|
||||
|
||||
.dt-length {
|
||||
@apply m-3;
|
||||
@apply justify-self-start;
|
||||
}
|
||||
|
||||
.dt-search {
|
||||
@apply m-3;
|
||||
@apply px-3;
|
||||
@apply justify-self-end;
|
||||
|
||||
.dt-input {
|
||||
@apply mx-3;
|
||||
}
|
||||
}
|
||||
|
||||
.dataTable {
|
||||
tbody {
|
||||
tr {
|
||||
@apply hover:bg-gray-100;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
.form-label {
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@apply gap-2;
|
||||
@apply text-sm;
|
||||
@apply font-bold;
|
||||
@apply uppercase;
|
||||
@apply text-gray-500;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
@apply input;
|
||||
@apply input-bordered;
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
@apply select;
|
||||
@apply select-bordered;
|
||||
@apply my-0;
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.form-field-error {
|
||||
@apply input;
|
||||
@apply input-bordered;
|
||||
@apply w-full;
|
||||
@apply input-error;
|
||||
}
|
||||
|
||||
.form-select-error {
|
||||
@apply select;
|
||||
@apply select-bordered;
|
||||
@apply my-0;
|
||||
@apply w-full;
|
||||
@apply input-error;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
After Width: | Height: | Size: 276 B |
|
|
@ -0,0 +1,115 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { type PropType } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: { type: Array as PropType<string[]> },
|
||||
options: { type: Array as PropType<string[]> },
|
||||
labels: { type: Map as PropType<Map<string, string>>, default: () => {} },
|
||||
clearable: { type: Boolean, default: true },
|
||||
});
|
||||
|
||||
const emit = defineEmits(["updateModelValue"]);
|
||||
|
||||
const query = ref<string>("");
|
||||
|
||||
function onBadgeClicked(value: string) {
|
||||
if (props.model === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newval = props.model.includes(value)
|
||||
? props.model.filter((val) => val != value)
|
||||
: [...props.model, value];
|
||||
|
||||
emit("updateModelValue", newval);
|
||||
}
|
||||
|
||||
function onOptionClicked(value: string) {
|
||||
if (props.model === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newval = props.model?.includes(value)
|
||||
? props.model?.filter((val) => val !== value)
|
||||
: [...props.model, value];
|
||||
|
||||
query.value = "";
|
||||
emit("updateModelValue", newval);
|
||||
}
|
||||
|
||||
function showClear() {
|
||||
if (!props.clearable) {
|
||||
return false;
|
||||
}
|
||||
if (Array.isArray(props.model) && props.model?.length == 0) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function onClear() {
|
||||
emit("updateModelValue", []);
|
||||
}
|
||||
|
||||
function filteredOptions() {
|
||||
if (!query.value) return props.options;
|
||||
const lcquery = query.value.toLocaleLowerCase();
|
||||
return props.options?.filter((opt) =>
|
||||
opt.toLocaleLowerCase().startsWith(lcquery)
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="dropdown" class="combobox dropdown">
|
||||
<div
|
||||
class="input input-bordered flex h-fit min-h-[3rem] w-full flex-row items-stretch px-0 focus-within:outline focus-within:outline-2 focus-within:outline-offset-2"
|
||||
>
|
||||
<div class="mx-2 flex flex-wrap items-center">
|
||||
<div
|
||||
v-for="(value, idx) in model"
|
||||
:key="`${value}-${idx}`"
|
||||
class="badge m-1"
|
||||
>
|
||||
<button class="mr-2" @click="onBadgeClicked(value)">
|
||||
<font-awesome-icon icon="xmark" />
|
||||
</button>
|
||||
{{ labels?.get(value) ?? value }}
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
ref="input"
|
||||
v-model="query"
|
||||
class="input input-ghost h-auto min-w-[8ch] flex-1 border-0 p-0 focus:outline-0"
|
||||
role="combobox"
|
||||
type="text"
|
||||
/>
|
||||
<button
|
||||
v-show="showClear"
|
||||
class="btn btn-ghost h-auto self-stretch"
|
||||
@click="onClear"
|
||||
>
|
||||
<font-awesome-icon icon="xmark" />
|
||||
</button>
|
||||
</div>
|
||||
<ul
|
||||
class="menu dropdown-content z-10 w-full rounded-lg border border-neutral-content bg-base-100 p-0 shadow"
|
||||
>
|
||||
<li
|
||||
v-for="option in filteredOptions()"
|
||||
:key="option"
|
||||
role="option"
|
||||
class="m-0 p-0"
|
||||
>
|
||||
<button
|
||||
:class="{ active: model?.includes(option) }"
|
||||
@click="onOptionClicked(option)"
|
||||
>
|
||||
<font-awesome-icon v-show="model?.includes(option)" icon="check" />
|
||||
{{ option }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<script setup lang="ts">
|
||||
import { RouterLink } from "vue-router";
|
||||
import { currentUser, signOut } from "../pocketbase";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="navbar w-full bg-base-100 sm:border-b sm:border-b-neutral-200 flex flex-row place-content-center"
|
||||
>
|
||||
<div class="flex-1 flex-row">
|
||||
<RouterLink class="btn btn-ghost" to="/">Home</RouterLink>
|
||||
<RouterLink class="btn btn-ghost" to="/about">About</RouterLink>
|
||||
<RouterLink class="btn btn-ghost" to="/random">Random</RouterLink>
|
||||
<RouterLink class="btn btn-ghost" to="/list">List</RouterLink>
|
||||
<RouterLink class="btn btn-ghost" to="/create"
|
||||
>Create Restaurant</RouterLink
|
||||
>
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<div class="flex-none">
|
||||
<div class="flex flew-row" v-if="currentUser">
|
||||
<label>
|
||||
Logged in as {{ currentUser.username }}
|
||||
<button
|
||||
v-if="currentUser"
|
||||
@click="signOut"
|
||||
class="btn btn-ghost text-red-600"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<RouterLink v-else class="btn btn-ghost" to="/login">
|
||||
Sign In
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import * as L from "leaflet";
|
||||
|
||||
const initialMap = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
initialMap.value = L.map("map").setView([23.8041, 90.4152], 6);
|
||||
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||
maxZoom: 19,
|
||||
attribution:
|
||||
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||||
}).addTo(initialMap.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div id="map" style="height: 90vh"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<script setup lang="ts">
|
||||
import "../assets/datatable.css";
|
||||
|
||||
import DataTable from "datatables.net-vue3";
|
||||
import DataTablesCore from "datatables.net";
|
||||
import { PropType } from "vue";
|
||||
|
||||
DataTable.use(DataTablesCore);
|
||||
|
||||
const props = defineProps({
|
||||
data: { type: Array as PropType<Object[]> },
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{ data: "name", title: "Name" },
|
||||
{ data: "tags", title: "Tags" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DataTable
|
||||
class="table"
|
||||
:columns="columns"
|
||||
:data="props.data"
|
||||
:options="{
|
||||
layout: {
|
||||
top: ['pageLength', null, 'search'],
|
||||
topStart: null,
|
||||
topEnd: null,
|
||||
bottom: 'paging',
|
||||
bottomStart: null,
|
||||
bottomEnd: null,
|
||||
},
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import "./style.css";
|
||||
|
||||
import { createApp } from "vue";
|
||||
import { createPinia } from "pinia";
|
||||
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(createPinia());
|
||||
app.use(router);
|
||||
|
||||
app.mount("#app");
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import PocketBase from "pocketbase";
|
||||
import { ref } from "vue";
|
||||
|
||||
export const pb = new PocketBase("http://127.0.0.1:8080");
|
||||
|
||||
export const currentUser = ref();
|
||||
|
||||
pb.authStore.onChange(() => {
|
||||
currentUser.value = pb.authStore.model;
|
||||
}, true);
|
||||
|
||||
export function signOut() {
|
||||
pb.authStore.clear();
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import HomeView from "../views/HomeView.vue";
|
||||
|
||||
import { currentUser } from "../pocketbase";
|
||||
|
||||
async function redirectToLogin(to: any, from: any) {
|
||||
if (!currentUser.value) {
|
||||
return { name: "login" };
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
async function preventLoginAccess(to: any, from: any) {
|
||||
if (currentUser.value || from.name === undefined) {
|
||||
return { name: "home" };
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: "/",
|
||||
name: "home",
|
||||
component: HomeView,
|
||||
},
|
||||
{
|
||||
path: "/about",
|
||||
name: "about",
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (About.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import("../views/AboutView.vue"),
|
||||
beforeEnter: redirectToLogin,
|
||||
},
|
||||
{
|
||||
path: "/random",
|
||||
name: "random",
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (random.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import("../views/RandomView.vue"),
|
||||
beforeEnter: redirectToLogin,
|
||||
},
|
||||
{
|
||||
path: "/create",
|
||||
name: "create",
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (create.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import("../views/CreateView.vue"),
|
||||
beforeEnter: redirectToLogin,
|
||||
},
|
||||
{
|
||||
path: "/list",
|
||||
name: "list",
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (list.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import("../views/ListView.vue"),
|
||||
beforeEnter: redirectToLogin,
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
name: "login",
|
||||
component: () => import("../views/LoginView.vue"),
|
||||
beforeEnter: preventLoginAccess,
|
||||
},
|
||||
{
|
||||
path: "/signup",
|
||||
name: "signup",
|
||||
component: () => import("../views/SignUpView.vue"),
|
||||
beforeEnter: preventLoginAccess,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useCounterStore = defineStore('counter', () => {
|
||||
const count = ref(0)
|
||||
const doubleCount = computed(() => count.value * 2)
|
||||
function increment() {
|
||||
count.value++
|
||||
}
|
||||
|
||||
return { count, doubleCount, increment }
|
||||
})
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
@import "./assets/base.css";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
position: fixed;
|
||||
min-width: 100%;
|
||||
@apply m-0;
|
||||
@apply p-0;
|
||||
text-align: center;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<div class="flex flex-col place-content-center items-center h-full">
|
||||
<h1>DOXFOOD</h1>
|
||||
<h4>Developed by Eloi Zalczer</h4>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<script setup lang="ts">
|
||||
import { useForm } from "vee-validate";
|
||||
import { toTypedSchema } from "@vee-validate/yup";
|
||||
import * as yup from "yup";
|
||||
import "@/assets/form.css";
|
||||
|
||||
import { pb } from "../pocketbase.ts";
|
||||
import MultiSelectField from "../components/MultiSelectField.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
|
||||
const { meta, errors, handleSubmit, defineField, resetForm } = useForm({
|
||||
validationSchema: toTypedSchema(
|
||||
yup.object({
|
||||
name: yup.string().required("This field is required."),
|
||||
tags: yup.string().required("This field is required."),
|
||||
price_range: yup.string().required("This field is required."),
|
||||
})
|
||||
),
|
||||
});
|
||||
|
||||
const onSubmit = handleSubmit((values) => {
|
||||
pb.collection("restaurants").create(values);
|
||||
resetForm();
|
||||
});
|
||||
|
||||
const tagsModel = ref<string[]>([]);
|
||||
|
||||
const [name, nameAttrs] = defineField("name");
|
||||
const [tags, tagsAttrs] = defineField("tags");
|
||||
const [price, priceAttrs] = defineField("price_range");
|
||||
|
||||
onMounted(async () => {
|
||||
const tags = await pb.collection("tags").getFullList();
|
||||
tagsModel.value = tags.map((record) => record.name);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form
|
||||
class="flex flex-col place-content-center items-center h-full"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<div class="flex flex-row flex-nowrap">
|
||||
<div class="mx-5 my-4 w-full">
|
||||
<label class="form-label"> Name </label>
|
||||
<input
|
||||
:class="errors.name === undefined ? 'form-field' : 'form-field-error'"
|
||||
v-model="name"
|
||||
v-bind="nameAttrs"
|
||||
type="text"
|
||||
/>
|
||||
<label class="text-red-500">{{ errors.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row flex-nowrap">
|
||||
<div class="mx-5 my-4 w-full">
|
||||
<label class="form-label"> Tags </label>
|
||||
<MultiSelectField :model="tags" :options="tagsModel" />
|
||||
<input
|
||||
:class="
|
||||
errors.cuisine_type === undefined
|
||||
? 'form-field'
|
||||
: 'form-field-error'
|
||||
"
|
||||
v-model="cuisine"
|
||||
v-bind="cuisineAttrs"
|
||||
type="text"
|
||||
/>
|
||||
<label class="text-red-500">{{ errors.cuisine_type }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row flex-nowrap w-1/2 place-content-center">
|
||||
<div class="mx-5 my-4">
|
||||
<label class="form-label"> Price </label>
|
||||
<input
|
||||
:class="
|
||||
errors.price_range === undefined ? 'form-field' : 'form-field-error'
|
||||
"
|
||||
v-model="price"
|
||||
v-bind="priceAttrs"
|
||||
type="text"
|
||||
/>
|
||||
<label class="text-red-500">{{ errors.price_range }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-outline">Create</button>
|
||||
</form>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-column place-content-center items-center h-full">
|
||||
<h1 class="">DOXFOOD</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { pb } from "../pocketbase";
|
||||
import RestaurantsTable from "../components/RestaurantsTable.vue";
|
||||
import RestaurantsMap from "../components/RestaurantsMap.vue";
|
||||
|
||||
const data = ref<Object[]>([]);
|
||||
|
||||
onMounted(async () => {
|
||||
const restaurants = await pb.collection("restaurants").getFullList();
|
||||
data.value = restaurants;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col-reverse sm:flex-row">
|
||||
<div class="w-full flex-1">
|
||||
<RestaurantsTable :data="data" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<RestaurantsMap />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<script setup lang="ts">
|
||||
import { currentUser, pb } from "../pocketbase";
|
||||
import "@/assets/form.css";
|
||||
import { computed, ref } from "vue";
|
||||
|
||||
const username = ref<string>();
|
||||
const password = ref<string>();
|
||||
|
||||
const valid = computed(() => {
|
||||
return username.value !== undefined && password.value !== undefined;
|
||||
});
|
||||
|
||||
async function login() {
|
||||
if (!valid.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
await pb.collection("users").authWithPassword(username.value, password.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p v-if="currentUser">Signed in as {{ currentUser.username }}</p>
|
||||
<form
|
||||
v-else
|
||||
class="flex flex-col place-content-center items-center h-full"
|
||||
@submit.prevent=""
|
||||
>
|
||||
<div class="flex flex-row flex-nowrap">
|
||||
<div class="mx-5 my-4 w-full">
|
||||
<label class="form-label"> Username </label>
|
||||
<input class="form-field" type="text" v-model="username" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row flex-nowrap">
|
||||
<div class="mx-5 my-4 w-full">
|
||||
<label class="form-label"> Password </label>
|
||||
<input class="form-field" type="password" v-model="password" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button @click="login" :disabled="!valid">Log In</button>
|
||||
<p>
|
||||
New to DOXFOOD ? <RouterLink to="/signup">Create an account !</RouterLink>
|
||||
</p>
|
||||
</form>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
import { pb } from "../pocketbase.ts";
|
||||
|
||||
const restaurant = ref<string>();
|
||||
|
||||
async function getRandomRestaurant() {
|
||||
const result = await pb
|
||||
.collection("restaurants")
|
||||
.getFirstListItem("", { sort: "@random" });
|
||||
restaurant.value = result.name;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col place-content-center items-center h-full">
|
||||
<h2 class="mb-10" v-if="restaurant !== undefined">How about going to...</h2>
|
||||
<p class="">{{ restaurant }}</p>
|
||||
<button
|
||||
class="btn btn-outline btn-primary mt-10"
|
||||
@click="getRandomRestaurant"
|
||||
>
|
||||
Get random restaurant
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<script setup lang="ts">
|
||||
import { useForm } from "vee-validate";
|
||||
import { toTypedSchema } from "@vee-validate/yup";
|
||||
import * as yup from "yup";
|
||||
import { ref } from "vue";
|
||||
import { currentUser, pb } from "../pocketbase";
|
||||
import "@/assets/form.css";
|
||||
|
||||
const error = ref<string>();
|
||||
|
||||
const { meta, errors, handleSubmit, defineField, resetForm } = useForm({
|
||||
validationSchema: toTypedSchema(
|
||||
yup.object({
|
||||
username: yup.string().required("This field is required."),
|
||||
password: yup
|
||||
.string()
|
||||
.required("This field is required.")
|
||||
.min(8, "Password too short.")
|
||||
.max(72, "Password too long."),
|
||||
passwordConfirm: yup
|
||||
.string()
|
||||
.required("This field is required.")
|
||||
.oneOf([yup.ref("password")], "Passwords do not match."),
|
||||
})
|
||||
),
|
||||
});
|
||||
|
||||
const onSubmit = handleSubmit(async (values) => {
|
||||
try {
|
||||
const data = {
|
||||
username: values["username"],
|
||||
password: values["password"],
|
||||
passwordConfirm: values["passwordConfirm"],
|
||||
};
|
||||
|
||||
await pb.collection("users").create(data);
|
||||
await pb
|
||||
.collection("users")
|
||||
.authWithPassword(values["username"], values["password"]);
|
||||
} catch (err) {
|
||||
error.value = err;
|
||||
}
|
||||
});
|
||||
|
||||
const [username, usernameAttrs] = defineField("username");
|
||||
const [password, passwordAttrs] = defineField("password");
|
||||
const [passwordConfirm, passwordConfirmAttrs] = defineField("passwordConfirm");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p v-if="currentUser">Signed in as {{ currentUser.username }}</p>
|
||||
<form
|
||||
v-else
|
||||
class="flex flex-col place-content-center items-center h-full"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<div class="flex flex-row flex-nowrap">
|
||||
<div class="mx-5 my-4 w-full">
|
||||
<label class="form-label"> Username </label>
|
||||
<input
|
||||
class="form-field"
|
||||
type="text"
|
||||
v-model="username"
|
||||
v-bind="usernameAttrs"
|
||||
/>
|
||||
<label class="text-red-500">{{ errors.username }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row flex-nowrap">
|
||||
<div class="mx-5 my-4 w-full">
|
||||
<label class="form-label"> Password </label>
|
||||
<input
|
||||
class="form-field"
|
||||
type="password"
|
||||
v-model="password"
|
||||
v-bind="passwordAttrs"
|
||||
/>
|
||||
<label class="text-red-500">{{ errors.password }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row flex-nowrap">
|
||||
<div class="mx-5 my-4 w-full">
|
||||
<label class="form-label"> Confirm password </label>
|
||||
<input
|
||||
class="form-field"
|
||||
type="password"
|
||||
v-model="passwordConfirm"
|
||||
v-bind="passwordConfirmAttrs"
|
||||
/>
|
||||
<label class="text-red-500">{{ errors.passwordConfirm }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="error != undefined">{{ error }}</p>
|
||||
|
||||
<button class="btn btn-outline">Sign Up</button>
|
||||
</form>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require("daisyui")],
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { fileURLToPath, URL } from "node:url";
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
host: "127.0.0.1",
|
||||
cors: true,
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue