V2
This commit is contained in:
Martin Pander
1
frontend/.dockerignore
Normal file
1
frontend/.dockerignore
Normal file
@ -0,0 +1 @@
|
||||
node_modules
|
||||
13
frontend/.eslintignore
Normal file
13
frontend/.eslintignore
Normal file
@ -0,0 +1,13 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
31
frontend/.eslintrc.cjs
Normal file
31
frontend/.eslintrc.cjs
Normal file
@ -0,0 +1,31 @@
|
||||
/** @type { import("eslint").Linter.FlatConfig } */
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:svelte/recommended',
|
||||
'prettier'
|
||||
],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['@typescript-eslint'],
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2020,
|
||||
extraFileExtensions: ['.svelte']
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
es2017: true,
|
||||
node: true
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.svelte'],
|
||||
parser: 'svelte-eslint-parser',
|
||||
parserOptions: {
|
||||
parser: '@typescript-eslint/parser'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
10
frontend/.gitignore
vendored
Normal file
10
frontend/.gitignore
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
1
frontend/.npmrc
Normal file
1
frontend/.npmrc
Normal file
@ -0,0 +1 @@
|
||||
engine-strict=true
|
||||
13
frontend/.prettierignore
Normal file
13
frontend/.prettierignore
Normal file
@ -0,0 +1,13 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
8
frontend/.prettierrc
Normal file
8
frontend/.prettierrc
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"useTabs": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
"plugins": ["prettier-plugin-svelte"],
|
||||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||
}
|
||||
45
frontend/Dockerfile
Normal file
45
frontend/Dockerfile
Normal file
@ -0,0 +1,45 @@
|
||||
# Step 1: Build the application
|
||||
FROM node:18 AS build
|
||||
|
||||
ARG VITE_API_HOST
|
||||
ARG VITE_API_PORT
|
||||
|
||||
# Use ARG to Set ENV (if needed)
|
||||
ENV VITE_API_HOST=${VITE_API_HOST}
|
||||
ENV VITE_API_PORT=${VITE_API_PORT}
|
||||
|
||||
# Set the working directory
|
||||
WORKDIR /usr/src/app
|
||||
|
||||
# Copy package.json and package-lock.json
|
||||
COPY package*.json ./
|
||||
|
||||
# Install dependencies
|
||||
RUN npm install
|
||||
|
||||
# Copy project files
|
||||
COPY . .
|
||||
|
||||
# Build the SvelteKit application
|
||||
RUN npm run build
|
||||
|
||||
# Step 2: Run the application
|
||||
FROM node:18
|
||||
|
||||
# Set the working directory
|
||||
WORKDIR /usr/src/app
|
||||
|
||||
# Copy package.json and package-lock.json
|
||||
COPY package*.json ./
|
||||
|
||||
# Install production dependencies only
|
||||
RUN npm install --production
|
||||
|
||||
# Copy built files from the build stage
|
||||
COPY --from=build /usr/src/app/build ./build
|
||||
|
||||
# Expose the port the app runs on
|
||||
EXPOSE 3000
|
||||
|
||||
# Define the command to run the app
|
||||
CMD ["node", "build"]
|
||||
@ -1,48 +1,38 @@
|
||||
# Svelte + TS + Vite
|
||||
# create-svelte
|
||||
|
||||
This template should help get you started developing with Svelte and TypeScript in Vite.
|
||||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
|
||||
|
||||
## Recommended IDE Setup
|
||||
## Creating a project
|
||||
|
||||
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
|
||||
If you're seeing this, you've probably already done this step. Congrats!
|
||||
|
||||
## Need an official Svelte framework?
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npm create svelte@latest
|
||||
|
||||
Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
|
||||
|
||||
## Technical considerations
|
||||
|
||||
**Why use this over SvelteKit?**
|
||||
|
||||
- It brings its own routing solution which might not be preferable for some users.
|
||||
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
|
||||
`vite dev` and `vite build` wouldn't work in a SvelteKit environment, for example.
|
||||
|
||||
This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
|
||||
|
||||
Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
|
||||
|
||||
**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
|
||||
|
||||
Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
|
||||
|
||||
**Why include `.vscode/extensions.json`?**
|
||||
|
||||
Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
|
||||
|
||||
**Why enable `allowJs` in the TS template?**
|
||||
|
||||
While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
|
||||
|
||||
**Why is HMR not preserving my local component state?**
|
||||
|
||||
HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
|
||||
|
||||
If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
|
||||
|
||||
```ts
|
||||
// store.ts
|
||||
// An extremely simple external store
|
||||
import { writable } from 'svelte/store'
|
||||
export default writable(0)
|
||||
# create a new project in my-app
|
||||
npm create svelte@latest my-app
|
||||
```
|
||||
|
||||
## Developing
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To create a production version of your app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
<!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 + Svelte + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
6338
frontend/package-lock.json
generated
6338
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,24 +1,37 @@
|
||||
{
|
||||
"name": "dash_app",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host 0.0.0.0",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^1.0.1",
|
||||
"@tsconfig/svelte": "^3.0.0",
|
||||
"shortid": "^2.2.16",
|
||||
"svelte": "^3.49.0",
|
||||
"svelte-check": "^2.8.0",
|
||||
"svelte-dnd-action": "^0.9.21",
|
||||
"svelte-preprocess": "^4.10.7",
|
||||
"tslib": "^2.4.0",
|
||||
"typescript": "^4.6.4",
|
||||
"vite": "^3.0.7"
|
||||
}
|
||||
"name": "frontend",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev --host 0.0.0.0",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --check . && eslint .",
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^2.0.0",
|
||||
"@sveltejs/adapter-node": "^1.3.1",
|
||||
"@sveltejs/kit": "^1.27.4",
|
||||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||
"@typescript-eslint/parser": "^6.0.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-config-prettier": "^9.0.0",
|
||||
"eslint-plugin-svelte": "^2.30.0",
|
||||
"postcss": "^8.4.32",
|
||||
"prettier": "^3.0.0",
|
||||
"prettier-plugin-svelte": "^3.0.0",
|
||||
"shortid": "^2.2.16",
|
||||
"svelte": "^4.2.7",
|
||||
"svelte-check": "^3.6.0",
|
||||
"svelte-dnd-action": "^0.9.33",
|
||||
"tailwindcss": "^3.3.6",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^4.4.2"
|
||||
},
|
||||
"type": "module"
|
||||
}
|
||||
|
||||
6
frontend/postcss.config.js
Normal file
6
frontend/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1,55 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Main from './components/Main.svelte'
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<Main/>
|
||||
</main>
|
||||
|
||||
<!--
|
||||
<script>
|
||||
import svelteLogo from './assets/svelte.svg'
|
||||
import Counter from './lib/Counter.svelte'
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div>
|
||||
<a href="https://vitejs.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo" alt="Vite Logo" />
|
||||
</a>
|
||||
<a href="https://svelte.dev" target="_blank">
|
||||
<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<h1>Vite + Svelte</h1>
|
||||
|
||||
<div class="card">
|
||||
<Counter />
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank">SvelteKit</a>, the official Svelte app framework powered by Vite!
|
||||
</p>
|
||||
|
||||
<p class="read-the-docs">
|
||||
Click on the Vite and Svelte logos to learn more
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.svelte:hover {
|
||||
filter: drop-shadow(0 0 2em #ff3e00aa);
|
||||
}
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
-->
|
||||
@ -1,81 +1,19 @@
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
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;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: top;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
@apply bg-slate-50;
|
||||
@apply text-slate-900;
|
||||
@apply dark:bg-slate-800;
|
||||
@apply dark:text-slate-50;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.6em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
@apply text-slate-900;
|
||||
@apply dark:text-slate-50;
|
||||
@apply stroke-slate-900;
|
||||
@apply dark:stroke-slate-50;
|
||||
@apply fill-slate-900;
|
||||
@apply dark:fill-slate-50;
|
||||
}
|
||||
12
frontend/src/app.d.ts
vendored
Normal file
12
frontend/src/app.d.ts
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
12
frontend/src/app.html
Normal file
12
frontend/src/app.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"/></svg>
|
||||
|
Before Width: | Height: | Size: 655 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M400 64h-48V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v52H160V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v52H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 400H54a6 6 0 0 1-6-6V160h352v298a6 6 0 0 1-6 6zm-52.849-200.65L198.842 404.519c-4.705 4.667-12.303 4.637-16.971-.068l-75.091-75.699c-4.667-4.705-4.637-12.303.068-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l44.104 44.461 111.072-110.181c4.705-4.667 12.303-4.637 16.971.068l22.536 22.718c4.667 4.705 4.636 12.303-.069 16.97z"/></svg>
|
||||
|
Before Width: | Height: | Size: 792 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M436 160H12c-6.627 0-12-5.373-12-12v-36c0-26.51 21.49-48 48-48h48V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h128V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h48c26.51 0 48 21.49 48 48v36c0 6.627-5.373 12-12 12zM12 192h424c6.627 0 12 5.373 12 12v260c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V204c0-6.627 5.373-12 12-12zm333.296 95.947l-28.169-28.398c-4.667-4.705-12.265-4.736-16.97-.068L194.12 364.665l-45.98-46.352c-4.667-4.705-12.266-4.736-16.971-.068l-28.397 28.17c-4.705 4.667-4.736 12.265-.068 16.97l82.601 83.269c4.667 4.705 12.265 4.736 16.97.068l142.953-141.805c4.705-4.667 4.736-12.265.068-16.97z"/></svg>
|
||||
|
Before Width: | Height: | Size: 851 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z"/></svg>
|
||||
|
Before Width: | Height: | Size: 683 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/></svg>
|
||||
|
Before Width: | Height: | Size: 455 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
|
||||
|
Before Width: | Height: | Size: 498 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M64 360c30.9 0 56 25.1 56 56s-25.1 56-56 56s-56-25.1-56-56s25.1-56 56-56zm0-160c30.9 0 56 25.1 56 56s-25.1 56-56 56s-56-25.1-56-56s25.1-56 56-56zM120 96c0 30.9-25.1 56-56 56S8 126.9 8 96S33.1 40 64 40s56 25.1 56 56z"/></svg>
|
||||
|
Before Width: | Height: | Size: 463 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm64 236c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-64c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-72v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm96-114.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"/></svg>
|
||||
|
Before Width: | Height: | Size: 694 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M421.6 379.9c-.6641 0-1.35 .0625-2.049 .1953c-11.24 2.143-22.37 3.17-33.32 3.17c-94.81 0-174.1-77.14-174.1-175.5c0-63.19 33.79-121.3 88.73-152.6c8.467-4.812 6.339-17.66-3.279-19.44c-11.2-2.078-29.53-3.746-40.9-3.746C132.3 31.1 32 132.2 32 256c0 123.6 100.1 224 223.8 224c69.04 0 132.1-31.45 173.8-82.93C435.3 389.1 429.1 379.9 421.6 379.9zM255.8 432C158.9 432 80 353 80 256c0-76.32 48.77-141.4 116.7-165.8C175.2 125 163.2 165.6 163.2 207.8c0 99.44 65.13 183.9 154.9 212.8C298.5 428.1 277.4 432 255.8 432z"/></svg>
|
||||
|
Before Width: | Height: | Size: 752 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>
|
||||
|
Before Width: | Height: | Size: 518 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M560 160c44.2 0 80-35.8 80-80s-35.8-80-80-80s-80 35.8-80 80s35.8 80 80 80zM55.9 512H381.1h75H578.9c33.8 0 61.1-27.4 61.1-61.1c0-11.2-3.1-22.2-8.9-31.8l-132-216.3C495 196.1 487.8 192 480 192s-15 4.1-19.1 10.7l-48.2 79L286.8 81c-6.6-10.6-18.3-17-30.8-17s-24.1 6.4-30.8 17L8.6 426.4C3 435.3 0 445.6 0 456.1C0 487 25 512 55.9 512z"/></svg>
|
||||
|
Before Width: | Height: | Size: 574 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"/></svg>
|
||||
|
Before Width: | Height: | Size: 461 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M505.2 324.8l-47.73-68.78l47.75-68.81c7.359-10.62 8.797-24.12 3.844-36.06c-4.969-11.94-15.52-20.44-28.22-22.72l-82.39-14.88l-14.89-82.41c-2.281-12.72-10.76-23.25-22.69-28.22c-11.97-4.936-25.42-3.498-36.12 3.844L256 54.49L187.2 6.709C176.5-.6016 163.1-2.039 151.1 2.896c-11.92 4.971-20.4 15.5-22.7 28.19l-14.89 82.44L31.15 128.4C18.42 130.7 7.854 139.2 2.9 151.2C-2.051 163.1-.5996 176.6 6.775 187.2l47.73 68.78l-47.75 68.81c-7.359 10.62-8.795 24.12-3.844 36.06c4.969 11.94 15.52 20.44 28.22 22.72l82.39 14.88l14.89 82.41c2.297 12.72 10.78 23.25 22.7 28.22c11.95 4.906 25.44 3.531 36.09-3.844L256 457.5l68.83 47.78C331.3 509.7 338.8 512 346.3 512c4.906 0 9.859-.9687 14.56-2.906c11.92-4.969 20.4-15.5 22.7-28.19l14.89-82.44l82.37-14.88c12.73-2.281 23.3-10.78 28.25-22.75C514.1 348.9 512.6 335.4 505.2 324.8zM456.8 339.2l-99.61 18l-18 99.63L256 399.1L172.8 456.8l-18-99.63l-99.61-18L112.9 255.1L55.23 172.8l99.61-18l18-99.63L256 112.9l83.15-57.75l18.02 99.66l99.61 18L399.1 255.1L456.8 339.2zM256 143.1c-61.85 0-111.1 50.14-111.1 111.1c0 61.85 50.15 111.1 111.1 111.1s111.1-50.14 111.1-111.1C367.1 194.1 317.8 143.1 256 143.1zM256 319.1c-35.28 0-63.99-28.71-63.99-63.99S220.7 192 256 192s63.99 28.71 63.99 63.1S291.3 319.1 256 319.1z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"/></svg>
|
||||
|
Before Width: | Height: | Size: 910 B |
@ -1,33 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { curTab } from '../stores/appStore';
|
||||
import Journal from './journal/Journal.svelte';
|
||||
import Plan from './plan/Plan.svelte';
|
||||
</script>
|
||||
|
||||
<div class="main">
|
||||
<!--
|
||||
<svelte:component this={$curTab}/> -->
|
||||
{#if $curTab==="Journal"}
|
||||
<Journal/>
|
||||
{:else if $curTab=="Plan"}
|
||||
<Plan/>
|
||||
<!-- {:else if $curTab=="Tracking"} -->
|
||||
<!-- <Tracking/> -->
|
||||
<!-- {:else if $curTab=="Inbox"} -->
|
||||
<!-- <Note/> -->
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.main {
|
||||
/* margin: 1rem; */
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
<script lang="ts">
|
||||
import { curTab } from '../stores/appStore';
|
||||
import Tracking from './tracking/Tracking.svelte';
|
||||
import Note from './note/Note.svelte';
|
||||
</script>
|
||||
|
||||
-->
|
||||
@ -1,10 +0,0 @@
|
||||
<script lang="ts">
|
||||
let count: number = 0
|
||||
const increment = () => {
|
||||
count += 1
|
||||
}
|
||||
</script>
|
||||
|
||||
<button on:click={increment}>
|
||||
count is {count}
|
||||
</button>
|
||||
@ -1,33 +0,0 @@
|
||||
<script lang="ts">
|
||||
import leftImg from '../assets/chevron-left-solid.svg'
|
||||
import rightImg from '../assets/chevron-right-solid.svg'
|
||||
|
||||
import { currentDate, dateUpdate } from '../stores/appStore';
|
||||
import { getClientDateRep } from '../modules/dateHelpers';
|
||||
import InvertableButton from './inputs/InvertableButton.svelte';
|
||||
|
||||
async function setDate(day: number) {
|
||||
var newDate = new Date($currentDate);
|
||||
newDate.setDate(newDate.getDate() + day);
|
||||
currentDate.set(newDate);
|
||||
$dateUpdate();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="DatePicker">
|
||||
<InvertableButton label="left" icon={leftImg} clickHandler={() => {setDate(-1);}}/>
|
||||
{getClientDateRep($currentDate)}
|
||||
<InvertableButton label="right" icon={rightImg} clickHandler={() => {setDate(1);}}/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.DatePicker {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* for horizontal aligning of child divs */
|
||||
justify-content: center;
|
||||
/* for vertical aligning */
|
||||
align-items: center;
|
||||
/* width: 100%; */
|
||||
}
|
||||
</style>
|
||||
@ -1,23 +0,0 @@
|
||||
<script lang="ts">
|
||||
import TabBar from './tabs/TabBar.svelte';
|
||||
import Body from './Body.svelte';
|
||||
</script>
|
||||
|
||||
<div class="Main">
|
||||
<TabBar/>
|
||||
<Body/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.Main {
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
/* position: relative; */
|
||||
}
|
||||
|
||||
@media screen and (min-width: 550px) {
|
||||
.Main {
|
||||
width: 550px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,25 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Text from './InputText.svelte';
|
||||
import Real from './InputReal.svelte';
|
||||
import Bool from './InputBool.svelte';
|
||||
import Select from './InputSelect.svelte';
|
||||
|
||||
export let type : string = '';
|
||||
export let selectables : string = '';
|
||||
export let val : any = null;
|
||||
export let onInput : () => void;
|
||||
export let onFocus : () => void;
|
||||
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if type === "text"}
|
||||
<Text bind:val onInput={onInput} onFocus={onFocus} />
|
||||
{:else if type === "real"}
|
||||
<Real bind:val onInput={onInput}/>
|
||||
{:else if type === "bool"}
|
||||
<Bool bind:val onInput={onInput}/>
|
||||
{:else if type === "select"}
|
||||
<Select bind:val bind:selectables onInput={onInput}/>
|
||||
{/if}
|
||||
</div>
|
||||
@ -1,8 +0,0 @@
|
||||
<script lang="ts">
|
||||
|
||||
export let val : boolean = false;
|
||||
export let onInput : () => void;
|
||||
|
||||
</script>
|
||||
|
||||
<input type="checkbox" on:input={onInput} bind:checked={val}/>
|
||||
@ -1,21 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let selectables : string = '';
|
||||
export let val : string = null;
|
||||
export let onInput : () => void;
|
||||
|
||||
$: {
|
||||
if (val === null) {
|
||||
val = "";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-onchange -->
|
||||
<select bind:value={val} on:change={onInput}>
|
||||
<option value=""></option>
|
||||
{#each selectables.split(';') as opt}
|
||||
<option value={opt}>
|
||||
{opt}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
@ -1,32 +0,0 @@
|
||||
<script lang="ts">
|
||||
import InvertableIcon from "./InvertableIcon.svelte";
|
||||
|
||||
|
||||
export let label: string;
|
||||
export let icon: string;
|
||||
export let clickHandler: () => void;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<button class="InvertableButton" on:click={clickHandler}>
|
||||
<InvertableIcon bind:label bind:icon/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.InvertableButton {
|
||||
border: None;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
.InvertableButton:active {
|
||||
filter:invert(50%);
|
||||
/* background-color: #3e8e41;
|
||||
box-shadow: 0 5px #666;
|
||||
transform: translateY(4px); */
|
||||
}
|
||||
</style>
|
||||
@ -1,14 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let label: string;
|
||||
export let icon: string;
|
||||
</script>
|
||||
|
||||
<img class="InvertableIcon" alt={label} src={icon} height=100% width=100%/>
|
||||
|
||||
<style>
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.InvertableIcon {
|
||||
filter:invert(100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,18 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let value : any;
|
||||
export let onInput : () => void;
|
||||
</script>
|
||||
|
||||
<!-- <div class="shadowed"> -->
|
||||
<div>
|
||||
<textarea bind:value on:keyup={onInput} cols=15 rows=3/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
textarea {
|
||||
margin: 10px;
|
||||
border: none;
|
||||
box-shadow: 1px 1px 4px grey;
|
||||
resize: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,157 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import shortid from 'shortid';
|
||||
|
||||
import sunSolid from '../../assets/sun-solid.svg';
|
||||
import sunRegular from '../../assets/sun-regular.svg';
|
||||
import mountainSun from '../../assets/mountain-sun-solid.svg';
|
||||
import moonSolid from '../../assets/moon-solid.svg';
|
||||
import type { PlanDay } from '../../dashclient'
|
||||
import { dateUpdate, currentDate } from '../../stores/appStore'
|
||||
import { planApi } from '../../stores/apiStore'
|
||||
import type { PlanItem } from '../../stores/planStore'
|
||||
import PlanDndList from './PlanDndList.svelte'
|
||||
import InvertableIcon from '../inputs/InvertableIcon.svelte';
|
||||
|
||||
let updateTimeout: NodeJS.Timeout;
|
||||
|
||||
interface DayItems {
|
||||
morning: Array<PlanItem>,
|
||||
midday: Array<PlanItem>,
|
||||
afternoon: Array<PlanItem>,
|
||||
evening: Array<PlanItem>
|
||||
}
|
||||
|
||||
let planDay: PlanDay = {
|
||||
date: $currentDate,
|
||||
morning: [],
|
||||
midday: [],
|
||||
afternoon: [],
|
||||
evening: []
|
||||
};
|
||||
|
||||
let planDayItems: DayItems = {
|
||||
morning: [],
|
||||
midday: [],
|
||||
afternoon: [],
|
||||
evening: []
|
||||
};
|
||||
|
||||
function arrayToItems(arr: Array<string>): Array<PlanItem> {
|
||||
let items: Array<PlanItem> = [];
|
||||
|
||||
if (arr) {
|
||||
arr.forEach((it) => {
|
||||
if (it.trim().length != 0) {
|
||||
items.push({id: shortid.generate(), text:it});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
function itemsToArray(items: Array<PlanItem>): Array<string> {
|
||||
let arr: Array<string> = [];
|
||||
|
||||
items.forEach((it) => {
|
||||
if (it.text.trim().length != 0) {
|
||||
arr.push(it.text);
|
||||
}
|
||||
})
|
||||
|
||||
return arr;
|
||||
}
|
||||
|
||||
function initPlanDay(plan: PlanDay) {
|
||||
console.log(plan);
|
||||
planDay = plan;
|
||||
planDayItems = {
|
||||
morning: arrayToItems(planDay.morning),
|
||||
midday: arrayToItems(planDay.midday),
|
||||
afternoon: arrayToItems(planDay.afternoon),
|
||||
evening: arrayToItems(planDay.evening)
|
||||
}
|
||||
}
|
||||
|
||||
function preparePlanDayForWrite(items: DayItems): PlanDay {
|
||||
planDay.morning = itemsToArray(items.morning);
|
||||
planDay.midday = itemsToArray(items.midday);
|
||||
planDay.afternoon = itemsToArray(items.afternoon);
|
||||
planDay.evening = itemsToArray(items.evening);
|
||||
|
||||
return planDay;
|
||||
}
|
||||
|
||||
async function fetchPlan() {
|
||||
planApi.getPlanDayForDate({'date': $currentDate}).then(resp => (initPlanDay(resp)));
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
$dateUpdate = fetchPlan;
|
||||
fetchPlan();
|
||||
});
|
||||
|
||||
function onInput() {
|
||||
console.log("input");
|
||||
clearTimeout(updateTimeout);
|
||||
|
||||
updateTimeout = setTimeout(function() {
|
||||
planApi.savePlanForDay({planDay: preparePlanDayForWrite(planDayItems)});
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="plan">
|
||||
<div class="timeOfDay">
|
||||
<div class="timeIcon">
|
||||
<InvertableIcon label="morgens" icon={sunRegular}/>
|
||||
</div>
|
||||
<PlanDndList bind:items={planDayItems.morning} onInput={onInput}/>
|
||||
</div>
|
||||
|
||||
<div class="timeOfDay">
|
||||
<div class="timeIcon">
|
||||
<InvertableIcon label="mittags" icon={sunSolid}/>
|
||||
</div>
|
||||
<PlanDndList bind:items={planDayItems.midday} onInput={onInput}/>
|
||||
</div>
|
||||
|
||||
<div class="timeOfDay">
|
||||
<div class="timeIcon">
|
||||
<InvertableIcon label="nachmittags" icon={mountainSun}/>
|
||||
</div>
|
||||
<PlanDndList bind:items={planDayItems.afternoon} onInput={onInput}/>
|
||||
</div>
|
||||
|
||||
<div class="timeOfDay">
|
||||
<div class="timeIcon">
|
||||
<InvertableIcon label="abends" icon={moonSolid}/>
|
||||
</div>
|
||||
<PlanDndList bind:items={planDayItems.evening} onInput={onInput}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.plan {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.timeOfDay {
|
||||
min-width: 130px;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.timeIcon {
|
||||
/* position: absolute;
|
||||
float: left; */
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
@ -1,43 +0,0 @@
|
||||
<script lang="ts">
|
||||
import penImg from '../../assets/pen-solid.svg'
|
||||
import calendarImg from '../../assets/calendar-check-regular.svg'
|
||||
import chartImg from '../../assets/chart-line-solid.svg'
|
||||
import fileImg from '../../assets/file-alt-solid.svg'
|
||||
import { curTab } from '../../stores/appStore';
|
||||
|
||||
import InvertableButton from '../inputs/InvertableButton.svelte';
|
||||
import DatePicker from '../DatePicker.svelte';
|
||||
|
||||
function clickHandler(tab: string) {
|
||||
curTab.set(tab)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="TabBar">
|
||||
<div class="datePicker">
|
||||
<DatePicker/>
|
||||
</div>
|
||||
<InvertableButton label="Journal" icon={penImg} clickHandler={()=>{clickHandler("Journal")}}/>
|
||||
<InvertableButton label="Plan" icon={calendarImg} clickHandler={()=>{clickHandler("Plan")}}/>
|
||||
<InvertableButton label="Tracking" icon={chartImg} clickHandler={()=>{clickHandler("Tracking")}}/>
|
||||
<InvertableButton label="Inbox" icon={fileImg} clickHandler={()=>{clickHandler("Inbox")}}/>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
<hr/>
|
||||
|
||||
<style>
|
||||
.TabBar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* for horizontal aligning of child divs */
|
||||
/* justify-content: center; */
|
||||
/* for vertical aligning */
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.datePicker {
|
||||
margin-right: auto;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +0,0 @@
|
||||
apis/DefaultApi.ts
|
||||
apis/index.ts
|
||||
index.ts
|
||||
models/JournalEntry.ts
|
||||
models/index.ts
|
||||
runtime.ts
|
||||
@ -1 +0,0 @@
|
||||
6.2.1-SNAPSHOT
|
||||
19
frontend/src/lib/components/BooleanInput.svelte
Normal file
19
frontend/src/lib/components/BooleanInput.svelte
Normal file
@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
export let selected: string = "false";
|
||||
export let onInput: (newValue) => void;
|
||||
|
||||
let isTrue: boolean = false;
|
||||
|
||||
function handleSelection(choice) {
|
||||
isTrue = choice;
|
||||
onInput(isTrue ? "true" : "false");
|
||||
}
|
||||
|
||||
$: isTrue = selected === "true";
|
||||
</script>
|
||||
|
||||
<div class="w-full grow flex">
|
||||
<button class={isTrue ? "w-full bg-slate-600 dark:bg-slate-200 text-slate-100 dark:text-slate-800" : "w-full bg-slate-200 dark:bg-slate-600 text-slate-800 dark:text-slate-100"} style="max-w-[130px]" on:click={() => handleSelection(!isTrue)}>
|
||||
{isTrue ? '☑️' : '🔲'}
|
||||
</button>
|
||||
</div>
|
||||
17
frontend/src/lib/components/ChoiceInput.svelte
Normal file
17
frontend/src/lib/components/ChoiceInput.svelte
Normal file
@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
export let choices: Array<string> = [];
|
||||
export let selected: string = "";
|
||||
export let onInput: (newValue) => void;
|
||||
|
||||
function handleSelection(choice) {
|
||||
selected = choice;
|
||||
onInput(selected);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="w-full grow flex">
|
||||
{#each choices as choice}
|
||||
<!-- <button class={choice == selected ? "w-full bg-slate-600 dark:bg-slate-200 text-slate-100 dark:text-slate-800" : "w-full bg-slate-200 dark:bg-slate-600 text-slate-800 dark:text-slate-100"} style="max-w-[130px]" on:click={() => {selected = choice; onInput();}}>{choice}</button> -->
|
||||
<button class={choice == selected ? "w-full bg-slate-600 dark:bg-slate-200 text-slate-100 dark:text-slate-800" : "w-full bg-slate-200 dark:bg-slate-600 text-slate-800 dark:text-slate-100"} style="max-w-[130px]" on:click={() => handleSelection(choice)}>{choice}</button>
|
||||
{/each}
|
||||
</div>
|
||||
24
frontend/src/lib/components/DatePicker.svelte
Normal file
24
frontend/src/lib/components/DatePicker.svelte
Normal file
@ -0,0 +1,24 @@
|
||||
<script lang="ts">
|
||||
import { currentDate, dateUpdate } from '../stores/appStore';
|
||||
import { getClientDateRep } from '../modules/dateHelpers';
|
||||
import InvertableIconButton from './InvertableIconButton.svelte';
|
||||
|
||||
async function setDate(day: number) {
|
||||
var newDate = new Date($currentDate);
|
||||
newDate.setDate(newDate.getDate() + day);
|
||||
currentDate.set(newDate);
|
||||
$dateUpdate();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex content-center justify-center">
|
||||
<div class="h-3.5 w-3.5 -mt-0.5">
|
||||
<InvertableIconButton label="left" icon="/chevron-left-solid.svg" clickHandler={() => {setDate(-1);}}/>
|
||||
</div>
|
||||
<div class="ml-2 mr-2">
|
||||
{getClientDateRep($currentDate)}
|
||||
</div>
|
||||
<div class="h-3.5 w-3.5 -mt-0.5">
|
||||
<InvertableIconButton label="right" icon="/chevron-right-solid.svg" clickHandler={() => {setDate(1);}}/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,9 +1,9 @@
|
||||
<script lang="ts">
|
||||
export let val : any;
|
||||
export let onInput : () => void;
|
||||
export let val : number;
|
||||
export let onInput : () => void = () => {};
|
||||
</script>
|
||||
|
||||
<input type="number" bind:value={val} on:keyup={onInput}/>
|
||||
<input type="number" step="1" bind:value={val} on:input={onInput}/>
|
||||
|
||||
<style>
|
||||
input[type=number] {
|
||||
9
frontend/src/lib/components/InvertableIcon.svelte
Normal file
9
frontend/src/lib/components/InvertableIcon.svelte
Normal file
@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
export let label: string;
|
||||
export let icon: string;
|
||||
</script>
|
||||
|
||||
<!-- <img class="InvertableIcon" alt={label} src={icon} height=100% width=100%/> -->
|
||||
<div class="h-full w-full">
|
||||
<img class="dark:invert" alt={label} src={icon}/>
|
||||
</div>
|
||||
50
frontend/src/lib/components/InvertableIconButton.svelte
Normal file
50
frontend/src/lib/components/InvertableIconButton.svelte
Normal file
@ -0,0 +1,50 @@
|
||||
<script lang="ts">
|
||||
import InvertableIcon from "./InvertableIcon.svelte";
|
||||
|
||||
|
||||
export let label: string;
|
||||
export let icon: string;
|
||||
export let clickHandler: () => void;
|
||||
</script>
|
||||
|
||||
<div class="h-full w-full text-center">
|
||||
<button class="border-none rounded-none bg-transparent p-0 m-0 h-full w-full" on:click={clickHandler}>
|
||||
<InvertableIcon bind:label bind:icon/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.InvertableButton {
|
||||
border: None;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
/* width: 2em;
|
||||
height: 2em; */
|
||||
padding: 0 0;
|
||||
margin: 0 0;
|
||||
line-height: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.InvertableButton:active {
|
||||
filter:invert(50%);
|
||||
/* background-color: #3e8e41;
|
||||
box-shadow: 0 5px #666;
|
||||
transform: translateY(4px); */
|
||||
}
|
||||
|
||||
.buttonDiv {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
/* position: relative; */
|
||||
/* top: 0%; */
|
||||
text-align: center;
|
||||
/* border: 1px solid red; */
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
/* div {
|
||||
border: 1px solid;
|
||||
} */
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import Text from './InputText.svelte';
|
||||
import * as TxtArr from '../../modules/arrayHelpers';
|
||||
import Text from './TextInput.svelte';
|
||||
import * as TxtArr from '../modules/arrayHelpers';
|
||||
|
||||
export let textArray : Array<string> = [];
|
||||
export let onInput : () => void;
|
||||
@ -24,11 +24,8 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- <div on:blur={onBlur}> -->
|
||||
<div>
|
||||
<div class="space-y-1">
|
||||
{#each textArray as inTxt}
|
||||
<!-- <Text bind:val={inTxt} onInput={updateInput} onBlur={onBlur}/> -->
|
||||
<!-- <Text bind:val={inTxt} onInput={updateInput} placeholder={"New Item"}/> -->
|
||||
<Text bind:val={inTxt} onInput={updateInput} onBlur={onBlur} placeholder={"New Item"}/>
|
||||
{/each}
|
||||
</div>
|
||||
@ -13,15 +13,14 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<input tabindex="1" type="text" placeholder={placeholder} bind:value={val} on:input={onInput} on:blur={onBlur} on:keypress={onKeypress} use:init size=10/>
|
||||
<!-- <input tabindex="1" type="text" placeholder={placeholder} bind:value={val} on:input={onInput} on:blur={onBlur} on:keypress={()=>{}} use:init size=10/> -->
|
||||
<input class="w-full border-b border-slate-950/50 dark:border-slate-50/50 bg-slate-50 dark:bg-slate-900 rounded-md" tabindex="1" type="text" placeholder={placeholder} bind:value={val} on:input={onInput} on:blur={onBlur} on:keypress={onKeypress} use:init size=10/>
|
||||
|
||||
<style>
|
||||
input[type=text] {
|
||||
/* input[type=text] {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: solid 1px grey;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
@ -4,11 +4,10 @@
|
||||
|
||||
import type { PlanItem } from '../../stores/planStore'
|
||||
import PlanInput from './PlanInput.svelte'
|
||||
import MultiItemTextInput from '../inputs/MultiItemTextInput.svelte'
|
||||
import Text from '../inputs/InputText.svelte';
|
||||
import Text from '../TextInput.svelte';
|
||||
import shortid from 'shortid'
|
||||
|
||||
export let items: Array<{id: number, text: string}> = [];
|
||||
export let items: Array<PlanItem> = [];
|
||||
export let onInput: () => void;
|
||||
|
||||
const flipDurationMs = 200;
|
||||
@ -46,42 +45,15 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="newItemInput">
|
||||
<div class="w-11/12">
|
||||
<Text bind:val={newItem} onInput={onInput} onBlur={onInputNewItem} onKeypress={onKeypress} placeholder={"New Item"}/>
|
||||
<!-- <MultiItemTextInput bind:textArray={newArray} onInput={onInput} onBlur={onInputNewItem}/> -->
|
||||
</div>
|
||||
<section contenteditable="true" use:dndzone={{items, flipDurationMs}} on:consider={handleSort} on:finalize={handleSort}>
|
||||
<!-- <div class="planItems"> -->
|
||||
{#each items as item(item.id)}
|
||||
<div class="planRow" animate:flip={{duration:flipDurationMs}}>
|
||||
<div class="planInput">
|
||||
<div class="min-h-4" animate:flip={{duration:flipDurationMs}}>
|
||||
<div class="w-11/12">
|
||||
<PlanInput bind:text={item.text} onInput={onInput}/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
<!-- </div> -->
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.planItems {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.planInput {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.planRow {
|
||||
/* display: flex; */
|
||||
width: 100%;
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
.newItemInput {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
</style>
|
||||
</section>
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import InputText from '../inputs/InputText.svelte'
|
||||
import InputText from '../TextInput.svelte'
|
||||
|
||||
export let text: string;
|
||||
export let onInput: () => void;
|
||||
@ -20,13 +20,7 @@
|
||||
{#if doEdit}
|
||||
<InputText bind:val={text} onInput={onInput} onBlur={handleBlur} doAutofocus={true}/>
|
||||
{:else}
|
||||
<div class="editableEntry" on:click={onClick}>
|
||||
<div class="w-full" on:click={onClick}>
|
||||
<b>{text}</b>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.editableEntry {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
{/if}
|
||||
123
frontend/src/lib/components/plan/PlanTodoDndList.svelte
Normal file
123
frontend/src/lib/components/plan/PlanTodoDndList.svelte
Normal file
@ -0,0 +1,123 @@
|
||||
<script lang="ts">
|
||||
import {dndzone, TRIGGERS, SHADOW_ITEM_MARKER_PROPERTY_NAME} from 'svelte-dnd-action';
|
||||
import {flip} from 'svelte/animate';
|
||||
|
||||
import type { PlanWeekItemItem } from '../../stores/planStore'
|
||||
import PlanTodoInput from './PlanTodoInput.svelte'
|
||||
import Text from '../TextInput.svelte';
|
||||
import shortid from 'shortid'
|
||||
|
||||
export let items: Array<PlanWeekItemItem> = [];
|
||||
export let onInput: () => void;
|
||||
|
||||
const flipDurationMs = 200;
|
||||
let shouldIgnoreDndEvents = false;
|
||||
|
||||
function handleConsider(e: any) {
|
||||
// let sortedItems: Array<PlanWeekItemItem> = [];
|
||||
|
||||
// e.detail.items.forEach((it: PlanWeekItemItem) => {
|
||||
// if (it.text.trim().length != 0) {
|
||||
// sortedItems.push(it);
|
||||
// }
|
||||
|
||||
// });
|
||||
|
||||
// items = sortedItems;
|
||||
|
||||
const {trigger, id} = e.detail.info;
|
||||
if (trigger === TRIGGERS.DRAG_STARTED) {
|
||||
console.warn(`copying ${id}`);
|
||||
const idx = items.findIndex(item => item.id === id);
|
||||
const newId = shortid.generate();
|
||||
// the line below was added in order to be compatible with version svelte-dnd-action 0.7.4 and above
|
||||
e.detail.items = e.detail.items.filter(item => !item[SHADOW_ITEM_MARKER_PROPERTY_NAME]);
|
||||
e.detail.items.splice(idx, 0, {...items[idx], id: newId});
|
||||
items = e.detail.items;
|
||||
shouldIgnoreDndEvents = true;
|
||||
}
|
||||
else if (!shouldIgnoreDndEvents) {
|
||||
let sortedItems: Array<PlanWeekItemItem> = [];
|
||||
|
||||
e.detail.items.forEach((it: PlanWeekItemItem) => {
|
||||
if (it.text.trim().length != 0) {
|
||||
sortedItems.push(it);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
items = sortedItems;
|
||||
// items = e.detail.items;
|
||||
}
|
||||
else {
|
||||
items = [...items];
|
||||
}
|
||||
|
||||
onInput();
|
||||
}
|
||||
|
||||
function handleSort(e: any) {
|
||||
let sortedItems: Array<PlanWeekItemItem> = [];
|
||||
|
||||
e.detail.items.forEach((it: PlanWeekItemItem) => {
|
||||
if (it.text.trim().length != 0) {
|
||||
sortedItems.push(it);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
items = sortedItems;
|
||||
|
||||
onInput();
|
||||
}
|
||||
|
||||
let newItem: string = "";
|
||||
|
||||
function onInputNewItem() {
|
||||
if (newItem.trim().length != 0) {
|
||||
items = [...items, {id: shortid.generate(), text: newItem}];
|
||||
}
|
||||
newItem = "";
|
||||
|
||||
onInput();
|
||||
}
|
||||
|
||||
function onKeypress(e: KeyboardEvent, ) {
|
||||
if(e.key == "Enter") {
|
||||
onInputNewItem();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="newItemInput">
|
||||
<Text bind:val={newItem} onInput={onInput} onBlur={onInputNewItem} onKeypress={onKeypress} placeholder={"New Item"}/>
|
||||
</div>
|
||||
<section contenteditable="true" use:dndzone={{items, flipDurationMs, dropFromOthersDisabled: true}} on:consider={handleConsider} on:finalize={handleSort}>
|
||||
{#each items as item(item.id)}
|
||||
<div class="planRow" animate:flip={{duration:flipDurationMs}}>
|
||||
<div class="planInput">
|
||||
<PlanTodoInput bind:text={item.text} bind:done={item.done} bind:todo={item.todo} onInput={onInput}/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.planInput {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.planRow {
|
||||
/* display: flex; */
|
||||
width: 100%;
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
.newItemInput {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
div {
|
||||
border: 1px solid;
|
||||
}
|
||||
</style>
|
||||
113
frontend/src/lib/components/plan/PlanTodoInput.svelte
Normal file
113
frontend/src/lib/components/plan/PlanTodoInput.svelte
Normal file
@ -0,0 +1,113 @@
|
||||
<script lang="ts">
|
||||
import InputText from '../TextInput.svelte'
|
||||
import InputInt from '../IntInput.svelte'
|
||||
import InvertableButton from '../InvertableIconButton.svelte';
|
||||
|
||||
export let text: string;
|
||||
export let todo: number = null;
|
||||
export let done: number = null;
|
||||
export let onInput: () => void;
|
||||
export let onBlur: () => void = () => {};
|
||||
|
||||
let doEdit: boolean = false;
|
||||
|
||||
function onClick() {
|
||||
doEdit = !doEdit;
|
||||
}
|
||||
|
||||
function handleBlur() {
|
||||
doEdit = !doEdit;
|
||||
onBlur();
|
||||
}
|
||||
|
||||
function saveEntry() {
|
||||
if (todo && !done) {
|
||||
done = 0;
|
||||
}
|
||||
onInput();
|
||||
doEdit = false;
|
||||
}
|
||||
|
||||
function deleteEntry() {
|
||||
text = "";
|
||||
todo = null;
|
||||
done = null;
|
||||
onInput();
|
||||
doEdit = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if doEdit}
|
||||
<!-- <InputText bind:val={text} onInput={onInput} onBlur={handleBlur} doAutofocus={true}/> <InputInt bind:val={done}/> <InputInt bind:val={todo}/> -->
|
||||
<div class="planTodoEntry">
|
||||
<div class="planTodoEntryText">
|
||||
<InputText bind:val={text} doAutofocus={true}/>
|
||||
</div>
|
||||
<div class="planTodoIntegerInput">
|
||||
<InputInt bind:val={done}/>
|
||||
</div>
|
||||
<div class="planTodoIntegerInput">
|
||||
<InputInt bind:val={todo}/>
|
||||
</div>
|
||||
<div class="planTodoButton">
|
||||
<InvertableButton label="Journal" icon="/check-solid.svg" clickHandler={saveEntry}/>
|
||||
</div>
|
||||
<div class="planTodoButton">
|
||||
<InvertableButton label="Journal" icon="/xmark-solid.svg" clickHandler={deleteEntry}/>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="editableEntry" on:click={onClick}>
|
||||
{#if todo}
|
||||
<div class="planTodoEntry">
|
||||
<div class="planTodoEntryText">
|
||||
<b>{text}</b>
|
||||
</div>
|
||||
<div class="planTodoEntryTodo">
|
||||
{done}/{todo}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="planTodoEntry">
|
||||
<div class="planTodoEntryText">
|
||||
<b>{text}</b>
|
||||
</div>
|
||||
<div class="planTodoEntryTodo">
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.editableEntry {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.planTodoEntry {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.planTodoEntryText {
|
||||
margin: 0 auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.planTodoButton {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.planTodoIntegerInput {
|
||||
flex-basis: 30px;
|
||||
}
|
||||
|
||||
.planTodoEntryTodo {
|
||||
min-width: 3rem;
|
||||
}
|
||||
|
||||
div {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
</style>
|
||||
119
frontend/src/lib/dashclient/apis/InboxApi.ts
Normal file
119
frontend/src/lib/dashclient/apis/InboxApi.ts
Normal file
@ -0,0 +1,119 @@
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
/**
|
||||
* Dash API
|
||||
* No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
|
||||
*
|
||||
* The version of the OpenAPI document: 0.1
|
||||
*
|
||||
*
|
||||
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
|
||||
* https://openapi-generator.tech
|
||||
* Do not edit the class manually.
|
||||
*/
|
||||
|
||||
|
||||
import * as runtime from '../runtime';
|
||||
import type {
|
||||
InboxItem,
|
||||
} from '../models';
|
||||
import {
|
||||
InboxItemFromJSON,
|
||||
InboxItemToJSON,
|
||||
} from '../models';
|
||||
|
||||
export interface AddInboxItemRequest {
|
||||
inboxItem: InboxItem;
|
||||
}
|
||||
|
||||
export interface DeleteInboxItemRequest {
|
||||
item: number;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export class InboxApi extends runtime.BaseAPI {
|
||||
|
||||
/**
|
||||
*/
|
||||
async addInboxItemRaw(requestParameters: AddInboxItemRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<void>> {
|
||||
if (requestParameters.inboxItem === null || requestParameters.inboxItem === undefined) {
|
||||
throw new runtime.RequiredError('inboxItem','Required parameter requestParameters.inboxItem was null or undefined when calling addInboxItem.');
|
||||
}
|
||||
|
||||
const queryParameters: any = {};
|
||||
|
||||
const headerParameters: runtime.HTTPHeaders = {};
|
||||
|
||||
headerParameters['Content-Type'] = 'application/json';
|
||||
|
||||
const response = await this.request({
|
||||
path: `/inbox/`,
|
||||
method: 'POST',
|
||||
headers: headerParameters,
|
||||
query: queryParameters,
|
||||
body: InboxItemToJSON(requestParameters.inboxItem),
|
||||
}, initOverrides);
|
||||
|
||||
return new runtime.VoidApiResponse(response);
|
||||
}
|
||||
|
||||
/**
|
||||
*/
|
||||
async addInboxItem(requestParameters: AddInboxItemRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<void> {
|
||||
await this.addInboxItemRaw(requestParameters, initOverrides);
|
||||
}
|
||||
|
||||
/**
|
||||
*/
|
||||
async deleteInboxItemRaw(requestParameters: DeleteInboxItemRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<void>> {
|
||||
if (requestParameters.item === null || requestParameters.item === undefined) {
|
||||
throw new runtime.RequiredError('item','Required parameter requestParameters.item was null or undefined when calling deleteInboxItem.');
|
||||
}
|
||||
|
||||
const queryParameters: any = {};
|
||||
|
||||
const headerParameters: runtime.HTTPHeaders = {};
|
||||
|
||||
const response = await this.request({
|
||||
path: `/inbox/{item}`.replace(`{${"item"}}`, encodeURIComponent(String(requestParameters.item))),
|
||||
method: 'DELETE',
|
||||
headers: headerParameters,
|
||||
query: queryParameters,
|
||||
}, initOverrides);
|
||||
|
||||
return new runtime.VoidApiResponse(response);
|
||||
}
|
||||
|
||||
/**
|
||||
*/
|
||||
async deleteInboxItem(requestParameters: DeleteInboxItemRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<void> {
|
||||
await this.deleteInboxItemRaw(requestParameters, initOverrides);
|
||||
}
|
||||
|
||||
/**
|
||||
*/
|
||||
async getInboxItemsRaw(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<Array<InboxItem>>> {
|
||||
const queryParameters: any = {};
|
||||
|
||||
const headerParameters: runtime.HTTPHeaders = {};
|
||||
|
||||
const response = await this.request({
|
||||
path: `/inbox/`,
|
||||
method: 'GET',
|
||||
headers: headerParameters,
|
||||
query: queryParameters,
|
||||
}, initOverrides);
|
||||
|
||||
return new runtime.JSONApiResponse(response, (jsonValue) => jsonValue.map(InboxItemFromJSON));
|
||||
}
|
||||
|
||||
/**
|
||||
*/
|
||||
async getInboxItems(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<Array<InboxItem>> {
|
||||
const response = await this.getInboxItemsRaw(initOverrides);
|
||||
return await response.value();
|
||||
}
|
||||
|
||||
}
|
||||
123
frontend/src/lib/dashclient/apis/TrackingApi.ts
Normal file
123
frontend/src/lib/dashclient/apis/TrackingApi.ts
Normal file
@ -0,0 +1,123 @@
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
/**
|
||||
* Dash API
|
||||
* No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
|
||||
*
|
||||
* The version of the OpenAPI document: 0.1
|
||||
*
|
||||
*
|
||||
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
|
||||
* https://openapi-generator.tech
|
||||
* Do not edit the class manually.
|
||||
*/
|
||||
|
||||
|
||||
import * as runtime from '../runtime';
|
||||
import type {
|
||||
TrackingCategories,
|
||||
TrackingEntry,
|
||||
} from '../models';
|
||||
import {
|
||||
TrackingCategoriesFromJSON,
|
||||
TrackingCategoriesToJSON,
|
||||
TrackingEntryFromJSON,
|
||||
TrackingEntryToJSON,
|
||||
} from '../models';
|
||||
|
||||
export interface GetTrackingEntryForDateRequest {
|
||||
date: Date;
|
||||
}
|
||||
|
||||
export interface WriteTrackingEntryRequest {
|
||||
trackingEntry: TrackingEntry;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export class TrackingApi extends runtime.BaseAPI {
|
||||
|
||||
/**
|
||||
*/
|
||||
async getTrackingCategoriesRaw(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<TrackingCategories>> {
|
||||
const queryParameters: any = {};
|
||||
|
||||
const headerParameters: runtime.HTTPHeaders = {};
|
||||
|
||||
const response = await this.request({
|
||||
path: `/tracking/categories`,
|
||||
method: 'GET',
|
||||
headers: headerParameters,
|
||||
query: queryParameters,
|
||||
}, initOverrides);
|
||||
|
||||
return new runtime.JSONApiResponse(response, (jsonValue) => TrackingCategoriesFromJSON(jsonValue));
|
||||
}
|
||||
|
||||
/**
|
||||
*/
|
||||
async getTrackingCategories(initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<TrackingCategories> {
|
||||
const response = await this.getTrackingCategoriesRaw(initOverrides);
|
||||
return await response.value();
|
||||
}
|
||||
|
||||
/**
|
||||
*/
|
||||
async getTrackingEntryForDateRaw(requestParameters: GetTrackingEntryForDateRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<TrackingEntry>> {
|
||||
if (requestParameters.date === null || requestParameters.date === undefined) {
|
||||
throw new runtime.RequiredError('date','Required parameter requestParameters.date was null or undefined when calling getTrackingEntryForDate.');
|
||||
}
|
||||
|
||||
const queryParameters: any = {};
|
||||
|
||||
const headerParameters: runtime.HTTPHeaders = {};
|
||||
|
||||
const response = await this.request({
|
||||
path: `/tracking/entry/{date}`.replace(`{${"date"}}`, encodeURIComponent(String(requestParameters.date.toISOString().substring(0,10)))),
|
||||
method: 'GET',
|
||||
headers: headerParameters,
|
||||
query: queryParameters,
|
||||
}, initOverrides);
|
||||
|
||||
return new runtime.JSONApiResponse(response, (jsonValue) => TrackingEntryFromJSON(jsonValue));
|
||||
}
|
||||
|
||||
/**
|
||||
*/
|
||||
async getTrackingEntryForDate(requestParameters: GetTrackingEntryForDateRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<TrackingEntry> {
|
||||
const response = await this.getTrackingEntryForDateRaw(requestParameters, initOverrides);
|
||||
return await response.value();
|
||||
}
|
||||
|
||||
/**
|
||||
*/
|
||||
async writeTrackingEntryRaw(requestParameters: WriteTrackingEntryRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<void>> {
|
||||
if (requestParameters.trackingEntry === null || requestParameters.trackingEntry === undefined) {
|
||||
throw new runtime.RequiredError('trackingEntry','Required parameter requestParameters.trackingEntry was null or undefined when calling writeTrackingEntry.');
|
||||
}
|
||||
|
||||
const queryParameters: any = {};
|
||||
|
||||
const headerParameters: runtime.HTTPHeaders = {};
|
||||
|
||||
headerParameters['Content-Type'] = 'application/json';
|
||||
|
||||
const response = await this.request({
|
||||
path: `/tracking/entry`,
|
||||
method: 'POST',
|
||||
headers: headerParameters,
|
||||
query: queryParameters,
|
||||
body: TrackingEntryToJSON(requestParameters.trackingEntry),
|
||||
}, initOverrides);
|
||||
|
||||
return new runtime.VoidApiResponse(response);
|
||||
}
|
||||
|
||||
/**
|
||||
*/
|
||||
async writeTrackingEntry(requestParameters: WriteTrackingEntryRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<void> {
|
||||
await this.writeTrackingEntryRaw(requestParameters, initOverrides);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,4 +1,6 @@
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
export * from './InboxApi';
|
||||
export * from './JournalApi';
|
||||
export * from './PlanApi';
|
||||
export * from './TrackingApi';
|
||||
74
frontend/src/lib/dashclient/models/InboxItem.ts
Normal file
74
frontend/src/lib/dashclient/models/InboxItem.ts
Normal file
@ -0,0 +1,74 @@
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
/**
|
||||
* Dash API
|
||||
* No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
|
||||
*
|
||||
* The version of the OpenAPI document: 0.1
|
||||
*
|
||||
*
|
||||
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
|
||||
* https://openapi-generator.tech
|
||||
* Do not edit the class manually.
|
||||
*/
|
||||
|
||||
import { exists, mapValues } from '../runtime';
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface InboxItem
|
||||
*/
|
||||
export interface InboxItem {
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof InboxItem
|
||||
*/
|
||||
id?: number;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof InboxItem
|
||||
*/
|
||||
item: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a given object implements the InboxItem interface.
|
||||
*/
|
||||
export function instanceOfInboxItem(value: object): boolean {
|
||||
let isInstance = true;
|
||||
isInstance = isInstance && "item" in value;
|
||||
|
||||
return isInstance;
|
||||
}
|
||||
|
||||
export function InboxItemFromJSON(json: any): InboxItem {
|
||||
return InboxItemFromJSONTyped(json, false);
|
||||
}
|
||||
|
||||
export function InboxItemFromJSONTyped(json: any, ignoreDiscriminator: boolean): InboxItem {
|
||||
if ((json === undefined) || (json === null)) {
|
||||
return json;
|
||||
}
|
||||
return {
|
||||
|
||||
'id': !exists(json, 'id') ? undefined : json['id'],
|
||||
'item': json['item'],
|
||||
};
|
||||
}
|
||||
|
||||
export function InboxItemToJSON(value?: InboxItem | null): any {
|
||||
if (value === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
if (value === null) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
|
||||
'id': value.id,
|
||||
'item': value.item,
|
||||
};
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@ export interface PlanWeekItem {
|
||||
* @type {number}
|
||||
* @memberof PlanWeekItem
|
||||
*/
|
||||
numTodos?: number;
|
||||
numTodo?: number;
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
@ -60,7 +60,7 @@ export function PlanWeekItemFromJSONTyped(json: any, ignoreDiscriminator: boolea
|
||||
return {
|
||||
|
||||
'item': json['item'],
|
||||
'numTodos': !exists(json, 'numTodos') ? undefined : json['numTodos'],
|
||||
'numTodo': !exists(json, 'numTodo') ? undefined : json['numTodo'],
|
||||
'numDone': !exists(json, 'numDone') ? undefined : json['numDone'],
|
||||
};
|
||||
}
|
||||
@ -75,7 +75,7 @@ export function PlanWeekItemToJSON(value?: PlanWeekItem | null): any {
|
||||
return {
|
||||
|
||||
'item': value.item,
|
||||
'numTodos': value.numTodos,
|
||||
'numTodo': value.numTodo,
|
||||
'numDone': value.numDone,
|
||||
};
|
||||
}
|
||||
72
frontend/src/lib/dashclient/models/TrackingCategories.ts
Normal file
72
frontend/src/lib/dashclient/models/TrackingCategories.ts
Normal file
@ -0,0 +1,72 @@
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
/**
|
||||
* Dash API
|
||||
* No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
|
||||
*
|
||||
* The version of the OpenAPI document: 0.1
|
||||
*
|
||||
*
|
||||
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
|
||||
* https://openapi-generator.tech
|
||||
* Do not edit the class manually.
|
||||
*/
|
||||
|
||||
import { exists, mapValues } from '../runtime';
|
||||
import type { TrackingCategory } from './TrackingCategory';
|
||||
import {
|
||||
TrackingCategoryFromJSON,
|
||||
TrackingCategoryFromJSONTyped,
|
||||
TrackingCategoryToJSON,
|
||||
} from './TrackingCategory';
|
||||
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface TrackingCategories
|
||||
*/
|
||||
export interface TrackingCategories {
|
||||
/**
|
||||
*
|
||||
* @type {Array<TrackingCategory>}
|
||||
* @memberof TrackingCategories
|
||||
*/
|
||||
categories?: Array<TrackingCategory>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a given object implements the TrackingCategories interface.
|
||||
*/
|
||||
export function instanceOfTrackingCategories(value: object): boolean {
|
||||
let isInstance = true;
|
||||
|
||||
return isInstance;
|
||||
}
|
||||
|
||||
export function TrackingCategoriesFromJSON(json: any): TrackingCategories {
|
||||
return TrackingCategoriesFromJSONTyped(json, false);
|
||||
}
|
||||
|
||||
export function TrackingCategoriesFromJSONTyped(json: any, ignoreDiscriminator: boolean): TrackingCategories {
|
||||
if ((json === undefined) || (json === null)) {
|
||||
return json;
|
||||
}
|
||||
return {
|
||||
|
||||
'categories': !exists(json, 'categories') ? undefined : ((json['categories'] as Array<any>).map(TrackingCategoryFromJSON)),
|
||||
};
|
||||
}
|
||||
|
||||
export function TrackingCategoriesToJSON(value?: TrackingCategories | null): any {
|
||||
if (value === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
if (value === null) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
|
||||
'categories': value.categories === undefined ? undefined : ((value.categories as Array<any>).map(TrackingCategoryToJSON)),
|
||||
};
|
||||
}
|
||||
|
||||
83
frontend/src/lib/dashclient/models/TrackingCategory.ts
Normal file
83
frontend/src/lib/dashclient/models/TrackingCategory.ts
Normal file
@ -0,0 +1,83 @@
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
/**
|
||||
* Dash API
|
||||
* No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
|
||||
*
|
||||
* The version of the OpenAPI document: 0.1
|
||||
*
|
||||
*
|
||||
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
|
||||
* https://openapi-generator.tech
|
||||
* Do not edit the class manually.
|
||||
*/
|
||||
|
||||
import { exists, mapValues } from '../runtime';
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface TrackingCategory
|
||||
*/
|
||||
export interface TrackingCategory {
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof TrackingCategory
|
||||
*/
|
||||
type: string;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof TrackingCategory
|
||||
*/
|
||||
name: string;
|
||||
/**
|
||||
*
|
||||
* @type {Array<string>}
|
||||
* @memberof TrackingCategory
|
||||
*/
|
||||
items?: Array<string>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a given object implements the TrackingCategory interface.
|
||||
*/
|
||||
export function instanceOfTrackingCategory(value: object): boolean {
|
||||
let isInstance = true;
|
||||
isInstance = isInstance && "type" in value;
|
||||
isInstance = isInstance && "name" in value;
|
||||
|
||||
return isInstance;
|
||||
}
|
||||
|
||||
export function TrackingCategoryFromJSON(json: any): TrackingCategory {
|
||||
return TrackingCategoryFromJSONTyped(json, false);
|
||||
}
|
||||
|
||||
export function TrackingCategoryFromJSONTyped(json: any, ignoreDiscriminator: boolean): TrackingCategory {
|
||||
if ((json === undefined) || (json === null)) {
|
||||
return json;
|
||||
}
|
||||
return {
|
||||
|
||||
'type': json['type'],
|
||||
'name': json['name'],
|
||||
'items': !exists(json, 'items') ? undefined : json['items'],
|
||||
};
|
||||
}
|
||||
|
||||
export function TrackingCategoryToJSON(value?: TrackingCategory | null): any {
|
||||
if (value === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
if (value === null) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
|
||||
'type': value.type,
|
||||
'name': value.name,
|
||||
'items': value.items,
|
||||
};
|
||||
}
|
||||
|
||||
82
frontend/src/lib/dashclient/models/TrackingEntry.ts
Normal file
82
frontend/src/lib/dashclient/models/TrackingEntry.ts
Normal file
@ -0,0 +1,82 @@
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
/**
|
||||
* Dash API
|
||||
* No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
|
||||
*
|
||||
* The version of the OpenAPI document: 0.1
|
||||
*
|
||||
*
|
||||
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
|
||||
* https://openapi-generator.tech
|
||||
* Do not edit the class manually.
|
||||
*/
|
||||
|
||||
import { exists, mapValues } from '../runtime';
|
||||
import type { TrackingItem } from './TrackingItem';
|
||||
import {
|
||||
TrackingItemFromJSON,
|
||||
TrackingItemFromJSONTyped,
|
||||
TrackingItemToJSON,
|
||||
} from './TrackingItem';
|
||||
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface TrackingEntry
|
||||
*/
|
||||
export interface TrackingEntry {
|
||||
/**
|
||||
*
|
||||
* @type {Date}
|
||||
* @memberof TrackingEntry
|
||||
*/
|
||||
date: Date;
|
||||
/**
|
||||
*
|
||||
* @type {Array<TrackingItem>}
|
||||
* @memberof TrackingEntry
|
||||
*/
|
||||
items: Array<TrackingItem>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a given object implements the TrackingEntry interface.
|
||||
*/
|
||||
export function instanceOfTrackingEntry(value: object): boolean {
|
||||
let isInstance = true;
|
||||
isInstance = isInstance && "date" in value;
|
||||
isInstance = isInstance && "items" in value;
|
||||
|
||||
return isInstance;
|
||||
}
|
||||
|
||||
export function TrackingEntryFromJSON(json: any): TrackingEntry {
|
||||
return TrackingEntryFromJSONTyped(json, false);
|
||||
}
|
||||
|
||||
export function TrackingEntryFromJSONTyped(json: any, ignoreDiscriminator: boolean): TrackingEntry {
|
||||
if ((json === undefined) || (json === null)) {
|
||||
return json;
|
||||
}
|
||||
return {
|
||||
|
||||
'date': (new Date(json['date'])),
|
||||
'items': ((json['items'] as Array<any>).map(TrackingItemFromJSON)),
|
||||
};
|
||||
}
|
||||
|
||||
export function TrackingEntryToJSON(value?: TrackingEntry | null): any {
|
||||
if (value === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
if (value === null) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
|
||||
'date': (value.date.toISOString().substr(0,10)),
|
||||
'items': ((value.items as Array<any>).map(TrackingItemToJSON)),
|
||||
};
|
||||
}
|
||||
|
||||
84
frontend/src/lib/dashclient/models/TrackingItem.ts
Normal file
84
frontend/src/lib/dashclient/models/TrackingItem.ts
Normal file
@ -0,0 +1,84 @@
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
/**
|
||||
* Dash API
|
||||
* No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
|
||||
*
|
||||
* The version of the OpenAPI document: 0.1
|
||||
*
|
||||
*
|
||||
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
|
||||
* https://openapi-generator.tech
|
||||
* Do not edit the class manually.
|
||||
*/
|
||||
|
||||
import { exists, mapValues } from '../runtime';
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface TrackingItem
|
||||
*/
|
||||
export interface TrackingItem {
|
||||
/**
|
||||
*
|
||||
* @type {Date}
|
||||
* @memberof TrackingItem
|
||||
*/
|
||||
date: Date;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof TrackingItem
|
||||
*/
|
||||
type: string;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof TrackingItem
|
||||
*/
|
||||
value: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a given object implements the TrackingItem interface.
|
||||
*/
|
||||
export function instanceOfTrackingItem(value: object): boolean {
|
||||
let isInstance = true;
|
||||
isInstance = isInstance && "date" in value;
|
||||
isInstance = isInstance && "type" in value;
|
||||
isInstance = isInstance && "value" in value;
|
||||
|
||||
return isInstance;
|
||||
}
|
||||
|
||||
export function TrackingItemFromJSON(json: any): TrackingItem {
|
||||
return TrackingItemFromJSONTyped(json, false);
|
||||
}
|
||||
|
||||
export function TrackingItemFromJSONTyped(json: any, ignoreDiscriminator: boolean): TrackingItem {
|
||||
if ((json === undefined) || (json === null)) {
|
||||
return json;
|
||||
}
|
||||
return {
|
||||
|
||||
'date': (new Date(json['date'])),
|
||||
'type': json['type'],
|
||||
'value': json['value'],
|
||||
};
|
||||
}
|
||||
|
||||
export function TrackingItemToJSON(value?: TrackingItem | null): any {
|
||||
if (value === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
if (value === null) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
|
||||
'date': (value.date.toISOString().substr(0,10)),
|
||||
'type': value.type,
|
||||
'value': value.value,
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
export * from './InboxItem';
|
||||
export * from './JournalEntry';
|
||||
export * from './PlanDay';
|
||||
export * from './PlanMonth';
|
||||
export * from './PlanWeek';
|
||||
export * from './PlanWeekItem';
|
||||
export * from './TrackingCategories';
|
||||
export * from './TrackingCategory';
|
||||
export * from './TrackingEntry';
|
||||
export * from './TrackingItem';
|
||||
1
frontend/src/lib/index.ts
Normal file
1
frontend/src/lib/index.ts
Normal file
@ -0,0 +1 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
16
frontend/src/lib/stores/apiStore.ts
Normal file
16
frontend/src/lib/stores/apiStore.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { Configuration, JournalApi, PlanApi, TrackingApi, InboxApi } from "../dashclient";
|
||||
|
||||
const apiHost = import.meta.env.VITE_API_HOST;
|
||||
const apiPort = import.meta.env.VITE_API_PORT;
|
||||
|
||||
console.log(`API Host: ${apiHost}`);
|
||||
console.log(`API Port: ${apiPort}`);
|
||||
|
||||
const configuration = new Configuration({
|
||||
basePath: `http://${apiHost}:${apiPort}/api/v1`
|
||||
});
|
||||
|
||||
export const journalApi = new JournalApi(configuration);
|
||||
export const planApi = new PlanApi(configuration);
|
||||
export const trackingApi = new TrackingApi(configuration);
|
||||
export const inboxApi = new InboxApi(configuration);
|
||||
11
frontend/src/lib/stores/planStore.ts
Normal file
11
frontend/src/lib/stores/planStore.ts
Normal file
@ -0,0 +1,11 @@
|
||||
export interface PlanItem {
|
||||
id: number,
|
||||
text: string
|
||||
}
|
||||
|
||||
export interface PlanWeekItemItem {
|
||||
id: number,
|
||||
text: string,
|
||||
todo?: number,
|
||||
done?: number
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
import './app.css'
|
||||
import App from './App.svelte'
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById('app')
|
||||
})
|
||||
|
||||
export default app
|
||||
37
frontend/src/routes/+layout.svelte
Normal file
37
frontend/src/routes/+layout.svelte
Normal file
@ -0,0 +1,37 @@
|
||||
<script>
|
||||
import "../app.css";
|
||||
import InvertableIcon from '$lib/components/InvertableIcon.svelte';
|
||||
import DatePicker from '$lib/components/DatePicker.svelte';
|
||||
</script>
|
||||
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<header>
|
||||
<nav class="flex justify-between mx-4 my-4 h-4 min-h-4">
|
||||
|
||||
<DatePicker />
|
||||
<div class="flex space-x-2">
|
||||
<a href="/">Home</a>
|
||||
<div class="h-5 w-5">
|
||||
<a href="/journal"><InvertableIcon label="Journal" icon="/pen-solid.svg" /></a>
|
||||
</div>
|
||||
<div class="h-5 w-5">
|
||||
<a href="/plan"><InvertableIcon label="Plan" icon="/calendar-check-solid.svg" /></a>
|
||||
</div>
|
||||
<div class="h-5 w-5">
|
||||
<a href="/tracking"><InvertableIcon label="Tracking" icon="/chart-line-solid.svg" /></a>
|
||||
</div>
|
||||
<div class="h-5 w-5">
|
||||
<a href="/inbox"><InvertableIcon label="Inbox" icon="/file-alt-solid.svg" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div class="w-9/12 mt-3">
|
||||
<hr class=" border-slate-300 border-solid border-0.5"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
1
frontend/src/routes/+page.svelte
Normal file
1
frontend/src/routes/+page.svelte
Normal file
@ -0,0 +1 @@
|
||||
Home
|
||||
84
frontend/src/routes/inbox/+page.svelte
Normal file
84
frontend/src/routes/inbox/+page.svelte
Normal file
@ -0,0 +1,84 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
import { inboxApi } from '$lib/stores/apiStore'
|
||||
import type { InboxItem } from '$lib/dashclient'
|
||||
import InvertableIconButton from '$lib/components/InvertableIconButton.svelte';
|
||||
import InputText from '$lib/components/TextInput.svelte';
|
||||
|
||||
let updateTimeout: NodeJS.Timeout;
|
||||
|
||||
let inboxItem: InboxItem = {
|
||||
"item": ""
|
||||
};
|
||||
|
||||
let inboxItems: InboxItem[] = [];
|
||||
|
||||
async function fetchInboxItems() {
|
||||
inboxApi.getInboxItems().then(resp => (inboxItems = resp));
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchInboxItems();
|
||||
});
|
||||
|
||||
function writeInboxItem() {
|
||||
// clearTimeout(updateTimeout);
|
||||
// console.log(inboxItem);
|
||||
|
||||
// updateTimeout = setTimeout(function() {
|
||||
// inboxApi.addInboxItem({"inboxItem":inboxItem}).then(() => {
|
||||
// fetchInboxItems();
|
||||
// inboxItem.item = "";
|
||||
// });
|
||||
// }, 1000);
|
||||
|
||||
inboxApi.addInboxItem({"inboxItem":inboxItem}).then(() => {
|
||||
fetchInboxItems();
|
||||
inboxItem.item = "";
|
||||
});
|
||||
}
|
||||
|
||||
// function prepareInboxItemForWrite(inboxItem: InboxItem): InboxItem {
|
||||
// return {
|
||||
// item: inboxItem.item,
|
||||
// };
|
||||
// }
|
||||
|
||||
function deleteInboxItem(item: InboxItem) {
|
||||
inboxApi.deleteInboxItem({"item": item.id}).then(() => {
|
||||
inboxItems = inboxItems.filter(i => i.id !== item.id);
|
||||
});
|
||||
}
|
||||
|
||||
function handleKeyPress(event: KeyboardEvent) {
|
||||
if (event.key === 'Enter') {
|
||||
writeInboxItem();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex justify-center mt-8">
|
||||
<div class="w-11/12 flex-col items-center">
|
||||
<div>
|
||||
<InputText bind:val={inboxItem.item} placeholder="Add inbox item" onKeypress={handleKeyPress} doAutofocus={true}/>
|
||||
</div>
|
||||
|
||||
{#each inboxItems as item (item.id)}
|
||||
<div class="flex items-center content-center space-y-1">
|
||||
<div class="h-4 w-4 mr-2">
|
||||
<InvertableIconButton label="" icon="/trashcan.svg" clickHandler={() => deleteInboxItem(item)} />
|
||||
</div>
|
||||
<!-- <button on:click={() => deleteInboxItem(item)} class="delete-button">Delete</button> -->
|
||||
{#if item.item.includes('http')}
|
||||
<a href={item.item} class="underline hover:text-slate-600 dark:hover:text-slate-200">{item.item}</a>
|
||||
{:else}
|
||||
<div class="max-w-xl">{item.item}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,14 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
import sunImg from '../../assets/sun-solid.svg';
|
||||
import moonImg from '../../assets/moon-solid.svg';
|
||||
import { journalApi } from '../../stores/apiStore'
|
||||
import type { JournalEntry } from '../../dashclient'
|
||||
import { dateUpdate, currentDate } from '../../stores/appStore'
|
||||
import * as TxtArr from '../../modules/arrayHelpers';
|
||||
import MultiItemTextInput from '../inputs/MultiItemTextInput.svelte';
|
||||
import InvertableIcon from '../inputs/InvertableIcon.svelte';
|
||||
import { journalApi } from '$lib/stores/apiStore'
|
||||
import type { JournalEntry } from '$lib/dashclient'
|
||||
import { dateUpdate, currentDate } from '$lib/stores/appStore'
|
||||
import * as TxtArr from '$lib/modules/arrayHelpers';
|
||||
import MultiItemTextInput from '$lib/components/MultiItemTextInput.svelte';
|
||||
import InvertableIcon from '$lib/components/InvertableIcon.svelte';
|
||||
|
||||
let updateTimeout: NodeJS.Timeout;
|
||||
|
||||
@ -66,77 +64,38 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="journalTime">
|
||||
<div class="TimeIcon">
|
||||
<InvertableIcon label="morgens" icon={sunImg}/>
|
||||
<div class="flex-col space-y-2 mt-8 align-middle">
|
||||
<div class="pl-1 w-8 h-8 absolute float-left ml-2">
|
||||
<InvertableIcon label="morgens" icon="/sun-solid.svg"/>
|
||||
</div>
|
||||
<div class="JournalSubcategory">
|
||||
<h2>Dankbar</h2>
|
||||
<div class="w-11/12 m-auto pt-1">
|
||||
<h2 class="text-center text-lg m-2">Dankbar</h2>
|
||||
<MultiItemTextInput bind:textArray={journalEntry.thankful} onInput={writeJournalEntry}/>
|
||||
</div>
|
||||
|
||||
<div class="JournalSubcategory">
|
||||
<h2>Vorfreude</h2>
|
||||
<div class="w-11/12 m-auto">
|
||||
<h2 class="text-center text-lg m-2">Vorfreude</h2>
|
||||
<MultiItemTextInput bind:textArray={journalEntry.lookingForward} onInput={writeJournalEntry}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="journalTime">
|
||||
<div class="TimeIcon">
|
||||
<InvertableIcon label="abends" icon={moonImg}/>
|
||||
<div class="flex-col space-y-2 mt-8 content-center">
|
||||
<div class="pl-1 w-8 h-7 absolute float-left ml-2">
|
||||
<InvertableIcon label="abends" icon="moon-solid.svg"/>
|
||||
</div>
|
||||
|
||||
<div class="JournalSubcategory">
|
||||
<h2>Freude</h2>
|
||||
<div class="w-11/12 m-auto pt-1">
|
||||
<h2 class="text-center text-lg m-2">Freude</h2>
|
||||
<MultiItemTextInput bind:textArray={journalEntry.beenGreat} onInput={writeJournalEntry}/>
|
||||
</div>
|
||||
|
||||
<div class="JournalSubcategory">
|
||||
<h2>Entwicklung</h2>
|
||||
<div class="w-11/12 m-auto">
|
||||
<h2 class="text-center text-lg m-2">Verzeihung</h2>
|
||||
<MultiItemTextInput bind:textArray={journalEntry.doBetter} onInput={writeJournalEntry}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="JournalText">
|
||||
<h1>Tagebuch</h1>
|
||||
<textarea bind:value={journalEntry.journal} on:input={writeJournalEntry}/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* .journalTime {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
*/
|
||||
.JournalSubcategory {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* @media screen and (min-width: 550px) {
|
||||
.journalTime {
|
||||
width: 550px;
|
||||
}
|
||||
}
|
||||
*/
|
||||
.JournalText {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
border: none;
|
||||
box-shadow: 1px 1px 4px grey;
|
||||
resize: none;
|
||||
columns: 15;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.TimeIcon {
|
||||
position: absolute;
|
||||
float: left;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
</style>
|
||||
<div class="flex flex-col items-center mt-8 mb-8">
|
||||
<h1 class="m-2 text-xl text-center">Tagebuch</h1>
|
||||
<textarea class="rounded-md w-11/12 bg-slate-50 dark:bg-slate-900 h-32 min-h-full" bind:value={journalEntry.journal} on:input={writeJournalEntry}/>
|
||||
</div>
|
||||
210
frontend/src/routes/plan/+page.svelte
Normal file
210
frontend/src/routes/plan/+page.svelte
Normal file
@ -0,0 +1,210 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import shortid from 'shortid';
|
||||
|
||||
import type { PlanDay, PlanWeek, PlanWeekItem } from '$lib/dashclient'
|
||||
import { dateUpdate, currentDate } from '$lib/stores/appStore'
|
||||
import { planApi } from '$lib/stores/apiStore'
|
||||
import type { PlanItem } from '$lib/stores/planStore'
|
||||
import PlanDndList from '$lib/components/plan/PlanDndList.svelte'
|
||||
import PlanTodoDndList from '$lib/components/plan/PlanTodoDndList.svelte'
|
||||
import InvertableIcon from '$lib/components/InvertableIcon.svelte';
|
||||
import InvertableButton from '$lib/components/InvertableIconButton.svelte';
|
||||
|
||||
let updateTimeout: NodeJS.Timeout;
|
||||
let showWeek: boolean = false;
|
||||
|
||||
interface DayItems {
|
||||
morning: Array<PlanItem>,
|
||||
midday: Array<PlanItem>,
|
||||
afternoon: Array<PlanItem>,
|
||||
evening: Array<PlanItem>
|
||||
}
|
||||
|
||||
let planDay: PlanDay = {
|
||||
date: $currentDate,
|
||||
morning: [],
|
||||
midday: [],
|
||||
afternoon: [],
|
||||
evening: []
|
||||
};
|
||||
|
||||
let planDayItems: DayItems = {
|
||||
morning: [],
|
||||
midday: [],
|
||||
afternoon: [],
|
||||
evening: []
|
||||
};
|
||||
|
||||
let planWeek: PlanWeek = {
|
||||
date: $currentDate,
|
||||
items: []
|
||||
};
|
||||
|
||||
let planWeekItems: Array<PlanItem> = [];
|
||||
|
||||
function arrayToItems(arr: Array<string>): Array<PlanItem> {
|
||||
let items: Array<PlanItem> = [];
|
||||
|
||||
if (arr) {
|
||||
arr.forEach((it) => {
|
||||
if (it.trim().length != 0) {
|
||||
items.push({id: shortid.generate(), text:it});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
function itemsToArray(items: Array<PlanItem>): Array<string> {
|
||||
let arr: Array<string> = [];
|
||||
|
||||
items.forEach((it) => {
|
||||
if (it.text.trim().length != 0) {
|
||||
arr.push(it.text);
|
||||
}
|
||||
})
|
||||
|
||||
return arr;
|
||||
}
|
||||
|
||||
function arrayToWeekItems(arr: Array<PlanWeekItem>): Array<PlanItem> {
|
||||
let items: Array<PlanItem> = [];
|
||||
|
||||
if (arr) {
|
||||
arr.forEach((it) => {
|
||||
if (it.item.trim().length != 0) {
|
||||
items.push({id: shortid.generate(), text:it.item, todo: it.numTodo, done: it.numDone});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
function weekItemsToArray(items: Array<PlanItem>): Array<PlanWeekItem> {
|
||||
let arr: Array<PlanWeekItem> = [];
|
||||
|
||||
items.forEach((it) => {
|
||||
if (it.text.trim().length != 0) {
|
||||
arr.push({item: it.text, numTodo: it.todo, numDone: it.done});
|
||||
}
|
||||
})
|
||||
|
||||
return arr;
|
||||
}
|
||||
|
||||
function initPlanDay(plan: PlanDay) {
|
||||
planDay = plan;
|
||||
planDayItems = {
|
||||
morning: arrayToItems(planDay.morning),
|
||||
midday: arrayToItems(planDay.midday),
|
||||
afternoon: arrayToItems(planDay.afternoon),
|
||||
evening: arrayToItems(planDay.evening)
|
||||
}
|
||||
}
|
||||
|
||||
function initPlanWeek(plan: PlanWeek) {
|
||||
planWeek = plan;
|
||||
planWeekItems = arrayToWeekItems(planWeek.items);
|
||||
}
|
||||
|
||||
function preparePlanDayForWrite(items: DayItems): PlanDay {
|
||||
planDay.morning = itemsToArray(items.morning);
|
||||
planDay.midday = itemsToArray(items.midday);
|
||||
planDay.afternoon = itemsToArray(items.afternoon);
|
||||
planDay.evening = itemsToArray(items.evening);
|
||||
|
||||
return planDay;
|
||||
}
|
||||
|
||||
async function fetchPlan() {
|
||||
planApi.getPlanDayForDate({'date': $currentDate}).then(resp => (initPlanDay(resp)));
|
||||
planApi.getPlanWeekForDate({'date': $currentDate}).then(resp => (initPlanWeek(resp)));
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
$dateUpdate = fetchPlan;
|
||||
fetchPlan();
|
||||
});
|
||||
|
||||
function onInput() {
|
||||
clearTimeout(updateTimeout);
|
||||
|
||||
updateTimeout = setTimeout(function() {
|
||||
planApi.savePlanForDay({planDay: preparePlanDayForWrite(planDayItems)});
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function onInputWeek() {
|
||||
clearTimeout(updateTimeout);
|
||||
|
||||
updateTimeout = setTimeout(function() {
|
||||
planApi.savePlanForWeek({planWeek: {date: planWeek.date, items: weekItemsToArray(planWeekItems)}});
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function toggleWeek() {
|
||||
showWeek = !showWeek;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="m-4">
|
||||
<div class="grid grid-cols-2 auto-cols-fr gap-1 justify-center content-center">
|
||||
<div class="flex flex-col min-w-[130px] grow basis-0 items-center">
|
||||
<div class="h-6 w-6 mt-1 mb-3">
|
||||
<InvertableIcon label="morgens" icon="/sun-regular.svg"/>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<PlanDndList bind:items={planDayItems.morning} onInput={onInput}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col min-w-[130px] grow basis-0 items-center">
|
||||
<div class="h-6 w-6 mt-1 mb-3">
|
||||
<InvertableIcon label="mittags" icon="/sun-solid.svg"/>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<PlanDndList bind:items={planDayItems.midday} onInput={onInput}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col min-w-[130px] grow basis-0 items-center">
|
||||
<div class="h-6 w-6 mt-1 mb-3">
|
||||
<div class="h-7 w-7">
|
||||
<InvertableIcon label="nachmittags" icon="/mountain-sun-solid.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<PlanDndList bind:items={planDayItems.afternoon} onInput={onInput}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col min-w-[130px] grow basis-0 items-center">
|
||||
<div class="h-6 w-6 mt-1 mb-3">
|
||||
<div class="h-5 w-5">
|
||||
<InvertableIcon label="abends" icon="/moon-solid.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<PlanDndList bind:items={planDayItems.evening} onInput={onInput}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div>
|
||||
<div class="weekButton">
|
||||
<InvertableButton label="week" icon="/calendar-week-solid.svg" clickHandler={toggleWeek}/>
|
||||
</div>
|
||||
|
||||
{#if showWeek}
|
||||
<div class="timeOfDay">
|
||||
<div class="timeIcon">
|
||||
<InvertableIcon label="week" icon="/calendar-week-solid.svg"/>
|
||||
</div>
|
||||
<PlanTodoDndList bind:items={planWeekItems} onInput={onInputWeek}/>
|
||||
</div>
|
||||
{/if}
|
||||
</div> -->
|
||||
</div>
|
||||
95
frontend/src/routes/tracking/+page.svelte
Normal file
95
frontend/src/routes/tracking/+page.svelte
Normal file
@ -0,0 +1,95 @@
|
||||
<script lang="ts">
|
||||
import { dateUpdate, currentDate } from '$lib/stores/appStore';
|
||||
import Choice from '$lib/components/ChoiceInput.svelte';
|
||||
import Boolean from '$lib/components/BooleanInput.svelte';
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
import { trackingApi } from '$lib/stores/apiStore'
|
||||
|
||||
let updateTimeout: NodeJS.Timeout;
|
||||
|
||||
let categories: trackingApi.TrackingCategories = {
|
||||
categories: []
|
||||
};
|
||||
|
||||
let trackingEntry: trackingApi.TrackingEntry = {
|
||||
date: $currentDate,
|
||||
items: []
|
||||
};
|
||||
|
||||
async function getTrackingCategories() {
|
||||
trackingApi.getTrackingCategories().then(resp => {
|
||||
console.log(resp);
|
||||
categories = resp;
|
||||
});
|
||||
}
|
||||
|
||||
async function getTrackingEntry() {
|
||||
await trackingApi.getTrackingEntryForDate({"date": $currentDate}).then(resp => {
|
||||
trackingEntry = resp;
|
||||
});
|
||||
|
||||
await getTrackingCategories();
|
||||
}
|
||||
|
||||
function writeTrackingEntry() {
|
||||
clearTimeout(updateTimeout);
|
||||
console.log(trackingEntry);
|
||||
|
||||
updateTimeout = setTimeout(function() {
|
||||
trackingApi.writeTrackingEntry({"trackingEntry": trackingEntry}).then(() => {
|
||||
// getTrackingEntry();
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function getOrAddItem(type): trackingApi.TrackingItem {
|
||||
let item = trackingEntry.items.find(item => item.type === type);
|
||||
if (!item) {
|
||||
item = { date: $currentDate, type: type, value: "false" };
|
||||
trackingEntry = { ...trackingEntry, items: [...trackingEntry.items, item] };
|
||||
}
|
||||
|
||||
return trackingEntry.items.find(item => item.type === type);
|
||||
}
|
||||
|
||||
|
||||
function handleSelection(type, newValue) {
|
||||
let item = trackingEntry.items.find(item => item.type === type);
|
||||
if (item) {
|
||||
item.value = newValue;
|
||||
trackingEntry = { ...trackingEntry }; // Trigger reactivity
|
||||
}
|
||||
writeTrackingEntry(); // Save the updated entry
|
||||
}
|
||||
|
||||
$: trackingEntry = { ...trackingEntry };
|
||||
|
||||
onMount(async () => {
|
||||
await getTrackingEntry();
|
||||
$dateUpdate = getTrackingEntry;
|
||||
await getTrackingCategories();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex justify-center mt-8">
|
||||
<div class="flex flex-col w-11/12 items-center">
|
||||
<div>
|
||||
{#each categories.categories as category}
|
||||
<div class="flex flex-row w-full justify-between">
|
||||
<div class="w-32 min-w-32">
|
||||
{category.name}
|
||||
</div>
|
||||
<div class="w-full flex-grow">
|
||||
{#if category.type == "choice"}
|
||||
<Choice choices={category.items} selected={getOrAddItem(category.name).value} onInput={(newValue) => handleSelection(category.name, newValue)}/>
|
||||
{:else if category.type == "boolean"}
|
||||
<Boolean selected={getOrAddItem(category.name).value} onInput={(newValue) => handleSelection(category.name, newValue)}/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,10 +0,0 @@
|
||||
import { Configuration, JournalApi, PlanApi } from "../dashclient";
|
||||
|
||||
console.log(window.location.origin)
|
||||
|
||||
const configuration = new Configuration({
|
||||
basePath: "http://192.168.0.181:8080/api/v1",
|
||||
});
|
||||
|
||||
export const journalApi = new JournalApi(configuration);
|
||||
export const planApi = new PlanApi(configuration);
|
||||
@ -1,4 +0,0 @@
|
||||
export interface PlanItem {
|
||||
id: number,
|
||||
text: string
|
||||
}
|
||||
2
frontend/src/vite-env.d.ts
vendored
2
frontend/src/vite-env.d.ts
vendored
@ -1,2 +0,0 @@
|
||||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
||||
1
frontend/static/calendar-check-solid.svg
Normal file
1
frontend/static/calendar-check-solid.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" preserveAspectRatio="xMinYMin meet"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M436 160H12c-6.627 0-12-5.373-12-12v-36c0-26.51 21.49-48 48-48h48V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h128V12c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v52h48c26.51 0 48 21.49 48 48v36c0 6.627-5.373 12-12 12zM12 192h424c6.627 0 12 5.373 12 12v260c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V204c0-6.627 5.373-12 12-12zm333.296 95.947l-28.169-28.398c-4.667-4.705-12.265-4.736-16.97-.068L194.12 364.665l-45.98-46.352c-4.667-4.705-12.266-4.736-16.971-.068l-28.397 28.17c-4.705 4.667-4.736 12.265-.068 16.97l82.601 83.269c4.667 4.705 12.265 4.736 16.97.068l142.953-141.805c4.705-4.667 4.736-12.265.068-16.97z"/></svg>
|
||||
|
After Width: | Height: | Size: 887 B |
1
frontend/static/calendar-week-solid.svg
Normal file
1
frontend/static/calendar-week-solid.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm80 64c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16H368c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80z"/></svg>
|
||||
|
After Width: | Height: | Size: 568 B |
1
frontend/static/chart-line-solid.svg
Normal file
1
frontend/static/chart-line-solid.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" preserveAspectRatio="xMinYMin meet"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z"/></svg>
|
||||
|
After Width: | Height: | Size: 719 B |
1
frontend/static/check-solid.svg
Normal file
1
frontend/static/check-solid.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" preserveAspectRatio="xMinYMin meet"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
|
||||
|
After Width: | Height: | Size: 464 B |
1
frontend/static/chevron-left-solid.svg
Normal file
1
frontend/static/chevron-left-solid.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" preserveAspectRatio="xMinYMin meet"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/></svg>
|
||||
|
After Width: | Height: | Size: 491 B |
1
frontend/static/chevron-right-solid.svg
Normal file
1
frontend/static/chevron-right-solid.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" preserveAspectRatio="xMinYMin meet"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
|
||||
|
After Width: | Height: | Size: 534 B |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user