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 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))
|
// 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 {
|
type Plan struct {
|
||||||
ID uint `gorm:"primaryKey;autoIncrement:true" json:"id"`
|
ID uint `gorm:"primaryKey;autoIncrement:true" json:"id"`
|
||||||
Name string `json:"name"`
|
Name string `json:"name"`
|
||||||
Owner string `json:"owner"`
|
Owner string `json:"owner"`
|
||||||
Members []User `gorm:"many2many:user_plans;" json:"-"`
|
Description string `json:"description"`
|
||||||
Polls []Poll `gorm:"foreignKey:PlanID;references:ID" json:"-"`
|
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))
|
// 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