mirror of
https://github.com/RichieCahill/dotfiles.git
synced 2026-04-15 04:28:18 -04:00
removing react
This commit is contained in:
@@ -1,73 +0,0 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
@@ -1,23 +0,0 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -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>frontend</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
3315
frontend/package-lock.json
generated
3315
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,31 +0,0 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-router-dom": "^7.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@types/node": "^24.10.1",
|
||||
"@types/react": "^19.2.5",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.46.4",
|
||||
"vite": "^7.2.4"
|
||||
}
|
||||
}
|
||||
@@ -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,654 +0,0 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.app {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
main {
|
||||
background: var(--color-bg-card);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--color-bg-hover);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--color-danger);
|
||||
border-color: var(--color-danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: var(--color-danger-hover);
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
background: var(--color-bg-muted);
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background: var(--color-bg-muted);
|
||||
}
|
||||
|
||||
.error {
|
||||
background: var(--color-bg-error);
|
||||
color: var(--color-text-error);
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.section h4 {
|
||||
margin: 15px 0 10px;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.section ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--color-border-lighter);
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
background: var(--color-tag-bg);
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.add-form {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.add-form select,
|
||||
.add-form input {
|
||||
padding: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
min-width: 200px;
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.need-list .header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.need-form {
|
||||
background: var(--color-bg-muted);
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.need-items {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.need-items li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 15px;
|
||||
border: 1px solid var(--color-border-light);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.need-info p {
|
||||
margin: 5px 0 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Graph styles */
|
||||
.graph-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.graph-hint {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.selected-info {
|
||||
margin-top: 15px;
|
||||
padding: 15px;
|
||||
background: var(--color-bg-muted);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.selected-info h3 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.selected-info p {
|
||||
margin: 5px 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.legend {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: var(--color-bg-muted);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.legend h4 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.legend-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.legend-line {
|
||||
width: 30px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Weight control styles */
|
||||
.weight-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.weight-control input[type="range"] {
|
||||
width: 80px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.weight-value {
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.weight-display {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* ID Card Styles */
|
||||
.id-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.id-card-inner {
|
||||
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%);
|
||||
background-image:
|
||||
radial-gradient(white 1px, transparent 1px),
|
||||
linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%);
|
||||
background-size: 50px 50px, 100% 100%;
|
||||
background-position: 0 0, 0 0;
|
||||
color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
min-height: 500px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.id-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.id-card-header-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.id-card-header-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.id-card-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.id-profile-pic {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
border: 2px solid rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.id-profile-placeholder {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #4ecdc4 0%, #44a8a0 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.id-profile-placeholder span {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.id-card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.id-card-actions .btn {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-color: rgba(255,255,255,0.3);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.id-card-actions .btn:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.id-card-body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.id-card-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.id-field {
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.id-field-block {
|
||||
margin-top: 15px;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.id-label {
|
||||
color: #4ecdc4;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.id-card-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.id-bio {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.id-relationships {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.id-section-title {
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 15px;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.2);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.id-rel-group {
|
||||
margin-bottom: 12px;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.id-rel-label {
|
||||
color: #a0a0a0;
|
||||
}
|
||||
|
||||
.id-rel-group a {
|
||||
color: #4ecdc4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.id-rel-group a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.id-rel-type {
|
||||
color: #888;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.id-card-warnings {
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255,255,255,0.2);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.id-warning {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.9rem;
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.warning-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ff6b6b;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.warning-desc {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Management section */
|
||||
.id-card-manage {
|
||||
margin-top: 20px;
|
||||
background: var(--color-bg-muted);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.id-card-manage summary {
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.id-card-manage[open] summary {
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.manage-section {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.manage-section h3 {
|
||||
margin: 0 0 15px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.manage-relationships {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.manage-rel-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.manage-rel-item a {
|
||||
font-weight: 500;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.manage-needs-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
|
||||
.manage-needs-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.manage-needs-list li .btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.id-card-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.id-card-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.id-card-header {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, Route, Routes } from "react-router-dom";
|
||||
import { ContactDetail } from "./components/ContactDetail";
|
||||
import { ContactForm } from "./components/ContactForm";
|
||||
import { ContactList } from "./components/ContactList";
|
||||
import { NeedList } from "./components/NeedList";
|
||||
import { RelationshipGraph } from "./components/RelationshipGraph";
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
const [theme, setTheme] = useState<"light" | "dark">(() => {
|
||||
return (localStorage.getItem("theme") as "light" | "dark") || "light";
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
localStorage.setItem("theme", theme);
|
||||
}, [theme]);
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme((prev) => (prev === "light" ? "dark" : "light"));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<nav>
|
||||
<Link to="/contacts">Contacts</Link>
|
||||
<Link to="/graph">Graph</Link>
|
||||
<Link to="/needs">Needs</Link>
|
||||
<button className="btn btn-small theme-toggle" onClick={toggleTheme}>
|
||||
{theme === "light" ? "Dark" : "Light"}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<Routes>
|
||||
<Route path="/" element={<ContactList />} />
|
||||
<Route path="/contacts" element={<ContactList />} />
|
||||
<Route path="/contacts/new" element={<ContactForm />} />
|
||||
<Route path="/contacts/:id" element={<ContactDetail />} />
|
||||
<Route path="/contacts/:id/edit" element={<ContactForm />} />
|
||||
<Route path="/graph" element={<RelationshipGraph />} />
|
||||
<Route path="/needs" element={<NeedList />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,105 +0,0 @@
|
||||
import type {
|
||||
Contact,
|
||||
ContactCreate,
|
||||
ContactListItem,
|
||||
ContactRelationship,
|
||||
ContactRelationshipCreate,
|
||||
ContactRelationshipUpdate,
|
||||
ContactUpdate,
|
||||
GraphData,
|
||||
Need,
|
||||
NeedCreate,
|
||||
} from "../types";
|
||||
|
||||
const API_BASE = "";
|
||||
|
||||
async function request<T>(
|
||||
endpoint: string,
|
||||
options?: RequestInit
|
||||
): Promise<T> {
|
||||
const response = await fetch(`${API_BASE}${endpoint}`, {
|
||||
...options,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...options?.headers,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({}));
|
||||
throw new Error(error.detail || `HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export const api = {
|
||||
// Needs
|
||||
needs: {
|
||||
list: () => request<Need[]>("/api/needs"),
|
||||
get: (id: number) => request<Need>(`/api/needs/${id}`),
|
||||
create: (data: NeedCreate) =>
|
||||
request<Need>("/api/needs", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
delete: (id: number) =>
|
||||
request<{ deleted: boolean }>(`/api/needs/${id}`, { method: "DELETE" }),
|
||||
},
|
||||
|
||||
// Contacts
|
||||
contacts: {
|
||||
list: (skip = 0, limit = 100) =>
|
||||
request<ContactListItem[]>(`/api/contacts?skip=${skip}&limit=${limit}`),
|
||||
get: (id: number) => request<Contact>(`/api/contacts/${id}`),
|
||||
create: (data: ContactCreate) =>
|
||||
request<Contact>("/api/contacts", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
update: (id: number, data: ContactUpdate) =>
|
||||
request<Contact>(`/api/contacts/${id}`, {
|
||||
method: "PATCH",
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
delete: (id: number) =>
|
||||
request<{ deleted: boolean }>(`/api/contacts/${id}`, { method: "DELETE" }),
|
||||
|
||||
// Contact-Need relationships
|
||||
addNeed: (contactId: number, needId: number) =>
|
||||
request<{ added: boolean }>(`/api/contacts/${contactId}/needs/${needId}`, {
|
||||
method: "POST",
|
||||
}),
|
||||
removeNeed: (contactId: number, needId: number) =>
|
||||
request<{ removed: boolean }>(`/api/contacts/${contactId}/needs/${needId}`, {
|
||||
method: "DELETE",
|
||||
}),
|
||||
|
||||
// Contact-Contact relationships
|
||||
getRelationships: (contactId: number) =>
|
||||
request<ContactRelationship[]>(`/api/contacts/${contactId}/relationships`),
|
||||
addRelationship: (contactId: number, data: ContactRelationshipCreate) =>
|
||||
request<ContactRelationship>(`/api/contacts/${contactId}/relationships`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
updateRelationship: (contactId: number, relatedContactId: number, data: ContactRelationshipUpdate) =>
|
||||
request<ContactRelationship>(
|
||||
`/api/contacts/${contactId}/relationships/${relatedContactId}`,
|
||||
{
|
||||
method: "PATCH",
|
||||
body: JSON.stringify(data),
|
||||
}
|
||||
),
|
||||
removeRelationship: (contactId: number, relatedContactId: number) =>
|
||||
request<{ deleted: boolean }>(
|
||||
`/api/contacts/${contactId}/relationships/${relatedContactId}`,
|
||||
{ method: "DELETE" }
|
||||
),
|
||||
},
|
||||
|
||||
// Graph
|
||||
graph: {
|
||||
get: () => request<GraphData>("/api/graph"),
|
||||
},
|
||||
};
|
||||
@@ -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="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -1,456 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { api } from "../api/client";
|
||||
import type { Contact, ContactListItem, Need, RelationshipTypeValue } from "../types";
|
||||
import { RELATIONSHIP_TYPES } from "../types";
|
||||
|
||||
export function ContactDetail() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [contact, setContact] = useState<Contact | null>(null);
|
||||
const [allNeeds, setAllNeeds] = useState<Need[]>([]);
|
||||
const [allContacts, setAllContacts] = useState<ContactListItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [newNeedId, setNewNeedId] = useState<number | "">("");
|
||||
const [newRelContactId, setNewRelContactId] = useState<number | "">("");
|
||||
const [newRelType, setNewRelType] = useState<RelationshipTypeValue | "">("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
Promise.all([
|
||||
api.contacts.get(Number(id)),
|
||||
api.needs.list(),
|
||||
api.contacts.list(),
|
||||
])
|
||||
.then(([c, n, contacts]) => {
|
||||
setContact(c);
|
||||
setAllNeeds(n);
|
||||
setAllContacts(contacts.filter((ct) => ct.id !== Number(id)));
|
||||
})
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
const handleAddNeed = async () => {
|
||||
if (!contact || newNeedId === "") return;
|
||||
try {
|
||||
await api.contacts.addNeed(contact.id, Number(newNeedId));
|
||||
const updated = await api.contacts.get(contact.id);
|
||||
setContact(updated);
|
||||
setNewNeedId("");
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to add need");
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveNeed = async (needId: number) => {
|
||||
if (!contact) return;
|
||||
try {
|
||||
await api.contacts.removeNeed(contact.id, needId);
|
||||
const updated = await api.contacts.get(contact.id);
|
||||
setContact(updated);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to remove need");
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddRelationship = async () => {
|
||||
if (!contact || newRelContactId === "" || newRelType === "") return;
|
||||
try {
|
||||
await api.contacts.addRelationship(contact.id, {
|
||||
related_contact_id: Number(newRelContactId),
|
||||
relationship_type: newRelType,
|
||||
});
|
||||
const updated = await api.contacts.get(contact.id);
|
||||
setContact(updated);
|
||||
setNewRelContactId("");
|
||||
setNewRelType("");
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to add relationship"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveRelationship = async (relatedContactId: number) => {
|
||||
if (!contact) return;
|
||||
try {
|
||||
await api.contacts.removeRelationship(contact.id, relatedContactId);
|
||||
const updated = await api.contacts.get(contact.id);
|
||||
setContact(updated);
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to remove relationship"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateWeight = async (relatedContactId: number, newWeight: number) => {
|
||||
if (!contact) return;
|
||||
try {
|
||||
await api.contacts.updateRelationship(contact.id, relatedContactId, {
|
||||
closeness_weight: newWeight,
|
||||
});
|
||||
const updated = await api.contacts.get(contact.id);
|
||||
setContact(updated);
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to update weight"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div>Loading...</div>;
|
||||
if (error) return <div className="error">Error: {error}</div>;
|
||||
if (!contact) return <div>Contact not found</div>;
|
||||
|
||||
const availableNeeds = allNeeds.filter(
|
||||
(n) => !contact.needs.some((cn) => cn.id === n.id)
|
||||
);
|
||||
|
||||
const getContactName = (contactId: number) => {
|
||||
const c = allContacts.find((ct) => ct.id === contactId);
|
||||
return c?.name || `Contact #${contactId}`;
|
||||
};
|
||||
|
||||
const getRelationshipDisplayName = (type: string) => {
|
||||
const rt = RELATIONSHIP_TYPES.find((r) => r.value === type);
|
||||
return rt?.displayName || type;
|
||||
};
|
||||
|
||||
// Group relationships by category for display
|
||||
const groupRelationships = () => {
|
||||
const familial: typeof contact.related_to = [];
|
||||
const friends: typeof contact.related_to = [];
|
||||
const partners: typeof contact.related_to = [];
|
||||
const professional: typeof contact.related_to = [];
|
||||
const other: typeof contact.related_to = [];
|
||||
|
||||
const familialTypes = ['parent', 'child', 'sibling', 'grandparent', 'grandchild', 'aunt_uncle', 'niece_nephew', 'cousin', 'in_law'];
|
||||
const friendTypes = ['best_friend', 'close_friend', 'friend', 'acquaintance', 'neighbor'];
|
||||
const partnerTypes = ['spouse', 'partner'];
|
||||
const professionalTypes = ['mentor', 'mentee', 'business_partner', 'colleague', 'manager', 'direct_report', 'client'];
|
||||
|
||||
for (const rel of contact.related_to) {
|
||||
if (familialTypes.includes(rel.relationship_type)) {
|
||||
familial.push(rel);
|
||||
} else if (friendTypes.includes(rel.relationship_type)) {
|
||||
friends.push(rel);
|
||||
} else if (partnerTypes.includes(rel.relationship_type)) {
|
||||
partners.push(rel);
|
||||
} else if (professionalTypes.includes(rel.relationship_type)) {
|
||||
professional.push(rel);
|
||||
} else {
|
||||
other.push(rel);
|
||||
}
|
||||
}
|
||||
|
||||
return { familial, friends, partners, professional, other };
|
||||
};
|
||||
|
||||
const relationshipGroups = groupRelationships();
|
||||
|
||||
return (
|
||||
<div className="id-card">
|
||||
<div className="id-card-inner">
|
||||
{/* Header with name and profile pic */}
|
||||
<div className="id-card-header">
|
||||
<div className="id-card-header-left">
|
||||
<h1 className="id-card-title">I.D.: {contact.name}</h1>
|
||||
</div>
|
||||
<div className="id-card-header-right">
|
||||
{contact.profile_pic ? (
|
||||
<img
|
||||
src={contact.profile_pic}
|
||||
alt={`${contact.name}'s profile`}
|
||||
className="id-profile-pic"
|
||||
/>
|
||||
) : (
|
||||
<div className="id-profile-placeholder">
|
||||
<span>{contact.name.charAt(0).toUpperCase()}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="id-card-actions">
|
||||
<Link to={`/contacts/${contact.id}/edit`} className="btn btn-small">
|
||||
Edit
|
||||
</Link>
|
||||
<Link to="/contacts" className="btn btn-small">
|
||||
Back
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="id-card-body">
|
||||
{/* Left column - Basic info */}
|
||||
<div className="id-card-left">
|
||||
{contact.legal_name && (
|
||||
<div className="id-field">Legal name: {contact.legal_name}</div>
|
||||
)}
|
||||
{contact.suffix && (
|
||||
<div className="id-field">Suffix: {contact.suffix}</div>
|
||||
)}
|
||||
{contact.gender && (
|
||||
<div className="id-field">Gender: {contact.gender}</div>
|
||||
)}
|
||||
{contact.age && (
|
||||
<div className="id-field">Age: {contact.age}</div>
|
||||
)}
|
||||
{contact.current_job && (
|
||||
<div className="id-field">Job: {contact.current_job}</div>
|
||||
)}
|
||||
{contact.social_structure_style && (
|
||||
<div className="id-field">Social style: {contact.social_structure_style}</div>
|
||||
)}
|
||||
{contact.self_sufficiency_score !== null && (
|
||||
<div className="id-field">Self-Sufficiency: {contact.self_sufficiency_score}</div>
|
||||
)}
|
||||
{contact.timezone && (
|
||||
<div className="id-field">Timezone: {contact.timezone}</div>
|
||||
)}
|
||||
|
||||
{contact.safe_conversation_starters && (
|
||||
<div className="id-field-block">
|
||||
<span className="id-label">Safe con starters:</span> {contact.safe_conversation_starters}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contact.topics_to_avoid && (
|
||||
<div className="id-field-block">
|
||||
<span className="id-label">Topics to avoid:</span> {contact.topics_to_avoid}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contact.goals && (
|
||||
<div className="id-field-block">
|
||||
<span className="id-label">Goals:</span> {contact.goals}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right column - Bio and Relationships */}
|
||||
<div className="id-card-right">
|
||||
{contact.bio && (
|
||||
<div className="id-bio">
|
||||
<span className="id-label">Bio:</span> {contact.bio}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="id-relationships">
|
||||
<h2 className="id-section-title">Relationships</h2>
|
||||
|
||||
{relationshipGroups.familial.length > 0 && (
|
||||
<div className="id-rel-group">
|
||||
<span className="id-rel-label">Familial:</span>{" "}
|
||||
{relationshipGroups.familial.map((rel, i) => (
|
||||
<span key={rel.related_contact_id}>
|
||||
<Link to={`/contacts/${rel.related_contact_id}`}>
|
||||
{getContactName(rel.related_contact_id)}
|
||||
</Link>
|
||||
<span className="id-rel-type">({getRelationshipDisplayName(rel.relationship_type)})</span>
|
||||
{i < relationshipGroups.familial.length - 1 && ", "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{relationshipGroups.partners.length > 0 && (
|
||||
<div className="id-rel-group">
|
||||
<span className="id-rel-label">Partners:</span>{" "}
|
||||
{relationshipGroups.partners.map((rel, i) => (
|
||||
<span key={rel.related_contact_id}>
|
||||
<Link to={`/contacts/${rel.related_contact_id}`}>
|
||||
{getContactName(rel.related_contact_id)}
|
||||
</Link>
|
||||
{i < relationshipGroups.partners.length - 1 && ", "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{relationshipGroups.friends.length > 0 && (
|
||||
<div className="id-rel-group">
|
||||
<span className="id-rel-label">Friends:</span>{" "}
|
||||
{relationshipGroups.friends.map((rel, i) => (
|
||||
<span key={rel.related_contact_id}>
|
||||
<Link to={`/contacts/${rel.related_contact_id}`}>
|
||||
{getContactName(rel.related_contact_id)}
|
||||
</Link>
|
||||
{i < relationshipGroups.friends.length - 1 && ", "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{relationshipGroups.professional.length > 0 && (
|
||||
<div className="id-rel-group">
|
||||
<span className="id-rel-label">Professional:</span>{" "}
|
||||
{relationshipGroups.professional.map((rel, i) => (
|
||||
<span key={rel.related_contact_id}>
|
||||
<Link to={`/contacts/${rel.related_contact_id}`}>
|
||||
{getContactName(rel.related_contact_id)}
|
||||
</Link>
|
||||
<span className="id-rel-type">({getRelationshipDisplayName(rel.relationship_type)})</span>
|
||||
{i < relationshipGroups.professional.length - 1 && ", "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{relationshipGroups.other.length > 0 && (
|
||||
<div className="id-rel-group">
|
||||
<span className="id-rel-label">Other:</span>{" "}
|
||||
{relationshipGroups.other.map((rel, i) => (
|
||||
<span key={rel.related_contact_id}>
|
||||
<Link to={`/contacts/${rel.related_contact_id}`}>
|
||||
{getContactName(rel.related_contact_id)}
|
||||
</Link>
|
||||
<span className="id-rel-type">({getRelationshipDisplayName(rel.relationship_type)})</span>
|
||||
{i < relationshipGroups.other.length - 1 && ", "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contact.related_from.length > 0 && (
|
||||
<div className="id-rel-group">
|
||||
<span className="id-rel-label">Known by:</span>{" "}
|
||||
{contact.related_from.map((rel, i) => (
|
||||
<span key={rel.contact_id}>
|
||||
<Link to={`/contacts/${rel.contact_id}`}>
|
||||
{getContactName(rel.contact_id)}
|
||||
</Link>
|
||||
{i < contact.related_from.length - 1 && ", "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Needs/Warnings at bottom */}
|
||||
{contact.needs.length > 0 && (
|
||||
<div className="id-card-warnings">
|
||||
{contact.needs.map((need) => (
|
||||
<div key={need.id} className="id-warning">
|
||||
<span className="warning-dot"></span>
|
||||
Warning: {need.name}
|
||||
{need.description && <span className="warning-desc"> - {need.description}</span>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Management section (expandable) */}
|
||||
<details className="id-card-manage">
|
||||
<summary>Manage Contact</summary>
|
||||
|
||||
<div className="manage-section">
|
||||
<h3>Manage Relationships</h3>
|
||||
<div className="manage-relationships">
|
||||
{contact.related_to.map((rel) => (
|
||||
<div key={rel.related_contact_id} className="manage-rel-item">
|
||||
<Link to={`/contacts/${rel.related_contact_id}`}>
|
||||
{getContactName(rel.related_contact_id)}
|
||||
</Link>
|
||||
<span className="tag">{getRelationshipDisplayName(rel.relationship_type)}</span>
|
||||
<label className="weight-control">
|
||||
<span>Closeness:</span>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
value={rel.closeness_weight}
|
||||
onChange={(e) => handleUpdateWeight(rel.related_contact_id, Number(e.target.value))}
|
||||
/>
|
||||
<span className="weight-value">{rel.closeness_weight}</span>
|
||||
</label>
|
||||
<button
|
||||
onClick={() => handleRemoveRelationship(rel.related_contact_id)}
|
||||
className="btn btn-small btn-danger"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{allContacts.length > 0 && (
|
||||
<div className="add-form">
|
||||
<select
|
||||
value={newRelContactId}
|
||||
onChange={(e) =>
|
||||
setNewRelContactId(
|
||||
e.target.value ? Number(e.target.value) : ""
|
||||
)
|
||||
}
|
||||
>
|
||||
<option value="">Select contact...</option>
|
||||
{allContacts.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={newRelType}
|
||||
onChange={(e) => setNewRelType(e.target.value as RelationshipTypeValue | "")}
|
||||
>
|
||||
<option value="">Select relationship type...</option>
|
||||
{RELATIONSHIP_TYPES.map((rt) => (
|
||||
<option key={rt.value} value={rt.value}>
|
||||
{rt.displayName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button onClick={handleAddRelationship} className="btn btn-primary">
|
||||
Add Relationship
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="manage-section">
|
||||
<h3>Manage Needs/Warnings</h3>
|
||||
<ul className="manage-needs-list">
|
||||
{contact.needs.map((need) => (
|
||||
<li key={need.id}>
|
||||
<strong>{need.name}</strong>
|
||||
{need.description && <span> - {need.description}</span>}
|
||||
<button
|
||||
onClick={() => handleRemoveNeed(need.id)}
|
||||
className="btn btn-small btn-danger"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{availableNeeds.length > 0 && (
|
||||
<div className="add-form">
|
||||
<select
|
||||
value={newNeedId}
|
||||
onChange={(e) =>
|
||||
setNewNeedId(e.target.value ? Number(e.target.value) : "")
|
||||
}
|
||||
>
|
||||
<option value="">Select a need...</option>
|
||||
{availableNeeds.map((n) => (
|
||||
<option key={n.id} value={n.id}>
|
||||
{n.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button onClick={handleAddNeed} className="btn btn-primary">
|
||||
Add Need
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,325 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { api } from "../api/client";
|
||||
import type { ContactCreate, Need } from "../types";
|
||||
|
||||
export function ContactForm() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const isEdit = Boolean(id);
|
||||
|
||||
const [allNeeds, setAllNeeds] = useState<Need[]>([]);
|
||||
const [loading, setLoading] = useState(isEdit);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [form, setForm] = useState<ContactCreate>({
|
||||
name: "",
|
||||
age: null,
|
||||
bio: null,
|
||||
current_job: null,
|
||||
gender: null,
|
||||
goals: null,
|
||||
legal_name: null,
|
||||
profile_pic: null,
|
||||
safe_conversation_starters: null,
|
||||
self_sufficiency_score: null,
|
||||
social_structure_style: null,
|
||||
ssn: null,
|
||||
suffix: null,
|
||||
timezone: null,
|
||||
topics_to_avoid: null,
|
||||
need_ids: [],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const needs = await api.needs.list();
|
||||
setAllNeeds(needs);
|
||||
|
||||
if (id) {
|
||||
const contact = await api.contacts.get(Number(id));
|
||||
setForm({
|
||||
name: contact.name,
|
||||
age: contact.age,
|
||||
bio: contact.bio,
|
||||
current_job: contact.current_job,
|
||||
gender: contact.gender,
|
||||
goals: contact.goals,
|
||||
legal_name: contact.legal_name,
|
||||
profile_pic: contact.profile_pic,
|
||||
safe_conversation_starters: contact.safe_conversation_starters,
|
||||
self_sufficiency_score: contact.self_sufficiency_score,
|
||||
social_structure_style: contact.social_structure_style,
|
||||
ssn: contact.ssn,
|
||||
suffix: contact.suffix,
|
||||
timezone: contact.timezone,
|
||||
topics_to_avoid: contact.topics_to_avoid,
|
||||
need_ids: contact.needs.map((n) => n.id),
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load data");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
if (isEdit) {
|
||||
await api.contacts.update(Number(id), form);
|
||||
navigate(`/contacts/${id}`);
|
||||
} else {
|
||||
const created = await api.contacts.create(form);
|
||||
navigate(`/contacts/${created.id}`);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Save failed");
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const updateField = <K extends keyof ContactCreate>(
|
||||
field: K,
|
||||
value: ContactCreate[K]
|
||||
) => {
|
||||
setForm((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const toggleNeed = (needId: number) => {
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
need_ids: prev.need_ids?.includes(needId)
|
||||
? prev.need_ids.filter((id) => id !== needId)
|
||||
: [...(prev.need_ids || []), needId],
|
||||
}));
|
||||
};
|
||||
|
||||
if (loading) return <div>Loading...</div>;
|
||||
|
||||
return (
|
||||
<div className="contact-form">
|
||||
<h1>{isEdit ? "Edit Contact" : "New Contact"}</h1>
|
||||
|
||||
{error && <div className="error">{error}</div>}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="name">Name *</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
value={form.name}
|
||||
onChange={(e) => updateField("name", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label htmlFor="legal_name">Legal Name</label>
|
||||
<input
|
||||
id="legal_name"
|
||||
type="text"
|
||||
value={form.legal_name || ""}
|
||||
onChange={(e) =>
|
||||
updateField("legal_name", e.target.value || null)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="suffix">Suffix</label>
|
||||
<input
|
||||
id="suffix"
|
||||
type="text"
|
||||
value={form.suffix || ""}
|
||||
onChange={(e) => updateField("suffix", e.target.value || null)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label htmlFor="age">Age</label>
|
||||
<input
|
||||
id="age"
|
||||
type="number"
|
||||
value={form.age ?? ""}
|
||||
onChange={(e) =>
|
||||
updateField("age", e.target.value ? Number(e.target.value) : null)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="gender">Gender</label>
|
||||
<input
|
||||
id="gender"
|
||||
type="text"
|
||||
value={form.gender || ""}
|
||||
onChange={(e) => updateField("gender", e.target.value || null)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="current_job">Current Job</label>
|
||||
<input
|
||||
id="current_job"
|
||||
type="text"
|
||||
value={form.current_job || ""}
|
||||
onChange={(e) =>
|
||||
updateField("current_job", e.target.value || null)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="timezone">Timezone</label>
|
||||
<input
|
||||
id="timezone"
|
||||
type="text"
|
||||
value={form.timezone || ""}
|
||||
onChange={(e) => updateField("timezone", e.target.value || null)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="profile_pic">Profile Picture URL</label>
|
||||
<input
|
||||
id="profile_pic"
|
||||
type="url"
|
||||
placeholder="https://example.com/photo.jpg"
|
||||
value={form.profile_pic || ""}
|
||||
onChange={(e) => updateField("profile_pic", e.target.value || null)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="bio">Bio</label>
|
||||
<textarea
|
||||
id="bio"
|
||||
value={form.bio || ""}
|
||||
onChange={(e) => updateField("bio", e.target.value || null)}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="goals">Goals</label>
|
||||
<textarea
|
||||
id="goals"
|
||||
value={form.goals || ""}
|
||||
onChange={(e) => updateField("goals", e.target.value || null)}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="social_structure_style">Social Structure Style</label>
|
||||
<input
|
||||
id="social_structure_style"
|
||||
type="text"
|
||||
value={form.social_structure_style || ""}
|
||||
onChange={(e) =>
|
||||
updateField("social_structure_style", e.target.value || null)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="self_sufficiency_score">
|
||||
Self-Sufficiency Score (1-10)
|
||||
</label>
|
||||
<input
|
||||
id="self_sufficiency_score"
|
||||
type="number"
|
||||
min="1"
|
||||
max="10"
|
||||
value={form.self_sufficiency_score ?? ""}
|
||||
onChange={(e) =>
|
||||
updateField(
|
||||
"self_sufficiency_score",
|
||||
e.target.value ? Number(e.target.value) : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="safe_conversation_starters">
|
||||
Safe Conversation Starters
|
||||
</label>
|
||||
<textarea
|
||||
id="safe_conversation_starters"
|
||||
value={form.safe_conversation_starters || ""}
|
||||
onChange={(e) =>
|
||||
updateField("safe_conversation_starters", e.target.value || null)
|
||||
}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="topics_to_avoid">Topics to Avoid</label>
|
||||
<textarea
|
||||
id="topics_to_avoid"
|
||||
value={form.topics_to_avoid || ""}
|
||||
onChange={(e) =>
|
||||
updateField("topics_to_avoid", e.target.value || null)
|
||||
}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="ssn">SSN</label>
|
||||
<input
|
||||
id="ssn"
|
||||
type="text"
|
||||
value={form.ssn || ""}
|
||||
onChange={(e) => updateField("ssn", e.target.value || null)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{allNeeds.length > 0 && (
|
||||
<div className="form-group">
|
||||
<label>Needs/Accommodations</label>
|
||||
<div className="checkbox-group">
|
||||
{allNeeds.map((need) => (
|
||||
<label key={need.id} className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.need_ids?.includes(need.id) || false}
|
||||
onChange={() => toggleNeed(need.id)}
|
||||
/>
|
||||
{need.name}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn btn-primary" disabled={submitting}>
|
||||
{submitting ? "Saving..." : "Save"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn"
|
||||
onClick={() => navigate(isEdit ? `/contacts/${id}` : "/contacts")}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { api } from "../api/client";
|
||||
import type { ContactListItem } from "../types";
|
||||
|
||||
export function ContactList() {
|
||||
const [contacts, setContacts] = useState<ContactListItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
api.contacts
|
||||
.list()
|
||||
.then(setContacts)
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!confirm("Delete this contact?")) return;
|
||||
try {
|
||||
await api.contacts.delete(id);
|
||||
setContacts((prev) => prev.filter((c) => c.id !== id));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Delete failed");
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div>Loading...</div>;
|
||||
if (error) return <div className="error">Error: {error}</div>;
|
||||
|
||||
return (
|
||||
<div className="contact-list">
|
||||
<div className="header">
|
||||
<h1>Contacts</h1>
|
||||
<Link to="/contacts/new" className="btn btn-primary">
|
||||
Add Contact
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{contacts.length === 0 ? (
|
||||
<p>No contacts yet.</p>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Job</th>
|
||||
<th>Timezone</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{contacts.map((contact) => (
|
||||
<tr key={contact.id}>
|
||||
<td>
|
||||
<Link to={`/contacts/${contact.id}`}>{contact.name}</Link>
|
||||
</td>
|
||||
<td>{contact.current_job || "-"}</td>
|
||||
<td>{contact.timezone || "-"}</td>
|
||||
<td>
|
||||
<Link to={`/contacts/${contact.id}/edit`} className="btn">
|
||||
Edit
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => handleDelete(contact.id)}
|
||||
className="btn btn-danger"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { api } from "../api/client";
|
||||
import type { Need, NeedCreate } from "../types";
|
||||
|
||||
export function NeedList() {
|
||||
const [needs, setNeeds] = useState<Need[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [form, setForm] = useState<NeedCreate>({ name: "", description: null });
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
api.needs
|
||||
.list()
|
||||
.then(setNeeds)
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!form.name.trim()) return;
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const created = await api.needs.create(form);
|
||||
setNeeds((prev) => [...prev, created]);
|
||||
setForm({ name: "", description: null });
|
||||
setShowForm(false);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Create failed");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!confirm("Delete this need?")) return;
|
||||
try {
|
||||
await api.needs.delete(id);
|
||||
setNeeds((prev) => prev.filter((n) => n.id !== id));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Delete failed");
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div>Loading...</div>;
|
||||
|
||||
return (
|
||||
<div className="need-list">
|
||||
<div className="header">
|
||||
<h1>Needs / Accommodations</h1>
|
||||
<button
|
||||
onClick={() => setShowForm(!showForm)}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
{showForm ? "Cancel" : "Add Need"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && <div className="error">{error}</div>}
|
||||
|
||||
{showForm && (
|
||||
<form onSubmit={handleSubmit} className="need-form">
|
||||
<div className="form-group">
|
||||
<label htmlFor="name">Name *</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
placeholder="e.g., Light Sensitive, ADHD"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
value={form.description || ""}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, description: e.target.value || null })
|
||||
}
|
||||
placeholder="Optional description..."
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary" disabled={submitting}>
|
||||
{submitting ? "Creating..." : "Create"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{needs.length === 0 ? (
|
||||
<p>No needs defined yet.</p>
|
||||
) : (
|
||||
<ul className="need-items">
|
||||
{needs.map((need) => (
|
||||
<li key={need.id}>
|
||||
<div className="need-info">
|
||||
<strong>{need.name}</strong>
|
||||
{need.description && <p>{need.description}</p>}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDelete(need.id)}
|
||||
className="btn btn-danger"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,330 +0,0 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { api } from "../api/client";
|
||||
import type { GraphData, GraphEdge, GraphNode } from "../types";
|
||||
import { RELATIONSHIP_TYPES } from "../types";
|
||||
|
||||
interface SimNode extends GraphNode {
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
}
|
||||
|
||||
interface SimEdge extends GraphEdge {
|
||||
sourceNode: SimNode;
|
||||
targetNode: SimNode;
|
||||
}
|
||||
|
||||
export function RelationshipGraph() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const [data, setData] = useState<GraphData | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedNode, setSelectedNode] = useState<SimNode | null>(null);
|
||||
const nodesRef = useRef<SimNode[]>([]);
|
||||
const edgesRef = useRef<SimEdge[]>([]);
|
||||
const dragNodeRef = useRef<SimNode | null>(null);
|
||||
const animationRef = useRef<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
api.graph.get()
|
||||
.then(setData)
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!data || !canvasRef.current) return;
|
||||
|
||||
const canvas = canvasRef.current;
|
||||
const maybeCtx = canvas.getContext("2d");
|
||||
if (!maybeCtx) return;
|
||||
const ctx: CanvasRenderingContext2D = maybeCtx;
|
||||
|
||||
const width = canvas.width;
|
||||
const height = canvas.height;
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
|
||||
// Initialize nodes with random positions
|
||||
const nodes: SimNode[] = data.nodes.map((node) => ({
|
||||
...node,
|
||||
x: centerX + (Math.random() - 0.5) * 300,
|
||||
y: centerY + (Math.random() - 0.5) * 300,
|
||||
vx: 0,
|
||||
vy: 0,
|
||||
}));
|
||||
nodesRef.current = nodes;
|
||||
|
||||
const nodeMap = new Map(nodes.map((n) => [n.id, n]));
|
||||
|
||||
// Create edges with node references
|
||||
const edges: SimEdge[] = data.edges
|
||||
.map((edge) => {
|
||||
const sourceNode = nodeMap.get(edge.source);
|
||||
const targetNode = nodeMap.get(edge.target);
|
||||
if (!sourceNode || !targetNode) return null;
|
||||
return { ...edge, sourceNode, targetNode };
|
||||
})
|
||||
.filter((e): e is SimEdge => e !== null);
|
||||
edgesRef.current = edges;
|
||||
|
||||
// Force simulation parameters
|
||||
const repulsion = 5000;
|
||||
const springStrength = 0.05;
|
||||
const baseSpringLength = 150;
|
||||
const damping = 0.9;
|
||||
const centerPull = 0.01;
|
||||
|
||||
function simulate() {
|
||||
const nodes = nodesRef.current;
|
||||
const edges = edgesRef.current;
|
||||
|
||||
// Reset forces
|
||||
for (const node of nodes) {
|
||||
node.vx = 0;
|
||||
node.vy = 0;
|
||||
}
|
||||
|
||||
// Repulsion between all nodes
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
for (let j = i + 1; j < nodes.length; j++) {
|
||||
const dx = nodes[j].x - nodes[i].x;
|
||||
const dy = nodes[j].y - nodes[i].y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy) || 1;
|
||||
const force = repulsion / (dist * dist);
|
||||
const fx = (dx / dist) * force;
|
||||
const fy = (dy / dist) * force;
|
||||
nodes[i].vx -= fx;
|
||||
nodes[i].vy -= fy;
|
||||
nodes[j].vx += fx;
|
||||
nodes[j].vy += fy;
|
||||
}
|
||||
}
|
||||
|
||||
// Spring forces for edges - closer relationships = shorter springs
|
||||
// Weight is 1-10, normalize to 0-1 for calculations
|
||||
for (const edge of edges) {
|
||||
const dx = edge.targetNode.x - edge.sourceNode.x;
|
||||
const dy = edge.targetNode.y - edge.sourceNode.y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy) || 1;
|
||||
// Higher weight (1-10) = shorter ideal length
|
||||
// Normalize: weight 10 -> 0.5x length, weight 1 -> 1.4x length
|
||||
const normalizedWeight = edge.closeness_weight / 10;
|
||||
const idealLength = baseSpringLength * (1.5 - normalizedWeight);
|
||||
const displacement = dist - idealLength;
|
||||
const force = springStrength * displacement;
|
||||
const fx = (dx / dist) * force;
|
||||
const fy = (dy / dist) * force;
|
||||
edge.sourceNode.vx += fx;
|
||||
edge.sourceNode.vy += fy;
|
||||
edge.targetNode.vx -= fx;
|
||||
edge.targetNode.vy -= fy;
|
||||
}
|
||||
|
||||
// Pull toward center
|
||||
for (const node of nodes) {
|
||||
node.vx += (centerX - node.x) * centerPull;
|
||||
node.vy += (centerY - node.y) * centerPull;
|
||||
}
|
||||
|
||||
// Apply velocities with damping (skip dragged node)
|
||||
for (const node of nodes) {
|
||||
if (node === dragNodeRef.current) continue;
|
||||
node.x += node.vx * damping;
|
||||
node.y += node.vy * damping;
|
||||
// Keep within bounds
|
||||
node.x = Math.max(30, Math.min(width - 30, node.x));
|
||||
node.y = Math.max(30, Math.min(height - 30, node.y));
|
||||
}
|
||||
}
|
||||
|
||||
function getEdgeColor(weight: number): string {
|
||||
// Interpolate from light gray (distant) to dark blue (close)
|
||||
// weight is 1-10, normalize to 0-1
|
||||
const normalized = weight / 10;
|
||||
const hue = 220;
|
||||
const saturation = 70;
|
||||
const lightness = 80 - normalized * 40;
|
||||
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
|
||||
}
|
||||
|
||||
function draw(context: CanvasRenderingContext2D) {
|
||||
const nodes = nodesRef.current;
|
||||
const edges = edgesRef.current;
|
||||
|
||||
context.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw edges
|
||||
for (const edge of edges) {
|
||||
// Weight is 1-10, scale line width accordingly
|
||||
const lineWidth = 1 + (edge.closeness_weight / 10) * 3;
|
||||
context.strokeStyle = getEdgeColor(edge.closeness_weight);
|
||||
context.lineWidth = lineWidth;
|
||||
context.beginPath();
|
||||
context.moveTo(edge.sourceNode.x, edge.sourceNode.y);
|
||||
context.lineTo(edge.targetNode.x, edge.targetNode.y);
|
||||
context.stroke();
|
||||
|
||||
// Draw relationship type label at midpoint
|
||||
const midX = (edge.sourceNode.x + edge.targetNode.x) / 2;
|
||||
const midY = (edge.sourceNode.y + edge.targetNode.y) / 2;
|
||||
context.fillStyle = "#666";
|
||||
context.font = "10px sans-serif";
|
||||
context.textAlign = "center";
|
||||
const typeInfo = RELATIONSHIP_TYPES.find(t => t.value === edge.relationship_type);
|
||||
const label = typeInfo?.displayName || edge.relationship_type;
|
||||
context.fillText(label, midX, midY - 5);
|
||||
}
|
||||
|
||||
// Draw nodes
|
||||
for (const node of nodes) {
|
||||
const isSelected = node === selectedNode;
|
||||
const radius = isSelected ? 25 : 20;
|
||||
|
||||
// Node circle
|
||||
context.beginPath();
|
||||
context.arc(node.x, node.y, radius, 0, Math.PI * 2);
|
||||
context.fillStyle = isSelected ? "#0066cc" : "#fff";
|
||||
context.fill();
|
||||
context.strokeStyle = "#0066cc";
|
||||
context.lineWidth = 2;
|
||||
context.stroke();
|
||||
|
||||
// Node label
|
||||
context.fillStyle = isSelected ? "#fff" : "#333";
|
||||
context.font = "12px sans-serif";
|
||||
context.textAlign = "center";
|
||||
context.textBaseline = "middle";
|
||||
const name = node.name.length > 10 ? node.name.slice(0, 9) + "…" : node.name;
|
||||
context.fillText(name, node.x, node.y);
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
simulate();
|
||||
draw(ctx);
|
||||
animationRef.current = requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
};
|
||||
}, [data, selectedNode]);
|
||||
|
||||
// Mouse interaction handlers
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
function getNodeAtPosition(x: number, y: number): SimNode | null {
|
||||
for (const node of nodesRef.current) {
|
||||
const dx = x - node.x;
|
||||
const dy = y - node.y;
|
||||
if (dx * dx + dy * dy < 400) {
|
||||
return node;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function handleMouseDown(e: MouseEvent) {
|
||||
const rect = canvas!.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
const node = getNodeAtPosition(x, y);
|
||||
if (node) {
|
||||
dragNodeRef.current = node;
|
||||
setSelectedNode(node);
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseMove(e: MouseEvent) {
|
||||
if (!dragNodeRef.current) return;
|
||||
const rect = canvas!.getBoundingClientRect();
|
||||
dragNodeRef.current.x = e.clientX - rect.left;
|
||||
dragNodeRef.current.y = e.clientY - rect.top;
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
dragNodeRef.current = null;
|
||||
}
|
||||
|
||||
canvas.addEventListener("mousedown", handleMouseDown);
|
||||
canvas.addEventListener("mousemove", handleMouseMove);
|
||||
canvas.addEventListener("mouseup", handleMouseUp);
|
||||
canvas.addEventListener("mouseleave", handleMouseUp);
|
||||
|
||||
return () => {
|
||||
canvas.removeEventListener("mousedown", handleMouseDown);
|
||||
canvas.removeEventListener("mousemove", handleMouseMove);
|
||||
canvas.removeEventListener("mouseup", handleMouseUp);
|
||||
canvas.removeEventListener("mouseleave", handleMouseUp);
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (loading) return <p>Loading graph...</p>;
|
||||
if (error) return <div className="error">{error}</div>;
|
||||
if (!data) return <p>No data available</p>;
|
||||
|
||||
return (
|
||||
<div className="graph-container">
|
||||
<div className="header">
|
||||
<h1>Relationship Graph</h1>
|
||||
</div>
|
||||
<p className="graph-hint">
|
||||
Drag nodes to reposition. Closer relationships have shorter, darker edges.
|
||||
</p>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={900}
|
||||
height={600}
|
||||
style={{
|
||||
border: "1px solid var(--color-border)",
|
||||
borderRadius: "8px",
|
||||
background: "var(--color-bg)",
|
||||
cursor: "grab",
|
||||
}}
|
||||
/>
|
||||
{selectedNode && (
|
||||
<div className="selected-info">
|
||||
<h3>{selectedNode.name}</h3>
|
||||
{selectedNode.current_job && <p>Job: {selectedNode.current_job}</p>}
|
||||
<a href={`/contacts/${selectedNode.id}`}>View details</a>
|
||||
</div>
|
||||
)}
|
||||
<div className="legend">
|
||||
<h4>Relationship Closeness (1-10)</h4>
|
||||
<div className="legend-items">
|
||||
<div className="legend-item">
|
||||
<span className="legend-line" style={{ background: getEdgeColorCSS(10), height: "4px" }}></span>
|
||||
<span>10 - Very Close (Spouse, Partner)</span>
|
||||
</div>
|
||||
<div className="legend-item">
|
||||
<span className="legend-line" style={{ background: getEdgeColorCSS(7), height: "3px" }}></span>
|
||||
<span>7 - Close (Family, Best Friend)</span>
|
||||
</div>
|
||||
<div className="legend-item">
|
||||
<span className="legend-line" style={{ background: getEdgeColorCSS(4), height: "2px" }}></span>
|
||||
<span>4 - Moderate (Friend, Colleague)</span>
|
||||
</div>
|
||||
<div className="legend-item">
|
||||
<span className="legend-line" style={{ background: getEdgeColorCSS(2), height: "1px" }}></span>
|
||||
<span>2 - Distant (Acquaintance)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getEdgeColorCSS(weight: number): string {
|
||||
// weight is 1-10, normalize to 0-1
|
||||
const normalized = weight / 10;
|
||||
const hue = 220;
|
||||
const saturation = 70;
|
||||
const lightness = 80 - normalized * 40;
|
||||
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
:root {
|
||||
/* Light theme (default) */
|
||||
--color-bg: #f5f5f5;
|
||||
--color-bg-card: #ffffff;
|
||||
--color-bg-hover: #f0f0f0;
|
||||
--color-bg-muted: #f9f9f9;
|
||||
--color-bg-error: #ffe0e0;
|
||||
|
||||
--color-text: #333333;
|
||||
--color-text-muted: #666666;
|
||||
--color-text-error: #cc0000;
|
||||
|
||||
--color-border: #dddddd;
|
||||
--color-border-light: #eeeeee;
|
||||
--color-border-lighter: #f0f0f0;
|
||||
|
||||
--color-primary: #0066cc;
|
||||
--color-primary-hover: #0055aa;
|
||||
|
||||
--color-danger: #cc3333;
|
||||
--color-danger-hover: #aa2222;
|
||||
|
||||
--color-tag-bg: #e0e0e0;
|
||||
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-bg: #1a1a1a;
|
||||
--color-bg-card: #2d2d2d;
|
||||
--color-bg-hover: #3d3d3d;
|
||||
--color-bg-muted: #252525;
|
||||
--color-bg-error: #4a2020;
|
||||
|
||||
--color-text: #e0e0e0;
|
||||
--color-text-muted: #a0a0a0;
|
||||
--color-text-error: #ff6b6b;
|
||||
|
||||
--color-border: #404040;
|
||||
--color-border-light: #353535;
|
||||
--color-border-lighter: #303030;
|
||||
|
||||
--color-primary: #4da6ff;
|
||||
--color-primary-hover: #7dbfff;
|
||||
|
||||
--color-danger: #ff6b6b;
|
||||
--color-danger-hover: #ff8a8a;
|
||||
|
||||
--color-tag-bg: #404040;
|
||||
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import App from "./App.tsx";
|
||||
import "./index.css";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</StrictMode>
|
||||
);
|
||||
@@ -1,155 +0,0 @@
|
||||
export interface Need {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string | null;
|
||||
}
|
||||
|
||||
export interface NeedCreate {
|
||||
name: string;
|
||||
description?: string | null;
|
||||
}
|
||||
|
||||
export const RELATIONSHIP_TYPES = [
|
||||
{ value: 'spouse', displayName: 'Spouse', defaultWeight: 10 },
|
||||
{ value: 'partner', displayName: 'Partner', defaultWeight: 10 },
|
||||
{ value: 'parent', displayName: 'Parent', defaultWeight: 9 },
|
||||
{ value: 'child', displayName: 'Child', defaultWeight: 9 },
|
||||
{ value: 'sibling', displayName: 'Sibling', defaultWeight: 9 },
|
||||
{ value: 'best_friend', displayName: 'Best Friend', defaultWeight: 8 },
|
||||
{ value: 'grandparent', displayName: 'Grandparent', defaultWeight: 7 },
|
||||
{ value: 'grandchild', displayName: 'Grandchild', defaultWeight: 7 },
|
||||
{ value: 'aunt_uncle', displayName: 'Aunt/Uncle', defaultWeight: 7 },
|
||||
{ value: 'niece_nephew', displayName: 'Niece/Nephew', defaultWeight: 7 },
|
||||
{ value: 'cousin', displayName: 'Cousin', defaultWeight: 7 },
|
||||
{ value: 'in_law', displayName: 'In-Law', defaultWeight: 7 },
|
||||
{ value: 'close_friend', displayName: 'Close Friend', defaultWeight: 6 },
|
||||
{ value: 'friend', displayName: 'Friend', defaultWeight: 6 },
|
||||
{ value: 'mentor', displayName: 'Mentor', defaultWeight: 5 },
|
||||
{ value: 'mentee', displayName: 'Mentee', defaultWeight: 5 },
|
||||
{ value: 'business_partner', displayName: 'Business Partner', defaultWeight: 5 },
|
||||
{ value: 'colleague', displayName: 'Colleague', defaultWeight: 4 },
|
||||
{ value: 'manager', displayName: 'Manager', defaultWeight: 4 },
|
||||
{ value: 'direct_report', displayName: 'Direct Report', defaultWeight: 4 },
|
||||
{ value: 'client', displayName: 'Client', defaultWeight: 4 },
|
||||
{ value: 'acquaintance', displayName: 'Acquaintance', defaultWeight: 3 },
|
||||
{ value: 'neighbor', displayName: 'Neighbor', defaultWeight: 3 },
|
||||
{ value: 'ex', displayName: 'Ex', defaultWeight: 2 },
|
||||
{ value: 'other', displayName: 'Other', defaultWeight: 2 },
|
||||
] as const;
|
||||
|
||||
export type RelationshipTypeValue = typeof RELATIONSHIP_TYPES[number]['value'];
|
||||
|
||||
export interface ContactRelationship {
|
||||
contact_id: number;
|
||||
related_contact_id: number;
|
||||
relationship_type: string;
|
||||
closeness_weight: number;
|
||||
}
|
||||
|
||||
export interface ContactRelationshipCreate {
|
||||
related_contact_id: number;
|
||||
relationship_type: RelationshipTypeValue;
|
||||
closeness_weight?: number;
|
||||
}
|
||||
|
||||
export interface ContactRelationshipUpdate {
|
||||
relationship_type?: RelationshipTypeValue;
|
||||
closeness_weight?: number;
|
||||
}
|
||||
|
||||
export interface GraphNode {
|
||||
id: number;
|
||||
name: string;
|
||||
current_job: string | null;
|
||||
}
|
||||
|
||||
export interface GraphEdge {
|
||||
source: number;
|
||||
target: number;
|
||||
relationship_type: string;
|
||||
closeness_weight: number;
|
||||
}
|
||||
|
||||
export interface GraphData {
|
||||
nodes: GraphNode[];
|
||||
edges: GraphEdge[];
|
||||
}
|
||||
|
||||
export interface Contact {
|
||||
id: number;
|
||||
name: string;
|
||||
age: number | null;
|
||||
bio: string | null;
|
||||
current_job: string | null;
|
||||
gender: string | null;
|
||||
goals: string | null;
|
||||
legal_name: string | null;
|
||||
profile_pic: string | null;
|
||||
safe_conversation_starters: string | null;
|
||||
self_sufficiency_score: number | null;
|
||||
social_structure_style: string | null;
|
||||
ssn: string | null;
|
||||
suffix: string | null;
|
||||
timezone: string | null;
|
||||
topics_to_avoid: string | null;
|
||||
needs: Need[];
|
||||
related_to: ContactRelationship[];
|
||||
related_from: ContactRelationship[];
|
||||
}
|
||||
|
||||
export interface ContactListItem {
|
||||
id: number;
|
||||
name: string;
|
||||
age: number | null;
|
||||
bio: string | null;
|
||||
current_job: string | null;
|
||||
gender: string | null;
|
||||
goals: string | null;
|
||||
legal_name: string | null;
|
||||
profile_pic: string | null;
|
||||
safe_conversation_starters: string | null;
|
||||
self_sufficiency_score: number | null;
|
||||
social_structure_style: string | null;
|
||||
ssn: string | null;
|
||||
suffix: string | null;
|
||||
timezone: string | null;
|
||||
topics_to_avoid: string | null;
|
||||
}
|
||||
|
||||
export interface ContactCreate {
|
||||
name: string;
|
||||
age?: number | null;
|
||||
bio?: string | null;
|
||||
current_job?: string | null;
|
||||
gender?: string | null;
|
||||
goals?: string | null;
|
||||
legal_name?: string | null;
|
||||
profile_pic?: string | null;
|
||||
safe_conversation_starters?: string | null;
|
||||
self_sufficiency_score?: number | null;
|
||||
social_structure_style?: string | null;
|
||||
ssn?: string | null;
|
||||
suffix?: string | null;
|
||||
timezone?: string | null;
|
||||
topics_to_avoid?: string | null;
|
||||
need_ids?: number[];
|
||||
}
|
||||
|
||||
export interface ContactUpdate {
|
||||
name?: string | null;
|
||||
age?: number | null;
|
||||
bio?: string | null;
|
||||
current_job?: string | null;
|
||||
gender?: string | null;
|
||||
goals?: string | null;
|
||||
legal_name?: string | null;
|
||||
profile_pic?: string | null;
|
||||
safe_conversation_starters?: string | null;
|
||||
self_sufficiency_score?: number | null;
|
||||
social_structure_style?: string | null;
|
||||
ssn?: string | null;
|
||||
suffix?: string | null;
|
||||
timezone?: string | null;
|
||||
topics_to_avoid?: string | null;
|
||||
need_ids?: number[] | null;
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": "http://localhost:8000",
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -1,27 +1,22 @@
|
||||
"""FastAPI interface for Contact database."""
|
||||
|
||||
import logging
|
||||
import shutil
|
||||
import subprocess
|
||||
import tempfile
|
||||
from collections.abc import AsyncIterator
|
||||
from contextlib import asynccontextmanager
|
||||
from os import environ
|
||||
from pathlib import Path
|
||||
from typing import Annotated
|
||||
|
||||
import typer
|
||||
import uvicorn
|
||||
from fastapi import FastAPI
|
||||
|
||||
from python.api.routers import contact_router, create_frontend_router
|
||||
from python.api.routers import contact_router, views_router
|
||||
from python.common import configure_logger
|
||||
from python.orm.common import get_postgres_engine
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
|
||||
def create_app(frontend_dir: Path | None = None) -> FastAPI:
|
||||
def create_app() -> FastAPI:
|
||||
"""Create and configure the FastAPI application."""
|
||||
|
||||
@asynccontextmanager
|
||||
@@ -34,82 +29,20 @@ def create_app(frontend_dir: Path | None = None) -> FastAPI:
|
||||
app = FastAPI(title="Contact Database API", lifespan=lifespan)
|
||||
|
||||
app.include_router(contact_router)
|
||||
|
||||
if frontend_dir:
|
||||
logger.info(f"Serving frontend from {frontend_dir}")
|
||||
frontend_router = create_frontend_router(frontend_dir)
|
||||
app.include_router(frontend_router)
|
||||
app.include_router(views_router)
|
||||
|
||||
return app
|
||||
|
||||
|
||||
def build_frontend(source_dir: Path | None, cache_dir: Path | None = None) -> Path | None:
|
||||
"""Run npm build and copy output to a temp directory.
|
||||
|
||||
Works even if source_dir is read-only by copying to a temp directory first.
|
||||
|
||||
Args:
|
||||
source_dir: Frontend source directory.
|
||||
cache_dir: Optional npm cache directory for faster repeated builds.
|
||||
|
||||
Returns:
|
||||
Path to frontend build directory, or None if no source_dir provided.
|
||||
"""
|
||||
if not source_dir:
|
||||
return None
|
||||
|
||||
if not source_dir.exists():
|
||||
error = f"Frontend directory {source_dir} does not exist"
|
||||
raise FileExistsError(error)
|
||||
|
||||
logger.info("Building frontend from %s...", source_dir)
|
||||
|
||||
# Copy source to a writable temp directory
|
||||
build_dir = Path(tempfile.mkdtemp(prefix="contact_frontend_build_"))
|
||||
shutil.copytree(source_dir, build_dir, dirs_exist_ok=True)
|
||||
|
||||
env = dict(environ)
|
||||
if cache_dir:
|
||||
cache_dir.mkdir(parents=True, exist_ok=True)
|
||||
env["npm_config_cache"] = str(cache_dir)
|
||||
|
||||
subprocess.run(["npm", "install"], cwd=build_dir, env=env, check=True) # noqa: S607
|
||||
subprocess.run(["npm", "run", "build"], cwd=build_dir, env=env, check=True) # noqa: S607
|
||||
|
||||
dist_dir = build_dir / "dist"
|
||||
if not dist_dir.exists():
|
||||
error = f"Build output not found at {dist_dir}"
|
||||
raise FileNotFoundError(error)
|
||||
|
||||
output_dir = Path(tempfile.mkdtemp(prefix="contact_frontend_"))
|
||||
shutil.copytree(dist_dir, output_dir, dirs_exist_ok=True)
|
||||
logger.info(f"Frontend built and copied to {output_dir}")
|
||||
|
||||
shutil.rmtree(build_dir)
|
||||
|
||||
return output_dir
|
||||
|
||||
|
||||
def serve(
|
||||
host: Annotated[str, typer.Option("--host", "-h", help="Host to bind to")],
|
||||
frontend_dir: Annotated[
|
||||
Path | None,
|
||||
typer.Option(
|
||||
"--frontend-dir",
|
||||
"-f",
|
||||
help="Frontend source directory. If provided, runs npm build and serves from temp dir.",
|
||||
),
|
||||
] = None,
|
||||
port: Annotated[int, typer.Option("--port", "-p", help="Port to bind to")] = 8000,
|
||||
log_level: Annotated[str, typer.Option("--log-level", "-l", help="Log level")] = "INFO",
|
||||
) -> None:
|
||||
"""Start the Contact API server."""
|
||||
configure_logger(log_level)
|
||||
|
||||
cache_dir = Path(environ["HOME"]) / ".npm"
|
||||
serve_dir = build_frontend(frontend_dir, cache_dir=cache_dir)
|
||||
|
||||
app = create_app(frontend_dir=serve_dir)
|
||||
app = create_app()
|
||||
uvicorn.run(app, host=host, port=port)
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"""API routers."""
|
||||
|
||||
from python.api.routers.contact import router as contact_router
|
||||
from python.api.routers.frontend import create_frontend_router
|
||||
from python.api.routers.views import router as views_router
|
||||
|
||||
__all__ = ["contact_router", "create_frontend_router"]
|
||||
__all__ = ["contact_router", "views_router"]
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
"""Contact API router."""
|
||||
|
||||
from fastapi import APIRouter, HTTPException
|
||||
from pathlib import Path
|
||||
|
||||
from fastapi import APIRouter, HTTPException, Request
|
||||
from fastapi.responses import HTMLResponse
|
||||
from fastapi.templating import Jinja2Templates
|
||||
from pydantic import BaseModel
|
||||
from sqlalchemy import select
|
||||
from sqlalchemy.orm import selectinload
|
||||
@@ -8,6 +12,14 @@ from sqlalchemy.orm import selectinload
|
||||
from python.api.dependencies import DbSession
|
||||
from python.orm.richie.contact import Contact, ContactRelationship, Need, RelationshipType
|
||||
|
||||
TEMPLATES_DIR = Path(__file__).parent.parent / "templates"
|
||||
templates = Jinja2Templates(directory=TEMPLATES_DIR)
|
||||
|
||||
|
||||
def _is_htmx(request: Request) -> bool:
|
||||
"""Check if the request is from HTMX."""
|
||||
return request.headers.get("HX-Request") == "true"
|
||||
|
||||
|
||||
class NeedBase(BaseModel):
|
||||
"""Base schema for Need."""
|
||||
@@ -180,14 +192,16 @@ def get_need(need_id: int, db: DbSession) -> Need:
|
||||
return need
|
||||
|
||||
|
||||
@router.delete("/needs/{need_id}")
|
||||
def delete_need(need_id: int, db: DbSession) -> dict[str, bool]:
|
||||
@router.delete("/needs/{need_id}", response_model=None)
|
||||
def delete_need(need_id: int, request: Request, db: DbSession) -> dict[str, bool] | HTMLResponse:
|
||||
"""Delete a need by ID."""
|
||||
need = db.get(Need, need_id)
|
||||
if not need:
|
||||
raise HTTPException(status_code=404, detail="Need not found")
|
||||
db.delete(need)
|
||||
db.commit()
|
||||
if _is_htmx(request):
|
||||
return HTMLResponse("")
|
||||
return {"deleted": True}
|
||||
|
||||
|
||||
@@ -261,14 +275,16 @@ def update_contact(
|
||||
return db_contact
|
||||
|
||||
|
||||
@router.delete("/contacts/{contact_id}")
|
||||
def delete_contact(contact_id: int, db: DbSession) -> dict[str, bool]:
|
||||
@router.delete("/contacts/{contact_id}", response_model=None)
|
||||
def delete_contact(contact_id: int, request: Request, db: DbSession) -> dict[str, bool] | HTMLResponse:
|
||||
"""Delete a contact by ID."""
|
||||
contact = db.get(Contact, contact_id)
|
||||
if not contact:
|
||||
raise HTTPException(status_code=404, detail="Contact not found")
|
||||
db.delete(contact)
|
||||
db.commit()
|
||||
if _is_htmx(request):
|
||||
return HTMLResponse("")
|
||||
return {"deleted": True}
|
||||
|
||||
|
||||
@@ -294,12 +310,13 @@ def add_need_to_contact(
|
||||
return {"added": True}
|
||||
|
||||
|
||||
@router.delete("/contacts/{contact_id}/needs/{need_id}")
|
||||
@router.delete("/contacts/{contact_id}/needs/{need_id}", response_model=None)
|
||||
def remove_need_from_contact(
|
||||
contact_id: int,
|
||||
need_id: int,
|
||||
request: Request,
|
||||
db: DbSession,
|
||||
) -> dict[str, bool]:
|
||||
) -> dict[str, bool] | HTMLResponse:
|
||||
"""Remove a need from a contact."""
|
||||
contact = db.get(Contact, contact_id)
|
||||
if not contact:
|
||||
@@ -313,6 +330,8 @@ def remove_need_from_contact(
|
||||
contact.needs.remove(need)
|
||||
db.commit()
|
||||
|
||||
if _is_htmx(request):
|
||||
return HTMLResponse("")
|
||||
return {"removed": True}
|
||||
|
||||
|
||||
@@ -404,12 +423,13 @@ def update_contact_relationship(
|
||||
return relationship
|
||||
|
||||
|
||||
@router.delete("/contacts/{contact_id}/relationships/{related_contact_id}")
|
||||
@router.delete("/contacts/{contact_id}/relationships/{related_contact_id}", response_model=None)
|
||||
def remove_contact_relationship(
|
||||
contact_id: int,
|
||||
related_contact_id: int,
|
||||
request: Request,
|
||||
db: DbSession,
|
||||
) -> dict[str, bool]:
|
||||
) -> dict[str, bool] | HTMLResponse:
|
||||
"""Remove a relationship between two contacts."""
|
||||
relationship = db.scalar(
|
||||
select(ContactRelationship).where(
|
||||
@@ -422,6 +442,8 @@ def remove_contact_relationship(
|
||||
|
||||
db.delete(relationship)
|
||||
db.commit()
|
||||
if _is_htmx(request):
|
||||
return HTMLResponse("")
|
||||
return {"deleted": True}
|
||||
|
||||
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
"""Frontend SPA router."""
|
||||
|
||||
from pathlib import Path
|
||||
|
||||
from fastapi import APIRouter
|
||||
from fastapi.responses import FileResponse
|
||||
from fastapi.staticfiles import StaticFiles
|
||||
|
||||
|
||||
def create_frontend_router(frontend_dir: Path) -> APIRouter:
|
||||
"""Create a router for serving the frontend SPA."""
|
||||
router = APIRouter(tags=["frontend"])
|
||||
|
||||
router.mount("/assets", StaticFiles(directory=frontend_dir / "assets"), name="assets")
|
||||
|
||||
@router.get("/{full_path:path}")
|
||||
async def serve_spa(full_path: str) -> FileResponse:
|
||||
"""Serve React SPA for all non-API routes."""
|
||||
file_path = frontend_dir / full_path
|
||||
if file_path.is_file():
|
||||
return FileResponse(file_path)
|
||||
return FileResponse(frontend_dir / "index.html")
|
||||
|
||||
return router
|
||||
397
python/api/routers/views.py
Normal file
397
python/api/routers/views.py
Normal file
@@ -0,0 +1,397 @@
|
||||
"""HTMX server-rendered view router."""
|
||||
|
||||
from pathlib import Path
|
||||
|
||||
from fastapi import APIRouter, Form, HTTPException, Request
|
||||
from fastapi.responses import HTMLResponse, RedirectResponse
|
||||
from fastapi.templating import Jinja2Templates
|
||||
from sqlalchemy import select
|
||||
from sqlalchemy.orm import selectinload
|
||||
|
||||
from python.api.dependencies import DbSession
|
||||
from python.orm.richie.contact import Contact, ContactRelationship, Need, RelationshipType
|
||||
|
||||
TEMPLATES_DIR = Path(__file__).parent.parent / "templates"
|
||||
templates = Jinja2Templates(directory=TEMPLATES_DIR)
|
||||
|
||||
router = APIRouter(tags=["views"])
|
||||
|
||||
FAMILIAL_TYPES = {"parent", "child", "sibling", "grandparent", "grandchild", "aunt_uncle", "niece_nephew", "cousin", "in_law"}
|
||||
FRIEND_TYPES = {"best_friend", "close_friend", "friend", "acquaintance", "neighbor"}
|
||||
PARTNER_TYPES = {"spouse", "partner"}
|
||||
PROFESSIONAL_TYPES = {"mentor", "mentee", "business_partner", "colleague", "manager", "direct_report", "client"}
|
||||
|
||||
|
||||
def _group_relationships(relationships: list[ContactRelationship]) -> dict[str, list[ContactRelationship]]:
|
||||
"""Group relationships by category."""
|
||||
groups: dict[str, list[ContactRelationship]] = {
|
||||
"familial": [],
|
||||
"partners": [],
|
||||
"friends": [],
|
||||
"professional": [],
|
||||
"other": [],
|
||||
}
|
||||
for rel in relationships:
|
||||
if rel.relationship_type in FAMILIAL_TYPES:
|
||||
groups["familial"].append(rel)
|
||||
elif rel.relationship_type in PARTNER_TYPES:
|
||||
groups["partners"].append(rel)
|
||||
elif rel.relationship_type in FRIEND_TYPES:
|
||||
groups["friends"].append(rel)
|
||||
elif rel.relationship_type in PROFESSIONAL_TYPES:
|
||||
groups["professional"].append(rel)
|
||||
else:
|
||||
groups["other"].append(rel)
|
||||
return groups
|
||||
|
||||
|
||||
def _build_contact_name_map(database: DbSession, contact: Contact) -> dict[int, str]:
|
||||
"""Build a mapping of contact IDs to names for relationship display."""
|
||||
related_ids = {rel.related_contact_id for rel in contact.related_to}
|
||||
related_ids |= {rel.contact_id for rel in contact.related_from}
|
||||
related_ids.discard(contact.id)
|
||||
|
||||
if not related_ids:
|
||||
return {}
|
||||
|
||||
related_contacts = list(
|
||||
database.scalars(select(Contact).where(Contact.id.in_(related_ids))).all()
|
||||
)
|
||||
return {related.id: related.name for related in related_contacts}
|
||||
|
||||
|
||||
def _get_relationship_type_display() -> dict[str, str]:
|
||||
"""Build a mapping of relationship type values to display names."""
|
||||
return {rel_type.value: rel_type.display_name for rel_type in RelationshipType}
|
||||
|
||||
|
||||
def _parse_contact_form(
|
||||
name: str,
|
||||
legal_name: str,
|
||||
suffix: str,
|
||||
age: str,
|
||||
gender: str,
|
||||
current_job: str,
|
||||
timezone: str,
|
||||
profile_pic: str,
|
||||
bio: str,
|
||||
goals: str,
|
||||
social_structure_style: str,
|
||||
self_sufficiency_score: str,
|
||||
safe_conversation_starters: str,
|
||||
topics_to_avoid: str,
|
||||
ssn: str,
|
||||
) -> dict:
|
||||
"""Parse form fields into a dict for contact creation/update."""
|
||||
return {
|
||||
"name": name,
|
||||
"legal_name": legal_name or None,
|
||||
"suffix": suffix or None,
|
||||
"age": int(age) if age else None,
|
||||
"gender": gender or None,
|
||||
"current_job": current_job or None,
|
||||
"timezone": timezone or None,
|
||||
"profile_pic": profile_pic or None,
|
||||
"bio": bio or None,
|
||||
"goals": goals or None,
|
||||
"social_structure_style": social_structure_style or None,
|
||||
"self_sufficiency_score": int(self_sufficiency_score) if self_sufficiency_score else None,
|
||||
"safe_conversation_starters": safe_conversation_starters or None,
|
||||
"topics_to_avoid": topics_to_avoid or None,
|
||||
"ssn": ssn or None,
|
||||
}
|
||||
|
||||
|
||||
@router.get("/", response_class=HTMLResponse)
|
||||
@router.get("/contacts", response_class=HTMLResponse)
|
||||
def contact_list_page(request: Request, database: DbSession) -> HTMLResponse:
|
||||
"""Render the contacts list page."""
|
||||
contacts = list(database.scalars(select(Contact)).all())
|
||||
return templates.TemplateResponse(
|
||||
request, "contact_list.html", {"contacts": contacts}
|
||||
)
|
||||
|
||||
|
||||
@router.get("/contacts/new", response_class=HTMLResponse)
|
||||
def new_contact_page(request: Request, database: DbSession) -> HTMLResponse:
|
||||
"""Render the new contact form page."""
|
||||
all_needs = list(database.scalars(select(Need)).all())
|
||||
return templates.TemplateResponse(
|
||||
request, "contact_form.html", {"contact": None, "all_needs": all_needs}
|
||||
)
|
||||
|
||||
|
||||
@router.post("/htmx/contacts/new")
|
||||
def create_contact_form(
|
||||
database: DbSession,
|
||||
name: str = Form(...),
|
||||
legal_name: str = Form(""),
|
||||
suffix: str = Form(""),
|
||||
age: str = Form(""),
|
||||
gender: str = Form(""),
|
||||
current_job: str = Form(""),
|
||||
timezone: str = Form(""),
|
||||
profile_pic: str = Form(""),
|
||||
bio: str = Form(""),
|
||||
goals: str = Form(""),
|
||||
social_structure_style: str = Form(""),
|
||||
self_sufficiency_score: str = Form(""),
|
||||
safe_conversation_starters: str = Form(""),
|
||||
topics_to_avoid: str = Form(""),
|
||||
ssn: str = Form(""),
|
||||
need_ids: list[int] = Form([]),
|
||||
) -> RedirectResponse:
|
||||
"""Handle the create contact form submission."""
|
||||
contact_data = _parse_contact_form(
|
||||
name, legal_name, suffix, age, gender, current_job, timezone,
|
||||
profile_pic, bio, goals, social_structure_style, self_sufficiency_score,
|
||||
safe_conversation_starters, topics_to_avoid, ssn,
|
||||
)
|
||||
contact = Contact(**contact_data)
|
||||
|
||||
if need_ids:
|
||||
needs = list(database.scalars(select(Need).where(Need.id.in_(need_ids))).all())
|
||||
contact.needs = needs
|
||||
|
||||
database.add(contact)
|
||||
database.commit()
|
||||
database.refresh(contact)
|
||||
return RedirectResponse(url=f"/contacts/{contact.id}", status_code=303)
|
||||
|
||||
|
||||
@router.get("/contacts/{contact_id}", response_class=HTMLResponse)
|
||||
def contact_detail_page(contact_id: int, request: Request, database: DbSession) -> HTMLResponse:
|
||||
"""Render the contact detail page."""
|
||||
contact = database.scalar(
|
||||
select(Contact)
|
||||
.where(Contact.id == contact_id)
|
||||
.options(
|
||||
selectinload(Contact.needs),
|
||||
selectinload(Contact.related_to),
|
||||
selectinload(Contact.related_from),
|
||||
)
|
||||
)
|
||||
if not contact:
|
||||
raise HTTPException(status_code=404, detail="Contact not found")
|
||||
|
||||
contact_names = _build_contact_name_map(database, contact)
|
||||
grouped_relationships = _group_relationships(contact.related_to)
|
||||
all_contacts = list(database.scalars(select(Contact)).all())
|
||||
all_needs = list(database.scalars(select(Need)).all())
|
||||
available_needs = [need for need in all_needs if need not in contact.needs]
|
||||
|
||||
return templates.TemplateResponse(
|
||||
request,
|
||||
"contact_detail.html",
|
||||
{
|
||||
"contact": contact,
|
||||
"contact_names": contact_names,
|
||||
"grouped_relationships": grouped_relationships,
|
||||
"all_contacts": all_contacts,
|
||||
"available_needs": available_needs,
|
||||
"relationship_types": list(RelationshipType),
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
@router.get("/contacts/{contact_id}/edit", response_class=HTMLResponse)
|
||||
def edit_contact_page(contact_id: int, request: Request, database: DbSession) -> HTMLResponse:
|
||||
"""Render the edit contact form page."""
|
||||
contact = database.scalar(
|
||||
select(Contact)
|
||||
.where(Contact.id == contact_id)
|
||||
.options(selectinload(Contact.needs))
|
||||
)
|
||||
if not contact:
|
||||
raise HTTPException(status_code=404, detail="Contact not found")
|
||||
|
||||
all_needs = list(database.scalars(select(Need)).all())
|
||||
return templates.TemplateResponse(
|
||||
request, "contact_form.html", {"contact": contact, "all_needs": all_needs}
|
||||
)
|
||||
|
||||
|
||||
@router.post("/htmx/contacts/{contact_id}/edit")
|
||||
def update_contact_form(
|
||||
contact_id: int,
|
||||
database: DbSession,
|
||||
name: str = Form(...),
|
||||
legal_name: str = Form(""),
|
||||
suffix: str = Form(""),
|
||||
age: str = Form(""),
|
||||
gender: str = Form(""),
|
||||
current_job: str = Form(""),
|
||||
timezone: str = Form(""),
|
||||
profile_pic: str = Form(""),
|
||||
bio: str = Form(""),
|
||||
goals: str = Form(""),
|
||||
social_structure_style: str = Form(""),
|
||||
self_sufficiency_score: str = Form(""),
|
||||
safe_conversation_starters: str = Form(""),
|
||||
topics_to_avoid: str = Form(""),
|
||||
ssn: str = Form(""),
|
||||
need_ids: list[int] = Form([]),
|
||||
) -> RedirectResponse:
|
||||
"""Handle the edit contact form submission."""
|
||||
contact = database.get(Contact, contact_id)
|
||||
if not contact:
|
||||
raise HTTPException(status_code=404, detail="Contact not found")
|
||||
|
||||
contact_data = _parse_contact_form(
|
||||
name, legal_name, suffix, age, gender, current_job, timezone,
|
||||
profile_pic, bio, goals, social_structure_style, self_sufficiency_score,
|
||||
safe_conversation_starters, topics_to_avoid, ssn,
|
||||
)
|
||||
|
||||
for key, value in contact_data.items():
|
||||
setattr(contact, key, value)
|
||||
|
||||
needs = list(database.scalars(select(Need).where(Need.id.in_(need_ids))).all()) if need_ids else []
|
||||
contact.needs = needs
|
||||
|
||||
database.commit()
|
||||
return RedirectResponse(url=f"/contacts/{contact_id}", status_code=303)
|
||||
|
||||
|
||||
@router.post("/htmx/contacts/{contact_id}/add-need", response_class=HTMLResponse)
|
||||
def add_need_to_contact_htmx(
|
||||
contact_id: int,
|
||||
request: Request,
|
||||
database: DbSession,
|
||||
need_id: int = Form(...),
|
||||
) -> HTMLResponse:
|
||||
"""Add a need to a contact and return updated manage-needs partial."""
|
||||
contact = database.scalar(
|
||||
select(Contact)
|
||||
.where(Contact.id == contact_id)
|
||||
.options(selectinload(Contact.needs))
|
||||
)
|
||||
if not contact:
|
||||
raise HTTPException(status_code=404, detail="Contact not found")
|
||||
|
||||
need = database.get(Need, need_id)
|
||||
if not need:
|
||||
raise HTTPException(status_code=404, detail="Need not found")
|
||||
|
||||
if need not in contact.needs:
|
||||
contact.needs.append(need)
|
||||
database.commit()
|
||||
database.refresh(contact)
|
||||
|
||||
return templates.TemplateResponse(
|
||||
request, "partials/manage_needs.html", {"contact": contact}
|
||||
)
|
||||
|
||||
|
||||
@router.post("/htmx/contacts/{contact_id}/add-relationship", response_class=HTMLResponse)
|
||||
def add_relationship_htmx(
|
||||
contact_id: int,
|
||||
request: Request,
|
||||
database: DbSession,
|
||||
related_contact_id: int = Form(...),
|
||||
relationship_type: str = Form(...),
|
||||
) -> HTMLResponse:
|
||||
"""Add a relationship and return updated manage-relationships partial."""
|
||||
contact = database.scalar(
|
||||
select(Contact)
|
||||
.where(Contact.id == contact_id)
|
||||
.options(selectinload(Contact.related_to))
|
||||
)
|
||||
if not contact:
|
||||
raise HTTPException(status_code=404, detail="Contact not found")
|
||||
|
||||
related_contact = database.get(Contact, related_contact_id)
|
||||
if not related_contact:
|
||||
raise HTTPException(status_code=404, detail="Related contact not found")
|
||||
|
||||
rel_type = RelationshipType(relationship_type)
|
||||
weight = rel_type.default_weight
|
||||
|
||||
relationship = ContactRelationship(
|
||||
contact_id=contact_id,
|
||||
related_contact_id=related_contact_id,
|
||||
relationship_type=relationship_type,
|
||||
closeness_weight=weight,
|
||||
)
|
||||
database.add(relationship)
|
||||
database.commit()
|
||||
database.refresh(contact)
|
||||
|
||||
contact_names = _build_contact_name_map(database, contact)
|
||||
return templates.TemplateResponse(
|
||||
request, "partials/manage_relationships.html",
|
||||
{"contact": contact, "contact_names": contact_names},
|
||||
)
|
||||
|
||||
|
||||
@router.post("/htmx/contacts/{contact_id}/relationships/{related_contact_id}/weight")
|
||||
def update_relationship_weight_htmx(
|
||||
contact_id: int,
|
||||
related_contact_id: int,
|
||||
database: DbSession,
|
||||
closeness_weight: int = Form(...),
|
||||
) -> HTMLResponse:
|
||||
"""Update a relationship's closeness weight from HTMX range input."""
|
||||
relationship = database.scalar(
|
||||
select(ContactRelationship).where(
|
||||
ContactRelationship.contact_id == contact_id,
|
||||
ContactRelationship.related_contact_id == related_contact_id,
|
||||
)
|
||||
)
|
||||
if not relationship:
|
||||
raise HTTPException(status_code=404, detail="Relationship not found")
|
||||
|
||||
relationship.closeness_weight = closeness_weight
|
||||
database.commit()
|
||||
return HTMLResponse("")
|
||||
|
||||
|
||||
@router.post("/htmx/needs", response_class=HTMLResponse)
|
||||
def create_need_htmx(
|
||||
request: Request,
|
||||
database: DbSession,
|
||||
name: str = Form(...),
|
||||
description: str = Form(""),
|
||||
) -> HTMLResponse:
|
||||
"""Create a need via form data and return updated needs list."""
|
||||
need = Need(name=name, description=description or None)
|
||||
database.add(need)
|
||||
database.commit()
|
||||
needs = list(database.scalars(select(Need)).all())
|
||||
return templates.TemplateResponse(request, "partials/need_items.html", {"needs": needs})
|
||||
|
||||
|
||||
@router.get("/needs", response_class=HTMLResponse)
|
||||
def needs_page(request: Request, database: DbSession) -> HTMLResponse:
|
||||
"""Render the needs list page."""
|
||||
needs = list(database.scalars(select(Need)).all())
|
||||
return templates.TemplateResponse(request, "need_list.html", {"needs": needs})
|
||||
|
||||
|
||||
@router.get("/graph", response_class=HTMLResponse)
|
||||
def graph_page(request: Request, database: DbSession) -> HTMLResponse:
|
||||
"""Render the relationship graph page."""
|
||||
contacts = list(database.scalars(select(Contact)).all())
|
||||
relationships = list(database.scalars(select(ContactRelationship)).all())
|
||||
|
||||
graph_data = {
|
||||
"nodes": [{"id": contact.id, "name": contact.name, "current_job": contact.current_job} for contact in contacts],
|
||||
"edges": [
|
||||
{
|
||||
"source": rel.contact_id,
|
||||
"target": rel.related_contact_id,
|
||||
"relationship_type": rel.relationship_type,
|
||||
"closeness_weight": rel.closeness_weight,
|
||||
}
|
||||
for rel in relationships
|
||||
],
|
||||
}
|
||||
|
||||
return templates.TemplateResponse(
|
||||
request,
|
||||
"graph.html",
|
||||
{
|
||||
"graph_data": graph_data,
|
||||
"relationship_type_display": _get_relationship_type_display(),
|
||||
},
|
||||
)
|
||||
198
python/api/templates/base.html
Normal file
198
python/api/templates/base.html
Normal file
@@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Contact Database{% endblock %}</title>
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
||||
<style>
|
||||
:root {
|
||||
--color-bg: #f5f5f5;
|
||||
--color-bg-card: #ffffff;
|
||||
--color-bg-hover: #f0f0f0;
|
||||
--color-bg-muted: #f9f9f9;
|
||||
--color-bg-error: #ffe0e0;
|
||||
--color-text: #333333;
|
||||
--color-text-muted: #666666;
|
||||
--color-text-error: #cc0000;
|
||||
--color-border: #dddddd;
|
||||
--color-border-light: #eeeeee;
|
||||
--color-border-lighter: #f0f0f0;
|
||||
--color-primary: #0066cc;
|
||||
--color-primary-hover: #0055aa;
|
||||
--color-danger: #cc3333;
|
||||
--color-danger-hover: #aa2222;
|
||||
--color-tag-bg: #e0e0e0;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
line-height: 1.5;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
[data-theme="dark"] {
|
||||
--color-bg: #1a1a1a;
|
||||
--color-bg-card: #2d2d2d;
|
||||
--color-bg-hover: #3d3d3d;
|
||||
--color-bg-muted: #252525;
|
||||
--color-bg-error: #4a2020;
|
||||
--color-text: #e0e0e0;
|
||||
--color-text-muted: #a0a0a0;
|
||||
--color-text-error: #ff6b6b;
|
||||
--color-border: #404040;
|
||||
--color-border-light: #353535;
|
||||
--color-border-lighter: #303030;
|
||||
--color-primary: #4da6ff;
|
||||
--color-primary-hover: #7dbfff;
|
||||
--color-danger: #ff6b6b;
|
||||
--color-danger-hover: #ff8a8a;
|
||||
--color-tag-bg: #404040;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; background: var(--color-bg); color: var(--color-text); }
|
||||
.app { max-width: 1000px; margin: 0 auto; padding: 20px; }
|
||||
nav { display: flex; align-items: center; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--color-border); margin-bottom: 20px; }
|
||||
nav a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
|
||||
nav a:hover { text-decoration: underline; }
|
||||
.theme-toggle { margin-left: auto; }
|
||||
main { background: var(--color-bg-card); padding: 20px; border-radius: 8px; box-shadow: var(--shadow); }
|
||||
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
|
||||
.header h1 { margin: 0; }
|
||||
a { color: var(--color-primary); }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
.btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg-card); color: var(--color-text); text-decoration: none; cursor: pointer; font-size: 14px; margin-left: 8px; }
|
||||
.btn:hover { background: var(--color-bg-hover); }
|
||||
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: white; }
|
||||
.btn-primary:hover { background: var(--color-primary-hover); }
|
||||
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: white; }
|
||||
.btn-danger:hover { background: var(--color-danger-hover); }
|
||||
.btn-small { padding: 4px 8px; font-size: 12px; }
|
||||
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--color-border-light); }
|
||||
th { font-weight: 600; background: var(--color-bg-muted); }
|
||||
tr:hover { background: var(--color-bg-muted); }
|
||||
|
||||
.error { background: var(--color-bg-error); color: var(--color-text-error); padding: 10px; border-radius: 4px; margin-bottom: 20px; }
|
||||
.tag { display: inline-block; background: var(--color-tag-bg); padding: 2px 8px; border-radius: 12px; font-size: 12px; color: var(--color-text-muted); }
|
||||
|
||||
.add-form { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; }
|
||||
.add-form select, .add-form input { padding: 8px; border: 1px solid var(--color-border); border-radius: 4px; min-width: 200px; background: var(--color-bg-card); color: var(--color-text); }
|
||||
|
||||
.form-group { margin-bottom: 20px; }
|
||||
.form-group label { display: block; font-weight: 500; margin-bottom: 5px; }
|
||||
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 14px; background: var(--color-bg-card); color: var(--color-text); }
|
||||
.form-group textarea { resize: vertical; }
|
||||
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
.checkbox-group { display: flex; flex-wrap: wrap; gap: 15px; }
|
||||
.checkbox-label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
|
||||
.form-actions { display: flex; gap: 10px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--color-border-light); }
|
||||
|
||||
.need-form { background: var(--color-bg-muted); padding: 20px; border-radius: 4px; margin-bottom: 20px; }
|
||||
.need-items { list-style: none; padding: 0; }
|
||||
.need-items li { display: flex; justify-content: space-between; align-items: flex-start; padding: 15px; border: 1px solid var(--color-border-light); border-radius: 4px; margin-bottom: 10px; }
|
||||
.need-info p { margin: 5px 0 0; color: var(--color-text-muted); font-size: 14px; }
|
||||
|
||||
.graph-container { width: 100%; }
|
||||
.graph-hint { color: var(--color-text-muted); font-size: 14px; margin-bottom: 15px; }
|
||||
.selected-info { margin-top: 15px; padding: 15px; background: var(--color-bg-muted); border-radius: 8px; }
|
||||
.selected-info h3 { margin: 0 0 10px; }
|
||||
.selected-info p { margin: 5px 0; color: var(--color-text-muted); }
|
||||
.legend { margin-top: 20px; padding: 15px; background: var(--color-bg-muted); border-radius: 8px; }
|
||||
.legend h4 { margin: 0 0 10px; font-size: 14px; }
|
||||
.legend-items { display: flex; flex-wrap: wrap; gap: 15px; }
|
||||
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-muted); }
|
||||
.legend-line { width: 30px; border-radius: 2px; }
|
||||
|
||||
.id-card { width: 100%; }
|
||||
.id-card-inner { background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%); background-image: radial-gradient(white 1px, transparent 1px), linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%); background-size: 50px 50px, 100% 100%; color: #fff; border-radius: 12px; padding: 25px; min-height: 500px; position: relative; overflow: hidden; }
|
||||
.id-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
|
||||
.id-card-header-left { flex: 1; }
|
||||
.id-card-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
|
||||
.id-card-title { font-size: 2.5rem; font-weight: 700; margin: 0; color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
|
||||
.id-profile-pic { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; border: 2px solid rgba(255,255,255,0.3); }
|
||||
.id-profile-placeholder { width: 80px; height: 80px; border-radius: 8px; background: linear-gradient(135deg, #4ecdc4 0%, #44a8a0 100%); display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,0.3); }
|
||||
.id-profile-placeholder span { font-size: 2rem; font-weight: 700; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
|
||||
.id-card-actions { display: flex; gap: 8px; }
|
||||
.id-card-actions .btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); color: #fff; }
|
||||
.id-card-actions .btn:hover { background: rgba(255,255,255,0.2); }
|
||||
.id-card-body { display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px; }
|
||||
.id-card-left { display: flex; flex-direction: column; gap: 8px; }
|
||||
.id-field { font-size: 1rem; line-height: 1.4; }
|
||||
.id-field-block { margin-top: 15px; font-size: 0.95rem; line-height: 1.5; }
|
||||
.id-label { color: #4ecdc4; font-weight: 500; }
|
||||
.id-card-right { display: flex; flex-direction: column; gap: 20px; }
|
||||
.id-bio { font-size: 0.9rem; line-height: 1.6; color: #e0e0e0; }
|
||||
.id-relationships { margin-top: 10px; }
|
||||
.id-section-title { font-size: 1.5rem; margin: 0 0 15px; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 8px; }
|
||||
.id-rel-group { margin-bottom: 12px; font-size: 0.9rem; line-height: 1.6; }
|
||||
.id-rel-label { color: #a0a0a0; }
|
||||
.id-rel-group a { color: #4ecdc4; text-decoration: none; }
|
||||
.id-rel-group a:hover { text-decoration: underline; }
|
||||
.id-rel-type { color: #888; font-size: 0.85em; }
|
||||
.id-card-warnings { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.2); display: flex; flex-wrap: wrap; gap: 20px; }
|
||||
.id-warning { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #ff6b6b; }
|
||||
.warning-dot { width: 8px; height: 8px; background: #ff6b6b; border-radius: 50%; flex-shrink: 0; }
|
||||
.warning-desc { color: #ccc; }
|
||||
|
||||
.id-card-manage { margin-top: 20px; background: var(--color-bg-muted); border-radius: 8px; padding: 15px; }
|
||||
.id-card-manage summary { cursor: pointer; font-weight: 600; font-size: 1.1rem; padding: 5px 0; }
|
||||
.id-card-manage[open] summary { margin-bottom: 15px; border-bottom: 1px solid var(--color-border-light); padding-bottom: 10px; }
|
||||
.manage-section { margin-bottom: 25px; }
|
||||
.manage-section h3 { margin: 0 0 15px; font-size: 1rem; }
|
||||
.manage-relationships { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; }
|
||||
.manage-rel-item { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--color-bg-card); border-radius: 6px; flex-wrap: wrap; }
|
||||
.manage-rel-item a { font-weight: 500; min-width: 120px; }
|
||||
.weight-control { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-muted); }
|
||||
.weight-control input[type="range"] { width: 80px; cursor: pointer; }
|
||||
.weight-value { min-width: 20px; text-align: center; font-weight: 600; }
|
||||
.manage-needs-list { list-style: none; padding: 0; margin: 0 0 15px; }
|
||||
.manage-needs-list li { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--color-bg-card); border-radius: 6px; margin-bottom: 8px; }
|
||||
.manage-needs-list li .btn { margin-left: auto; }
|
||||
|
||||
.htmx-indicator { display: none; }
|
||||
.htmx-request .htmx-indicator { display: inline; }
|
||||
.htmx-request.htmx-indicator { display: inline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.id-card-body { grid-template-columns: 1fr; }
|
||||
.id-card-title { font-size: 1.8rem; }
|
||||
.id-card-header { flex-direction: column; gap: 15px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<nav>
|
||||
<a href="/contacts">Contacts</a>
|
||||
<a href="/graph">Graph</a>
|
||||
<a href="/needs">Needs</a>
|
||||
<button class="btn btn-small theme-toggle" onclick="toggleTheme()">
|
||||
<span id="theme-label">Dark</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<main id="main-content">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleTheme() {
|
||||
const html = document.documentElement;
|
||||
const current = html.getAttribute('data-theme');
|
||||
const next = current === 'light' ? 'dark' : 'light';
|
||||
html.setAttribute('data-theme', next);
|
||||
localStorage.setItem('theme', next);
|
||||
document.getElementById('theme-label').textContent = next === 'light' ? 'Dark' : 'Light';
|
||||
}
|
||||
(function() {
|
||||
const saved = localStorage.getItem('theme') || 'light';
|
||||
document.documentElement.setAttribute('data-theme', saved);
|
||||
document.getElementById('theme-label').textContent = saved === 'light' ? 'Dark' : 'Light';
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
204
python/api/templates/contact_detail.html
Normal file
204
python/api/templates/contact_detail.html
Normal file
@@ -0,0 +1,204 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ contact.name }}{% endblock %}
|
||||
{% block content %}
|
||||
<div class="id-card">
|
||||
<div class="id-card-inner">
|
||||
<div class="id-card-header">
|
||||
<div class="id-card-header-left">
|
||||
<h1 class="id-card-title">I.D.: {{ contact.name }}</h1>
|
||||
</div>
|
||||
<div class="id-card-header-right">
|
||||
{% if contact.profile_pic %}
|
||||
<img src="{{ contact.profile_pic }}" alt="{{ contact.name }}'s profile" class="id-profile-pic">
|
||||
{% else %}
|
||||
<div class="id-profile-placeholder">
|
||||
<span>{{ contact.name[0]|upper }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="id-card-actions">
|
||||
<a href="/contacts/{{ contact.id }}/edit" class="btn btn-small">Edit</a>
|
||||
<a href="/contacts" class="btn btn-small">Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="id-card-body">
|
||||
<div class="id-card-left">
|
||||
{% if contact.legal_name %}
|
||||
<div class="id-field">Legal name: {{ contact.legal_name }}</div>
|
||||
{% endif %}
|
||||
{% if contact.suffix %}
|
||||
<div class="id-field">Suffix: {{ contact.suffix }}</div>
|
||||
{% endif %}
|
||||
{% if contact.gender %}
|
||||
<div class="id-field">Gender: {{ contact.gender }}</div>
|
||||
{% endif %}
|
||||
{% if contact.age %}
|
||||
<div class="id-field">Age: {{ contact.age }}</div>
|
||||
{% endif %}
|
||||
{% if contact.current_job %}
|
||||
<div class="id-field">Job: {{ contact.current_job }}</div>
|
||||
{% endif %}
|
||||
{% if contact.social_structure_style %}
|
||||
<div class="id-field">Social style: {{ contact.social_structure_style }}</div>
|
||||
{% endif %}
|
||||
{% if contact.self_sufficiency_score is not none %}
|
||||
<div class="id-field">Self-Sufficiency: {{ contact.self_sufficiency_score }}</div>
|
||||
{% endif %}
|
||||
{% if contact.timezone %}
|
||||
<div class="id-field">Timezone: {{ contact.timezone }}</div>
|
||||
{% endif %}
|
||||
{% if contact.safe_conversation_starters %}
|
||||
<div class="id-field-block">
|
||||
<span class="id-label">Safe con starters:</span> {{ contact.safe_conversation_starters }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if contact.topics_to_avoid %}
|
||||
<div class="id-field-block">
|
||||
<span class="id-label">Topics to avoid:</span> {{ contact.topics_to_avoid }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if contact.goals %}
|
||||
<div class="id-field-block">
|
||||
<span class="id-label">Goals:</span> {{ contact.goals }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="id-card-right">
|
||||
{% if contact.bio %}
|
||||
<div class="id-bio">
|
||||
<span class="id-label">Bio:</span> {{ contact.bio }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="id-relationships">
|
||||
<h2 class="id-section-title">Relationships</h2>
|
||||
|
||||
{% if grouped_relationships.familial %}
|
||||
<div class="id-rel-group">
|
||||
<span class="id-rel-label">Familial:</span>
|
||||
{% for rel in grouped_relationships.familial %}
|
||||
<a href="/contacts/{{ rel.related_contact_id }}">{{ contact_names[rel.related_contact_id] }}</a><span class="id-rel-type">({{ rel.relationship_type|replace("_", " ")|title }})</span>{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if grouped_relationships.partners %}
|
||||
<div class="id-rel-group">
|
||||
<span class="id-rel-label">Partners:</span>
|
||||
{% for rel in grouped_relationships.partners %}
|
||||
<a href="/contacts/{{ rel.related_contact_id }}">{{ contact_names[rel.related_contact_id] }}</a>{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if grouped_relationships.friends %}
|
||||
<div class="id-rel-group">
|
||||
<span class="id-rel-label">Friends:</span>
|
||||
{% for rel in grouped_relationships.friends %}
|
||||
<a href="/contacts/{{ rel.related_contact_id }}">{{ contact_names[rel.related_contact_id] }}</a>{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if grouped_relationships.professional %}
|
||||
<div class="id-rel-group">
|
||||
<span class="id-rel-label">Professional:</span>
|
||||
{% for rel in grouped_relationships.professional %}
|
||||
<a href="/contacts/{{ rel.related_contact_id }}">{{ contact_names[rel.related_contact_id] }}</a><span class="id-rel-type">({{ rel.relationship_type|replace("_", " ")|title }})</span>{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if grouped_relationships.other %}
|
||||
<div class="id-rel-group">
|
||||
<span class="id-rel-label">Other:</span>
|
||||
{% for rel in grouped_relationships.other %}
|
||||
<a href="/contacts/{{ rel.related_contact_id }}">{{ contact_names[rel.related_contact_id] }}</a><span class="id-rel-type">({{ rel.relationship_type|replace("_", " ")|title }})</span>{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if contact.related_from %}
|
||||
<div class="id-rel-group">
|
||||
<span class="id-rel-label">Known by:</span>
|
||||
{% for rel in contact.related_from %}
|
||||
<a href="/contacts/{{ rel.contact_id }}">{{ contact_names[rel.contact_id] }}</a>{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if contact.needs %}
|
||||
<div class="id-card-warnings">
|
||||
{% for need in contact.needs %}
|
||||
<div class="id-warning">
|
||||
<span class="warning-dot"></span>
|
||||
Warning: {{ need.name }}
|
||||
{% if need.description %}<span class="warning-desc"> - {{ need.description }}</span>{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<details class="id-card-manage">
|
||||
<summary>Manage Contact</summary>
|
||||
|
||||
<div class="manage-section">
|
||||
<h3>Manage Relationships</h3>
|
||||
<div id="manage-relationships" class="manage-relationships">
|
||||
{% include "partials/manage_relationships.html" %}
|
||||
</div>
|
||||
|
||||
{% if all_contacts %}
|
||||
<form hx-post="/htmx/contacts/{{ contact.id }}/add-relationship"
|
||||
hx-target="#manage-relationships"
|
||||
hx-swap="innerHTML"
|
||||
class="add-form">
|
||||
<select name="related_contact_id" required>
|
||||
<option value="">Select contact...</option>
|
||||
{% for other in all_contacts %}
|
||||
{% if other.id != contact.id %}
|
||||
<option value="{{ other.id }}">{{ other.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
<select name="relationship_type" required>
|
||||
<option value="">Select relationship type...</option>
|
||||
{% for rel_type in relationship_types %}
|
||||
<option value="{{ rel_type.value }}">{{ rel_type.display_name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="submit" class="btn btn-primary">Add Relationship</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="manage-section">
|
||||
<h3>Manage Needs/Warnings</h3>
|
||||
<div id="manage-needs">
|
||||
{% include "partials/manage_needs.html" %}
|
||||
</div>
|
||||
|
||||
{% if available_needs %}
|
||||
<form hx-post="/htmx/contacts/{{ contact.id }}/add-need"
|
||||
hx-target="#manage-needs"
|
||||
hx-swap="innerHTML"
|
||||
class="add-form">
|
||||
<select name="need_id" required>
|
||||
<option value="">Select a need...</option>
|
||||
{% for need in available_needs %}
|
||||
<option value="{{ need.id }}">{{ need.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="submit" class="btn btn-primary">Add Need</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
{% endblock %}
|
||||
115
python/api/templates/contact_form.html
Normal file
115
python/api/templates/contact_form.html
Normal file
@@ -0,0 +1,115 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ "Edit " + contact.name if contact else "New Contact" }}{% endblock %}
|
||||
{% block content %}
|
||||
<div class="contact-form">
|
||||
<h1>{{ "Edit Contact" if contact else "New Contact" }}</h1>
|
||||
|
||||
{% if contact %}
|
||||
<form method="post" action="/htmx/contacts/{{ contact.id }}/edit">
|
||||
{% else %}
|
||||
<form method="post" action="/htmx/contacts/new">
|
||||
{% endif %}
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Name *</label>
|
||||
<input id="name" name="name" type="text" value="{{ contact.name if contact else '' }}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="legal_name">Legal Name</label>
|
||||
<input id="legal_name" name="legal_name" type="text" value="{{ contact.legal_name or '' }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="suffix">Suffix</label>
|
||||
<input id="suffix" name="suffix" type="text" value="{{ contact.suffix or '' }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="age">Age</label>
|
||||
<input id="age" name="age" type="number" value="{{ contact.age if contact and contact.age is not none else '' }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="gender">Gender</label>
|
||||
<input id="gender" name="gender" type="text" value="{{ contact.gender or '' }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="current_job">Current Job</label>
|
||||
<input id="current_job" name="current_job" type="text" value="{{ contact.current_job or '' }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="timezone">Timezone</label>
|
||||
<input id="timezone" name="timezone" type="text" value="{{ contact.timezone or '' }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="profile_pic">Profile Picture URL</label>
|
||||
<input id="profile_pic" name="profile_pic" type="url" placeholder="https://example.com/photo.jpg" value="{{ contact.profile_pic or '' }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bio">Bio</label>
|
||||
<textarea id="bio" name="bio" rows="3">{{ contact.bio or '' }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="goals">Goals</label>
|
||||
<textarea id="goals" name="goals" rows="3">{{ contact.goals or '' }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="social_structure_style">Social Structure Style</label>
|
||||
<input id="social_structure_style" name="social_structure_style" type="text" value="{{ contact.social_structure_style or '' }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="self_sufficiency_score">Self-Sufficiency Score (1-10)</label>
|
||||
<input id="self_sufficiency_score" name="self_sufficiency_score" type="number" min="1" max="10" value="{{ contact.self_sufficiency_score if contact and contact.self_sufficiency_score is not none else '' }}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="safe_conversation_starters">Safe Conversation Starters</label>
|
||||
<textarea id="safe_conversation_starters" name="safe_conversation_starters" rows="2">{{ contact.safe_conversation_starters or '' }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="topics_to_avoid">Topics to Avoid</label>
|
||||
<textarea id="topics_to_avoid" name="topics_to_avoid" rows="2">{{ contact.topics_to_avoid or '' }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="ssn">SSN</label>
|
||||
<input id="ssn" name="ssn" type="text" value="{{ contact.ssn or '' }}">
|
||||
</div>
|
||||
|
||||
{% if all_needs %}
|
||||
<div class="form-group">
|
||||
<label>Needs/Accommodations</label>
|
||||
<div class="checkbox-group">
|
||||
{% for need in all_needs %}
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" name="need_ids" value="{{ need.id }}"
|
||||
{% if contact and need in contact.needs %}checked{% endif %}>
|
||||
{{ need.name }}
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
{% if contact %}
|
||||
<a href="/contacts/{{ contact.id }}" class="btn">Cancel</a>
|
||||
{% else %}
|
||||
<a href="/contacts" class="btn">Cancel</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
14
python/api/templates/contact_list.html
Normal file
14
python/api/templates/contact_list.html
Normal file
@@ -0,0 +1,14 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Contacts{% endblock %}
|
||||
{% block content %}
|
||||
<div class="contact-list">
|
||||
<div class="header">
|
||||
<h1>Contacts</h1>
|
||||
<a href="/contacts/new" class="btn btn-primary">Add Contact</a>
|
||||
</div>
|
||||
|
||||
<div id="contact-table">
|
||||
{% include "partials/contact_table.html" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
198
python/api/templates/graph.html
Normal file
198
python/api/templates/graph.html
Normal file
@@ -0,0 +1,198 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Relationship Graph{% endblock %}
|
||||
{% block content %}
|
||||
<div class="graph-container">
|
||||
<div class="header">
|
||||
<h1>Relationship Graph</h1>
|
||||
</div>
|
||||
<p class="graph-hint">Drag nodes to reposition. Closer relationships have shorter, darker edges.</p>
|
||||
<canvas id="graph-canvas" width="900" height="600"
|
||||
style="border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); cursor: grab;">
|
||||
</canvas>
|
||||
<div id="selected-info"></div>
|
||||
<div class="legend">
|
||||
<h4>Relationship Closeness (1-10)</h4>
|
||||
<div class="legend-items">
|
||||
<div class="legend-item">
|
||||
<span class="legend-line" style="background: hsl(220, 70%, 40%); height: 4px; display: inline-block;"></span>
|
||||
<span>10 - Very Close (Spouse, Partner)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-line" style="background: hsl(220, 70%, 52%); height: 3px; display: inline-block;"></span>
|
||||
<span>7 - Close (Family, Best Friend)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-line" style="background: hsl(220, 70%, 64%); height: 2px; display: inline-block;"></span>
|
||||
<span>4 - Moderate (Friend, Colleague)</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-line" style="background: hsl(220, 70%, 72%); height: 1px; display: inline-block;"></span>
|
||||
<span>2 - Distant (Acquaintance)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const RELATIONSHIP_DISPLAY = {{ relationship_type_display|tojson }};
|
||||
const graphData = {{ graph_data|tojson }};
|
||||
|
||||
const canvas = document.getElementById('graph-canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const width = canvas.width;
|
||||
const height = canvas.height;
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
|
||||
const nodes = graphData.nodes.map(function(node) {
|
||||
return Object.assign({}, node, {
|
||||
x: centerX + (Math.random() - 0.5) * 300,
|
||||
y: centerY + (Math.random() - 0.5) * 300,
|
||||
vx: 0,
|
||||
vy: 0
|
||||
});
|
||||
});
|
||||
|
||||
const nodeMap = new Map(nodes.map(function(node) { return [node.id, node]; }));
|
||||
|
||||
const edges = graphData.edges.map(function(edge) {
|
||||
const sourceNode = nodeMap.get(edge.source);
|
||||
const targetNode = nodeMap.get(edge.target);
|
||||
if (!sourceNode || !targetNode) return null;
|
||||
return Object.assign({}, edge, { sourceNode: sourceNode, targetNode: targetNode });
|
||||
}).filter(function(edge) { return edge !== null; });
|
||||
|
||||
let dragNode = null;
|
||||
let selectedNode = null;
|
||||
|
||||
const repulsion = 5000;
|
||||
const springStrength = 0.05;
|
||||
const baseSpringLength = 150;
|
||||
const damping = 0.9;
|
||||
const centerPull = 0.01;
|
||||
|
||||
function simulate() {
|
||||
for (const node of nodes) { node.vx = 0; node.vy = 0; }
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
for (let j = i + 1; j < nodes.length; j++) {
|
||||
const dx = nodes[j].x - nodes[i].x;
|
||||
const dy = nodes[j].y - nodes[i].y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy) || 1;
|
||||
const force = repulsion / (dist * dist);
|
||||
const fx = (dx / dist) * force;
|
||||
const fy = (dy / dist) * force;
|
||||
nodes[i].vx -= fx; nodes[i].vy -= fy;
|
||||
nodes[j].vx += fx; nodes[j].vy += fy;
|
||||
}
|
||||
}
|
||||
for (const edge of edges) {
|
||||
const dx = edge.targetNode.x - edge.sourceNode.x;
|
||||
const dy = edge.targetNode.y - edge.sourceNode.y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy) || 1;
|
||||
const normalizedWeight = edge.closeness_weight / 10;
|
||||
const idealLength = baseSpringLength * (1.5 - normalizedWeight);
|
||||
const displacement = dist - idealLength;
|
||||
const force = springStrength * displacement;
|
||||
const fx = (dx / dist) * force;
|
||||
const fy = (dy / dist) * force;
|
||||
edge.sourceNode.vx += fx; edge.sourceNode.vy += fy;
|
||||
edge.targetNode.vx -= fx; edge.targetNode.vy -= fy;
|
||||
}
|
||||
for (const node of nodes) {
|
||||
node.vx += (centerX - node.x) * centerPull;
|
||||
node.vy += (centerY - node.y) * centerPull;
|
||||
}
|
||||
for (const node of nodes) {
|
||||
if (node === dragNode) continue;
|
||||
node.x += node.vx * damping;
|
||||
node.y += node.vy * damping;
|
||||
node.x = Math.max(30, Math.min(width - 30, node.x));
|
||||
node.y = Math.max(30, Math.min(height - 30, node.y));
|
||||
}
|
||||
}
|
||||
|
||||
function getEdgeColor(weight) {
|
||||
const normalized = weight / 10;
|
||||
return 'hsl(220, 70%, ' + (80 - normalized * 40) + '%)';
|
||||
}
|
||||
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
for (const edge of edges) {
|
||||
const lineWidth = 1 + (edge.closeness_weight / 10) * 3;
|
||||
ctx.strokeStyle = getEdgeColor(edge.closeness_weight);
|
||||
ctx.lineWidth = lineWidth;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(edge.sourceNode.x, edge.sourceNode.y);
|
||||
ctx.lineTo(edge.targetNode.x, edge.targetNode.y);
|
||||
ctx.stroke();
|
||||
const midX = (edge.sourceNode.x + edge.targetNode.x) / 2;
|
||||
const midY = (edge.sourceNode.y + edge.targetNode.y) / 2;
|
||||
ctx.fillStyle = '#666';
|
||||
ctx.font = '10px sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
const label = RELATIONSHIP_DISPLAY[edge.relationship_type] || edge.relationship_type;
|
||||
ctx.fillText(label, midX, midY - 5);
|
||||
}
|
||||
for (const node of nodes) {
|
||||
const isSelected = node === selectedNode;
|
||||
const radius = isSelected ? 25 : 20;
|
||||
ctx.beginPath();
|
||||
ctx.arc(node.x, node.y, radius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = isSelected ? '#0066cc' : '#fff';
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = '#0066cc';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = isSelected ? '#fff' : '#333';
|
||||
ctx.font = '12px sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
const name = node.name.length > 10 ? node.name.slice(0, 9) + '\u2026' : node.name;
|
||||
ctx.fillText(name, node.x, node.y);
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
simulate();
|
||||
draw();
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
animate();
|
||||
|
||||
function getNodeAt(x, y) {
|
||||
for (const node of nodes) {
|
||||
const dx = x - node.x;
|
||||
const dy = y - node.y;
|
||||
if (dx * dx + dy * dy < 400) return node;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
canvas.addEventListener('mousedown', function(event) {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const node = getNodeAt(event.clientX - rect.left, event.clientY - rect.top);
|
||||
if (node) {
|
||||
dragNode = node;
|
||||
selectedNode = node;
|
||||
const infoDiv = document.getElementById('selected-info');
|
||||
let html = '<div class="selected-info"><h3>' + node.name + '</h3>';
|
||||
if (node.current_job) html += '<p>Job: ' + node.current_job + '</p>';
|
||||
html += '<a href="/contacts/' + node.id + '">View details</a></div>';
|
||||
infoDiv.innerHTML = html;
|
||||
}
|
||||
});
|
||||
|
||||
canvas.addEventListener('mousemove', function(event) {
|
||||
if (!dragNode) return;
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
dragNode.x = event.clientX - rect.left;
|
||||
dragNode.y = event.clientY - rect.top;
|
||||
});
|
||||
|
||||
canvas.addEventListener('mouseup', function() { dragNode = null; });
|
||||
canvas.addEventListener('mouseleave', function() { dragNode = null; });
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
31
python/api/templates/need_list.html
Normal file
31
python/api/templates/need_list.html
Normal file
@@ -0,0 +1,31 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Needs{% endblock %}
|
||||
{% block content %}
|
||||
<div class="need-list">
|
||||
<div class="header">
|
||||
<h1>Needs / Accommodations</h1>
|
||||
<button class="btn btn-primary" onclick="document.getElementById('need-form').toggleAttribute('hidden')">Add Need</button>
|
||||
</div>
|
||||
|
||||
<form id="need-form" hidden
|
||||
hx-post="/htmx/needs"
|
||||
hx-target="#need-items"
|
||||
hx-swap="innerHTML"
|
||||
hx-on::after-request="if(event.detail.successful) this.reset()"
|
||||
class="need-form">
|
||||
<div class="form-group">
|
||||
<label for="name">Name *</label>
|
||||
<input id="name" name="name" type="text" placeholder="e.g., Light Sensitive, ADHD" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea id="description" name="description" placeholder="Optional description..." rows="2"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Create</button>
|
||||
</form>
|
||||
|
||||
<div id="need-items">
|
||||
{% include "partials/need_items.html" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
33
python/api/templates/partials/contact_table.html
Normal file
33
python/api/templates/partials/contact_table.html
Normal file
@@ -0,0 +1,33 @@
|
||||
{% if contacts %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Job</th>
|
||||
<th>Timezone</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for contact in contacts %}
|
||||
<tr id="contact-row-{{ contact.id }}">
|
||||
<td><a href="/contacts/{{ contact.id }}">{{ contact.name }}</a></td>
|
||||
<td>{{ contact.current_job or "-" }}</td>
|
||||
<td>{{ contact.timezone or "-" }}</td>
|
||||
<td>
|
||||
<a href="/contacts/{{ contact.id }}/edit" class="btn">Edit</a>
|
||||
<button class="btn btn-danger"
|
||||
hx-delete="/api/contacts/{{ contact.id }}"
|
||||
hx-target="#contact-row-{{ contact.id }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Delete this contact?">
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<p>No contacts yet.</p>
|
||||
{% endif %}
|
||||
14
python/api/templates/partials/manage_needs.html
Normal file
14
python/api/templates/partials/manage_needs.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<ul class="manage-needs-list">
|
||||
{% for need in contact.needs %}
|
||||
<li id="contact-need-{{ need.id }}">
|
||||
<strong>{{ need.name }}</strong>
|
||||
{% if need.description %}<span> - {{ need.description }}</span>{% endif %}
|
||||
<button class="btn btn-small btn-danger"
|
||||
hx-delete="/api/contacts/{{ contact.id }}/needs/{{ need.id }}"
|
||||
hx-target="#contact-need-{{ need.id }}"
|
||||
hx-swap="outerHTML">
|
||||
Remove
|
||||
</button>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
23
python/api/templates/partials/manage_relationships.html
Normal file
23
python/api/templates/partials/manage_relationships.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{% for rel in contact.related_to %}
|
||||
<div class="manage-rel-item" id="rel-{{ contact.id }}-{{ rel.related_contact_id }}">
|
||||
<a href="/contacts/{{ rel.related_contact_id }}">{{ contact_names[rel.related_contact_id] }}</a>
|
||||
<span class="tag">{{ rel.relationship_type|replace("_", " ")|title }}</span>
|
||||
<label class="weight-control">
|
||||
<span>Closeness:</span>
|
||||
<input type="range" min="1" max="10" value="{{ rel.closeness_weight }}"
|
||||
hx-post="/htmx/contacts/{{ contact.id }}/relationships/{{ rel.related_contact_id }}/weight"
|
||||
hx-trigger="change"
|
||||
hx-include="this"
|
||||
name="closeness_weight"
|
||||
hx-swap="none"
|
||||
oninput="this.nextElementSibling.textContent = this.value">
|
||||
<span class="weight-value">{{ rel.closeness_weight }}</span>
|
||||
</label>
|
||||
<button class="btn btn-small btn-danger"
|
||||
hx-delete="/api/contacts/{{ contact.id }}/relationships/{{ rel.related_contact_id }}"
|
||||
hx-target="#rel-{{ contact.id }}-{{ rel.related_contact_id }}"
|
||||
hx-swap="outerHTML">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
21
python/api/templates/partials/need_items.html
Normal file
21
python/api/templates/partials/need_items.html
Normal file
@@ -0,0 +1,21 @@
|
||||
{% if needs %}
|
||||
<ul class="need-items">
|
||||
{% for need in needs %}
|
||||
<li id="need-item-{{ need.id }}">
|
||||
<div class="need-info">
|
||||
<strong>{{ need.name }}</strong>
|
||||
{% if need.description %}<p>{{ need.description }}</p>{% endif %}
|
||||
</div>
|
||||
<button class="btn btn-danger"
|
||||
hx-delete="/api/needs/{{ need.id }}"
|
||||
hx-target="#need-item-{{ need.id }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Delete this need?">
|
||||
Delete
|
||||
</button>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p>No needs defined yet.</p>
|
||||
{% endif %}
|
||||
@@ -8,18 +8,13 @@
|
||||
8069
|
||||
];
|
||||
systemd.services.contact-api = {
|
||||
description = "Contact Database API with Frontend";
|
||||
description = "Contact Database API";
|
||||
after = [
|
||||
"postgresql.service"
|
||||
"network.target"
|
||||
];
|
||||
requires = [ "postgresql.service" ];
|
||||
wantedBy = [ "multi-user.target" ];
|
||||
path = [
|
||||
pkgs.nodejs
|
||||
pkgs.coreutils
|
||||
pkgs.bash
|
||||
];
|
||||
|
||||
environment = {
|
||||
PYTHONPATH = "${inputs.self}";
|
||||
@@ -27,18 +22,15 @@
|
||||
POSTGRES_HOST = "/run/postgresql";
|
||||
POSTGRES_USER = "richie";
|
||||
POSTGRES_PORT = "5432";
|
||||
HOME = "/var/lib/contact-api";
|
||||
};
|
||||
|
||||
serviceConfig = {
|
||||
Type = "simple";
|
||||
ExecStart = "${pkgs.my_python}/bin/python -m python.api.main --host 192.168.90.40 --port 8069 --frontend-dir ${inputs.self}/frontend";
|
||||
StateDirectory = "contact-api";
|
||||
ExecStart = "${pkgs.my_python}/bin/python -m python.api.main --host 192.168.90.40 --port 8069";
|
||||
Restart = "on-failure";
|
||||
RestartSec = "5s";
|
||||
StandardOutput = "journal";
|
||||
StandardError = "journal";
|
||||
# Security hardening
|
||||
NoNewPrivileges = true;
|
||||
ProtectSystem = "strict";
|
||||
ProtectHome = "read-only";
|
||||
|
||||
Reference in New Issue
Block a user