Compare commits
2 commits
98f3c2aedc
...
bce6857b12
| Author | SHA1 | Date | |
|---|---|---|---|
|
bce6857b12 | ||
|
|
496b51646e |
31 changed files with 6698 additions and 5 deletions
|
|
@ -11,11 +11,12 @@ type User struct {
|
|||
// CREATE TABLE plans(id INTEGER PRIMARY KEY AUTOINCREMENT, name STRING, owner STRING, FOREIGN KEY(owner) REFERENCES users(username))
|
||||
// CREATE TABLE plan_user_relations(username STRING, plan INTEGER, PRIMARY KEY(username, plan), FOREIGN KEY username REFERENCES user(username), FOREIGN KEY plan REFERENCES plans(id))
|
||||
type Plan struct {
|
||||
ID uint `gorm:"primaryKey;autoIncrement:true" json:"id"`
|
||||
Name string `json:"name"`
|
||||
Owner string `json:"owner"`
|
||||
Members []User `gorm:"many2many:user_plans;" json:"-"`
|
||||
Polls []Poll `gorm:"foreignKey:PlanID;references:ID" json:"-"`
|
||||
ID uint `gorm:"primaryKey;autoIncrement:true" json:"id"`
|
||||
Name string `json:"name"`
|
||||
Owner string `json:"owner"`
|
||||
Description string `json:"description"`
|
||||
Members []User `gorm:"many2many:user_plans;" json:"-"`
|
||||
Polls []Poll `gorm:"foreignKey:PlanID;references:ID" json:"-"`
|
||||
}
|
||||
|
||||
// CREATE TABLE polls(id INTEGER PRIMARY KEY AUTOINCREMENT, plan INTEGER, name STRING, options JSON, FOREIGN KEY plan REFERENCES plans(id))
|
||||
|
|
|
|||
6
ui/.editorconfig
Normal file
6
ui/.editorconfig
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
|
||||
charset = utf-8
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
30
ui/.gitignore
vendored
Normal file
30
ui/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
7
ui/.vscode/extensions.json
vendored
Normal file
7
ui/.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"EditorConfig.EditorConfig"
|
||||
]
|
||||
}
|
||||
39
ui/README.md
Normal file
39
ui/README.md
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
# planner
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Type Support for `.vue` Imports in TS
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lint with [ESLint](https://eslint.org/)
|
||||
|
||||
```sh
|
||||
npm run lint
|
||||
```
|
||||
1
ui/env.d.ts
vendored
Normal file
1
ui/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
19
ui/eslint.config.js
Normal file
19
ui/eslint.config.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import pluginVue from 'eslint-plugin-vue'
|
||||
import vueTsEslintConfig from '@vue/eslint-config-typescript'
|
||||
import oxlint from 'eslint-plugin-oxlint'
|
||||
|
||||
export default [
|
||||
{
|
||||
name: 'app/files-to-lint',
|
||||
files: ['**/*.{ts,mts,tsx,vue}'],
|
||||
},
|
||||
|
||||
{
|
||||
name: 'app/files-to-ignore',
|
||||
ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
|
||||
},
|
||||
|
||||
...pluginVue.configs['flat/essential'],
|
||||
...vueTsEslintConfig(),
|
||||
oxlint.configs['flat/recommended'],
|
||||
]
|
||||
13
ui/index.html
Normal file
13
ui/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
5987
ui/package-lock.json
generated
Normal file
5987
ui/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
46
ui/package.json
Normal file
46
ui/package.json
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"name": "planner",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build --force",
|
||||
"lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
|
||||
"lint:eslint": "eslint . --fix",
|
||||
"lint": "run-s lint:*"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.7.2",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.7.2",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.7.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.8",
|
||||
"pinia": "^2.2.6",
|
||||
"vue": "^3.5.12",
|
||||
"vue-router": "^4.4.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node22": "^22.0.0",
|
||||
"@types/node": "^22.9.0",
|
||||
"@vitejs/plugin-vue": "^5.1.4",
|
||||
"@vitejs/plugin-vue-jsx": "^4.0.1",
|
||||
"@vue/eslint-config-typescript": "^14.1.3",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.14.0",
|
||||
"eslint-plugin-oxlint": "^0.11.0",
|
||||
"eslint-plugin-vue": "^9.30.0",
|
||||
"npm-run-all2": "^7.0.1",
|
||||
"oxlint": "^0.11.0",
|
||||
"postcss": "^8.4.47",
|
||||
"tailwindcss": "^3.4.14",
|
||||
"typescript": "~5.6.3",
|
||||
"vite": "^5.4.10",
|
||||
"vite-plugin-vue-devtools": "^7.5.4",
|
||||
"vue-tsc": "^2.1.10"
|
||||
}
|
||||
}
|
||||
BIN
ui/public/favicon.ico
Normal file
BIN
ui/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
7
ui/src/App.vue
Normal file
7
ui/src/App.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterView />
|
||||
</template>
|
||||
1
ui/src/assets/logo.svg
Normal file
1
ui/src/assets/logo.svg
Normal file
|
|
@ -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 |
23
ui/src/components/PlanList.vue
Normal file
23
ui/src/components/PlanList.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
const plans = ref([])
|
||||
|
||||
fetch('/api/plans', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': 'Basic Zm9yY2VuOg=='
|
||||
}
|
||||
}).then(x => x.json())
|
||||
.then(x => plans.value = x)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
Lista de planes
|
||||
<div v-for="plan in plans">
|
||||
Plan numero {{ plan.id }} {{ plan.name }}
|
||||
<router-link :to="'/plan/' + plan.id">ir</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
11
ui/src/components/PollList.vue
Normal file
11
ui/src/components/PollList.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script setup>
|
||||
import PollRow from './polls/PollRow.vue'
|
||||
|
||||
const props = defineProps(['polls']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul>
|
||||
<PollRow v-for="poll in polls" :id="poll.id" :options="poll.options" />
|
||||
</ul>
|
||||
</template>
|
||||
100
ui/src/components/polls/PollRow.vue
Normal file
100
ui/src/components/polls/PollRow.vue
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useAccountStore } from '@/stores/account.ts';
|
||||
|
||||
const account = useAccountStore();
|
||||
const props = defineProps(['id', 'options',]);
|
||||
|
||||
const id = props.id;
|
||||
const opts = ref(props.options.split(','));
|
||||
const config_show = ref(false);
|
||||
const new_opts = ref([]);
|
||||
const votes = ref(false);
|
||||
|
||||
function toggle_config() {
|
||||
config_show.value = !config_show.value;
|
||||
if (!config_show.value) {
|
||||
console.log("Updating poll options with opts: ", opts);
|
||||
}
|
||||
}
|
||||
|
||||
function add_option() {
|
||||
new_opts.value = [...new_opts.value, ''];
|
||||
}
|
||||
|
||||
function delete_option(index) {
|
||||
opts.value.splice(index, 1);
|
||||
}
|
||||
|
||||
function convert(index) {
|
||||
opts.value = [...opts.value, new_opts.value[index]];
|
||||
new_opts.value.splice(index, 1);
|
||||
}
|
||||
|
||||
async function toggle_votes() {
|
||||
if (votes.value != false) {
|
||||
votes.value = false;
|
||||
} else {
|
||||
await fetch('/api/polls/' + id + '/votes', {
|
||||
headers: {
|
||||
'Authorization': 'Basic ' + btoa(account.account + ':')
|
||||
}
|
||||
}).then(x => x.json())
|
||||
.then(x => {
|
||||
let got_votes = {};
|
||||
for (const opt of opts.value) {
|
||||
got_votes[opt] = [];
|
||||
}
|
||||
for (const v of x) {
|
||||
got_votes[v.value].push(v.username_id);
|
||||
}
|
||||
let sorted_votes = [];
|
||||
for (const v in got_votes) {
|
||||
sorted_votes.push({ opt: v, voters: got_votes[v] });
|
||||
}
|
||||
sorted_votes.sort((a, b) => a.voters.length < b.voters.length)
|
||||
votes.value = sorted_votes;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li>
|
||||
<div class="flex flex-row my-2">
|
||||
<div class="grow">Poll {{ id }}</div>
|
||||
<div>
|
||||
<button class="border-0 px-2" @click="toggle_config">
|
||||
<font-awesome-icon v-if="!config_show" :icon="['fas', 'gear']" />
|
||||
<font-awesome-icon v-if="config_show" :icon="['fas', 'floppy-disk']" />
|
||||
</button>
|
||||
<button class="border-0 px-2" @click="add_option">
|
||||
<font-awesome-icon v-if="config_show" :icon="['fas', 'plus']" />
|
||||
</button>
|
||||
<button class="border-0 px-2" @click="toggle_votes">
|
||||
<font-awesome-icon :icon="['fas', 'eye']" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="config_show">
|
||||
Showing config
|
||||
<div class="flex" v-for="(option, index) in opts">
|
||||
<div class="grow">{{ option }}</div>
|
||||
<button class="text-slate-600 hover:text-white px-2" @click="delete_option(index)">
|
||||
<font-awesome-icon :icon="['fas', 'trash']" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex py-1" v-for="(opt, index) in new_opts" :key="index">
|
||||
<input class="grow" type="text" v-model="new_opts[index]" />
|
||||
<button class="px-2" @click="convert(index)">
|
||||
<font-awesome-icon :icon="['fas', 'floppy-disk']" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="votes">
|
||||
Showing votes
|
||||
<div v-for="vote in votes">{{ vote.opt }}: {{ vote.voters.length }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
11
ui/src/components/polls/PollView.vue
Normal file
11
ui/src/components/polls/PollView.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
const poll_id = route.params.pollid;
|
||||
</script>
|
||||
<template>
|
||||
<div class="p-4 flex flex-col justify-center">
|
||||
<h1 class="text-xl my-4">Poll {{ poll_id }}</h1>
|
||||
</div>
|
||||
</template>
|
||||
0
ui/src/components/polls/PollVote.vue
Normal file
0
ui/src/components/polls/PollVote.vue
Normal file
26
ui/src/main.ts
Normal file
26
ui/src/main.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import './styles.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core';
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
||||
import { faGear, faPenToSquare, faCheck, faPlus, faFloppyDisk, faTrash, faEye } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
library.add(faGear);
|
||||
library.add(faPenToSquare);
|
||||
library.add(faCheck);
|
||||
library.add(faPlus);
|
||||
library.add(faFloppyDisk);
|
||||
library.add(faTrash);
|
||||
library.add(faEye);
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
|
||||
app.component('font-awesome-icon', FontAwesomeIcon).mount('#app')
|
||||
37
ui/src/router/index.ts
Normal file
37
ui/src/router/index.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import HomeView from '@/views/HomeView.vue';
|
||||
import Plan from '@/views/Plan.vue';
|
||||
import { useAccountStore } from '@/stores/account';
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'app',
|
||||
beforeEnter: (to, from) => {
|
||||
const account = useAccountStore();
|
||||
if (account.account == "") return '/login';
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: HomeView,
|
||||
},
|
||||
{
|
||||
path: '/plan/:planid',
|
||||
name: 'plan',
|
||||
component: Plan
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('../views/Login.vue'),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export default router;
|
||||
31
ui/src/stores/account.ts
Normal file
31
ui/src/stores/account.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
|
||||
import { ref } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
export const useAccountStore = defineStore('account', () => {
|
||||
const account = ref(sessionStorage.getItem('account') || '');
|
||||
const name = ref('');
|
||||
async function login(username: string, password: string) {
|
||||
const login_rsp = await fetch('/api/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username, password
|
||||
})
|
||||
}).then(x => {
|
||||
if (x.status != 200) {
|
||||
throw "Login error";
|
||||
}
|
||||
return x.json();
|
||||
});
|
||||
if (login_rsp['username']) {
|
||||
sessionStorage.setItem('account', username);
|
||||
account.value = username;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return { account, name, login };
|
||||
});
|
||||
12
ui/src/stores/counter.ts
Normal file
12
ui/src/stores/counter.ts
Normal file
|
|
@ -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 }
|
||||
})
|
||||
82
ui/src/styles.css
Normal file
82
ui/src/styles.css
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: white;
|
||||
--color-text: black;
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: black;
|
||||
--color-text: white;
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
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;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@apply bg-gray-700 p-2 rounded;
|
||||
}
|
||||
|
||||
|
||||
9
ui/src/views/HomeView.vue
Normal file
9
ui/src/views/HomeView.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import PlanList from '../components/PlanList.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<PlanList />
|
||||
</main>
|
||||
</template>
|
||||
47
ui/src/views/Login.vue
Normal file
47
ui/src/views/Login.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useAccountStore } from '../stores/account.ts';
|
||||
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
const error = ref(false);
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
const account = useAccountStore();
|
||||
|
||||
async function login_handler() {
|
||||
try {
|
||||
error.value = false;
|
||||
await account.login(username.value, password.value);
|
||||
router.push("/");
|
||||
} catch (e) {
|
||||
console.error("unable to log in", e);
|
||||
error.value = true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full flex" style="place-items: center; justify-content: center;">
|
||||
<div class="border dark:border-gray-700 rounded-lg p-4 flex flex-col items-center">
|
||||
<img src="../assets/logo.svg" alt="" class="w-32 h-32" />
|
||||
<label class="w-full mx-2">
|
||||
Username
|
||||
</label>
|
||||
<input type="text" class="p-2 my-2 rounded dark:bg-gray-800" v-model="username">
|
||||
<label class="w-full mx-2">
|
||||
Password
|
||||
</label>
|
||||
<input type="password" class="p-2 my-2 rounded dark:bg-gray-800" v-model="password">
|
||||
<div v-if="error">
|
||||
Failed to log in
|
||||
</div>
|
||||
<button @click="login_handler"
|
||||
class="border rounded w-full p-2 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 mt-4">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
55
ui/src/views/Plan.vue
Normal file
55
ui/src/views/Plan.vue
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import PollList from '../components/PollList.vue';
|
||||
|
||||
import { useAccountStore } from '@/stores/account.ts';
|
||||
|
||||
const route = useRoute();
|
||||
const plan_id = route.params.planid;
|
||||
const account = useAccountStore();
|
||||
|
||||
const plan_name = ref('');
|
||||
const organizer = ref('');
|
||||
const description = ref('');
|
||||
|
||||
const polls = ref([]);
|
||||
|
||||
fetch('/api/plans/' + plan_id, {
|
||||
headers: {
|
||||
'Authorization': 'Basic ' + btoa(account.account + ':')
|
||||
}
|
||||
}).then(x => x.json())
|
||||
.then(x => {
|
||||
organizer.value = x.owner;
|
||||
plan_name.value = x.name;
|
||||
description.value = x.description;
|
||||
})
|
||||
|
||||
fetch('/api/plans/' + plan_id + '/polls', {
|
||||
headers: {
|
||||
'Authorization': 'Basic ' + btoa(account.account + ':')
|
||||
}
|
||||
}).then(x => x.json())
|
||||
.then(x => {
|
||||
polls.value = x;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="flex my-4 p-4 bg-gray-800 rounded-xl">
|
||||
<img class="w-64 h-64 border" />
|
||||
<div class="p-4 flex flex-col justify-center">
|
||||
<h1 class="text-xl my-4">Plan {{ plan_name }}</h1>
|
||||
<h2>Organizado por {{ organizer }}</h2>
|
||||
<p>{{ description }}</p>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex flex-col my-4 p-4">
|
||||
<h1 class="p-4 bg-gray-700 rounded-t-xl text-lg">Polls</h1>
|
||||
<div class="p-4 bg-gray-800 rounded-b-xl">
|
||||
<PollList :polls="polls" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
12
ui/tailwind.config.js
Normal file
12
ui/tailwind.config.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}"
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
14
ui/tsconfig.app.json
Normal file
14
ui/tsconfig.app.json
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
11
ui/tsconfig.json
Normal file
11
ui/tsconfig.json
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
19
ui/tsconfig.node.json
Normal file
19
ui/tsconfig.node.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"extends": "@tsconfig/node22/tsconfig.json",
|
||||
"include": [
|
||||
"vite.config.*",
|
||||
"vitest.config.*",
|
||||
"cypress.config.*",
|
||||
"nightwatch.conf.*",
|
||||
"playwright.config.*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"noEmit": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
36
ui/vite.config.ts
Normal file
36
ui/vite.config.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import tailwind from "tailwindcss"
|
||||
import autoprefixer from "autoprefixer"
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueJsx(),
|
||||
vueDevTools(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
},
|
||||
},
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [tailwind, autoprefixer]
|
||||
}
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://localhost:8080",
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/api/, '')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue