frontend
This commit is contained in:
@@ -0,0 +1,63 @@
|
||||
<script>
|
||||
import Router from 'svelte-spa-router'
|
||||
import { onMount } from 'svelte'
|
||||
import Nav from './components/Nav.svelte'
|
||||
import Notifications from './components/Notifications.svelte'
|
||||
import Dashboard from './routes/Dashboard.svelte'
|
||||
import Watchlist from './routes/Watchlist.svelte'
|
||||
import Screener from './routes/Screener.svelte'
|
||||
import News from './routes/News.svelte'
|
||||
import Settings from './routes/Settings.svelte'
|
||||
import { api } from './lib/api.js'
|
||||
import { serverStatus } from './lib/store.js'
|
||||
|
||||
const routes = {
|
||||
'/': Dashboard,
|
||||
'/watchlist': Watchlist,
|
||||
'/screener': Screener,
|
||||
'/news': News,
|
||||
'/settings': Settings,
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
await api.health()
|
||||
serverStatus.set('ok')
|
||||
} catch {
|
||||
serverStatus.set('error')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="layout">
|
||||
<Nav />
|
||||
<main>
|
||||
<Router {routes} />
|
||||
</main>
|
||||
</div>
|
||||
<Notifications />
|
||||
|
||||
<style>
|
||||
:global(*, *::before, *::after) { box-sizing: border-box; }
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
background: #0d1117;
|
||||
color: #e6edf3;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
:global(h1, h2, h3) { margin: 0 0 1rem; font-weight: 600; }
|
||||
:global(button) { cursor: pointer; }
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
max-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<script>
|
||||
import { link, location } from 'svelte-spa-router'
|
||||
import { serverStatus } from '../lib/store.js'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', label: 'Dashboard', icon: '◈' },
|
||||
{ path: '/watchlist', label: 'Watchlist', icon: '☆' },
|
||||
{ path: '/screener', label: 'Screener', icon: '⊞' },
|
||||
{ path: '/news', label: 'News', icon: '⊙' },
|
||||
{ path: '/settings', label: 'Settings', icon: '⚙' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<div class="brand">
|
||||
<span class="logo">◉</span>
|
||||
<span class="name">StockRadar</span>
|
||||
<span class="status" class:ok={$serverStatus === 'ok'} class:error={$serverStatus === 'error'}>
|
||||
{$serverStatus === 'ok' ? '● live' : $serverStatus === 'error' ? '● offline' : '● …'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
{#each routes as r}
|
||||
<li class:active={$location === r.path}>
|
||||
<a href={r.path} use:link>
|
||||
<span class="icon">{r.icon}</span>
|
||||
<span>{r.label}</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
width: 200px;
|
||||
min-height: 100vh;
|
||||
background: #0d1117;
|
||||
border-right: 1px solid #21262d;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.5rem 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid #21262d;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.logo { font-size: 1.4rem; color: #58a6ff; }
|
||||
.name { font-weight: 700; color: #e6edf3; font-size: 1rem; }
|
||||
|
||||
.status {
|
||||
font-size: 0.65rem;
|
||||
color: #6e7681;
|
||||
margin-left: auto;
|
||||
}
|
||||
.status.ok { color: #3fb950; }
|
||||
.status.error { color: #f85149; }
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 1.25rem;
|
||||
color: #8b949e;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
li a:hover { background: #161b22; color: #e6edf3; }
|
||||
li.active a { background: #161b22; color: #58a6ff; }
|
||||
|
||||
.icon { font-size: 1rem; width: 1.2rem; text-align: center; }
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script>
|
||||
import { notifications } from '../lib/store.js'
|
||||
</script>
|
||||
|
||||
<div class="notif-container">
|
||||
{#each $notifications as n (n.id)}
|
||||
<div class="notif {n.type}">{n.message}</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.notif-container {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.notif {
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
color: #e6edf3;
|
||||
background: #21262d;
|
||||
border-left: 3px solid #58a6ff;
|
||||
animation: slide-in 0.2s ease;
|
||||
}
|
||||
|
||||
.notif.success { border-color: #3fb950; }
|
||||
.notif.error { border-color: #f85149; }
|
||||
.notif.warning { border-color: #d29922; }
|
||||
|
||||
@keyframes slide-in {
|
||||
from { opacity: 0; transform: translateX(1rem); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
const BASE = '/api'
|
||||
|
||||
async function request(method, path, body) {
|
||||
const opts = {
|
||||
method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
if (body !== undefined) opts.body = JSON.stringify(body)
|
||||
|
||||
const res = await fetch(BASE + path, opts)
|
||||
if (!res.ok) throw new Error(`${method} ${path} → ${res.status}`)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export const api = {
|
||||
health: () => request('GET', '/health'),
|
||||
getSettings: () => request('GET', '/settings'),
|
||||
saveSettings: (data) => request('POST', '/settings', data),
|
||||
testKey: (provider) => request('GET', `/settings/test/${provider}`),
|
||||
getWatchlist: () => request('GET', '/watchlist'),
|
||||
addTicker: (ticker) => request('POST', '/watchlist', { ticker }),
|
||||
removeTicker: (ticker) => request('DELETE', `/watchlist/${ticker}`),
|
||||
getNews: (ticker) => request('GET', `/news${ticker ? `?ticker=${ticker}` : ''}`),
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { writable } from 'svelte/store'
|
||||
|
||||
export const serverStatus = writable('unknown') // 'ok' | 'error' | 'unknown'
|
||||
export const watchlist = writable([])
|
||||
export const notifications = writable([])
|
||||
|
||||
let notifId = 0
|
||||
export function notify(message, type = 'info') {
|
||||
const id = ++notifId
|
||||
notifications.update(n => [...n, { id, message, type }])
|
||||
setTimeout(() => {
|
||||
notifications.update(n => n.filter(x => x.id !== id))
|
||||
}, 4000)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import App from './App.svelte'
|
||||
|
||||
const app = new App({ target: document.getElementById('app') })
|
||||
|
||||
export default app
|
||||
@@ -0,0 +1,77 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { api } from '../lib/api.js'
|
||||
import { serverStatus } from '../lib/store.js'
|
||||
|
||||
let health = null
|
||||
let error = null
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
health = await api.health()
|
||||
serverStatus.set('ok')
|
||||
} catch(e) {
|
||||
error = e.message
|
||||
serverStatus.set('error')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
<h1>Dashboard</h1>
|
||||
|
||||
<div class="cards">
|
||||
<div class="card">
|
||||
<div class="card-label">Statut serveur</div>
|
||||
<div class="card-value" class:green={health} class:red={error}>
|
||||
{health ? '● En ligne' : error ? '● Hors ligne' : '…'}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-label">Port</div>
|
||||
<div class="card-value">{health?.port ?? '—'}</div>
|
||||
</div>
|
||||
<div class="card muted">
|
||||
<div class="card-label">Signaux actifs</div>
|
||||
<div class="card-value">—</div>
|
||||
</div>
|
||||
<div class="card muted">
|
||||
<div class="card-label">News aujourd'hui</div>
|
||||
<div class="card-value">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Activité récente</h2>
|
||||
<p class="empty">Aucune donnée pour l'instant — configure les clés API dans <a href="#/settings">Settings</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page h1 { color: #e6edf3; font-size: 1.4rem; }
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #161b22;
|
||||
border: 1px solid #21262d;
|
||||
border-radius: 8px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.card-label { font-size: 0.75rem; color: #8b949e; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
.card-value { font-size: 1.25rem; font-weight: 600; color: #e6edf3; }
|
||||
.card-value.green { color: #3fb950; }
|
||||
.card-value.red { color: #f85149; }
|
||||
.card.muted .card-value { color: #484f58; }
|
||||
|
||||
.section h2 { font-size: 1rem; color: #8b949e; border-bottom: 1px solid #21262d; padding-bottom: 0.5rem; margin-bottom: 1rem; }
|
||||
|
||||
.empty { color: #484f58; font-size: 0.875rem; }
|
||||
.empty a { color: #58a6ff; }
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { api } from '../lib/api.js'
|
||||
import { notify } from '../lib/store.js'
|
||||
|
||||
let news = []
|
||||
let loading = true
|
||||
let filter = ''
|
||||
|
||||
onMount(load)
|
||||
|
||||
async function load() {
|
||||
loading = true
|
||||
try {
|
||||
news = await api.getNews(filter || null)
|
||||
} catch(e) {
|
||||
notify('Erreur chargement news : ' + e.message, 'error')
|
||||
news = []
|
||||
} finally {
|
||||
loading = false
|
||||
}
|
||||
}
|
||||
|
||||
function sentimentColor(s) {
|
||||
if (!s) return ''
|
||||
if (s === 'positive') return 'green'
|
||||
if (s === 'negative') return 'red'
|
||||
return 'neutral'
|
||||
}
|
||||
|
||||
function timeAgo(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
const diff = Date.now() - new Date(dateStr).getTime()
|
||||
const h = Math.floor(diff / 3600000)
|
||||
if (h < 1) return 'il y a < 1h'
|
||||
if (h < 24) return `il y a ${h}h`
|
||||
return `il y a ${Math.floor(h / 24)}j`
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
<h1>News</h1>
|
||||
|
||||
<div class="toolbar">
|
||||
<input
|
||||
bind:value={filter}
|
||||
placeholder="Filtrer par ticker…"
|
||||
on:keydown={(e) => e.key === 'Enter' && load()}
|
||||
/>
|
||||
<button class="btn-reload" on:click={load}>↻</button>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p class="muted">Chargement…</p>
|
||||
{:else if news.length === 0}
|
||||
<p class="empty">Aucune news disponible. Les données arriveront une fois les intégrations API branchées.</p>
|
||||
{:else}
|
||||
<div class="news-list">
|
||||
{#each news as item}
|
||||
<div class="news-card">
|
||||
<div class="news-meta">
|
||||
<span class="ticker">{item.ticker ?? '—'}</span>
|
||||
<span class="source">{item.source ?? ''}</span>
|
||||
<span class="time">{timeAgo(item.published_at)}</span>
|
||||
{#if item.sentiment}
|
||||
<span class="sentiment {sentimentColor(item.sentiment)}">{item.sentiment}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="news-headline">
|
||||
{#if item.url}
|
||||
<a href={item.url} target="_blank" rel="noopener">{item.headline}</a>
|
||||
{:else}
|
||||
{item.headline}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page h1 { color: #e6edf3; font-size: 1.4rem; }
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
background: #161b22;
|
||||
border: 1px solid #30363d;
|
||||
border-radius: 6px;
|
||||
color: #e6edf3;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
outline: none;
|
||||
}
|
||||
input:focus { border-color: #58a6ff; }
|
||||
input::placeholder { color: #484f58; }
|
||||
|
||||
.btn-reload {
|
||||
background: #21262d;
|
||||
border: 1px solid #30363d;
|
||||
border-radius: 6px;
|
||||
color: #8b949e;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.btn-reload:hover { color: #e6edf3; background: #30363d; }
|
||||
|
||||
.news-list { display: flex; flex-direction: column; gap: 0.75rem; }
|
||||
|
||||
.news-card {
|
||||
background: #161b22;
|
||||
border: 1px solid #21262d;
|
||||
border-radius: 8px;
|
||||
padding: 1rem 1.25rem;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.news-card:hover { border-color: #30363d; }
|
||||
|
||||
.news-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.ticker { color: #58a6ff; font-weight: 600; }
|
||||
.source { color: #8b949e; }
|
||||
.time { color: #484f58; margin-left: auto; }
|
||||
|
||||
.sentiment { padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; font-weight: 500; }
|
||||
.sentiment.green { background: #0d2c1a; color: #3fb950; }
|
||||
.sentiment.red { background: #2c0d0d; color: #f85149; }
|
||||
.sentiment.neutral { background: #1c1c1c; color: #8b949e; }
|
||||
|
||||
.news-headline { font-size: 0.9rem; color: #c9d1d9; line-height: 1.4; }
|
||||
.news-headline a { color: #c9d1d9; text-decoration: none; }
|
||||
.news-headline a:hover { color: #58a6ff; }
|
||||
|
||||
.empty, .muted { color: #484f58; font-size: 0.875rem; }
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<script>
|
||||
// Screener — sera branché sur les données réelles une fois les API intégrées
|
||||
let filters = { minRsi: '', maxRsi: '', minVolume: '', sector: '' }
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
<h1>Screener</h1>
|
||||
|
||||
<div class="filters">
|
||||
<div class="filter-group">
|
||||
<label for="rsi-min">RSI min</label>
|
||||
<input id="rsi-min" type="number" bind:value={filters.minRsi} placeholder="ex: 30" min="0" max="100" />
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="rsi-max">RSI max</label>
|
||||
<input id="rsi-max" type="number" bind:value={filters.maxRsi} placeholder="ex: 70" min="0" max="100" />
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="vol-min">Volume min</label>
|
||||
<input id="vol-min" type="number" bind:value={filters.minVolume} placeholder="ex: 1000000" />
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="sector">Secteur</label>
|
||||
<input id="sector" type="text" bind:value={filters.sector} placeholder="Technology…" />
|
||||
</div>
|
||||
<button class="btn-scan" disabled>
|
||||
Scan (bientôt disponible)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="placeholder">
|
||||
<div class="icon">⊞</div>
|
||||
<p>Le screener sera disponible après l'intégration Yahoo Finance / Finnhub.</p>
|
||||
<p class="hint">Il filtrera l'univers eToro sur RSI, MACD, volume et catalyseurs news.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page h1 { color: #e6edf3; font-size: 1.4rem; }
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.25rem;
|
||||
background: #161b22;
|
||||
border: 1px solid #21262d;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.filter-group { display: flex; flex-direction: column; gap: 0.3rem; }
|
||||
label { font-size: 0.75rem; color: #8b949e; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
|
||||
input {
|
||||
background: #0d1117;
|
||||
border: 1px solid #30363d;
|
||||
border-radius: 6px;
|
||||
color: #e6edf3;
|
||||
padding: 0.45rem 0.65rem;
|
||||
font-size: 0.875rem;
|
||||
outline: none;
|
||||
width: 130px;
|
||||
}
|
||||
input:focus { border-color: #58a6ff; }
|
||||
input::placeholder { color: #484f58; }
|
||||
|
||||
.btn-scan {
|
||||
background: #1f6feb;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
padding: 0.5rem 1.25rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.btn-scan:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #484f58;
|
||||
}
|
||||
.placeholder .icon { font-size: 2.5rem; margin-bottom: 1rem; }
|
||||
.placeholder p { margin: 0.3rem 0; font-size: 0.9rem; }
|
||||
.placeholder .hint { font-size: 0.8rem; color: #30363d; }
|
||||
</style>
|
||||
@@ -0,0 +1,160 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { api } from '../lib/api.js'
|
||||
import { notify } from '../lib/store.js'
|
||||
|
||||
const providers = [
|
||||
{ key: 'finnhub_api_key', label: 'Finnhub', provider: 'finnhub', placeholder: 'c_xxxxxxxxxxxxxxxx' },
|
||||
{ key: 'alphavantage_key', label: 'Alpha Vantage', provider: 'alphavantage', placeholder: 'XXXXXXXXXXXX' },
|
||||
{ key: 'etoro_api_key', label: 'eToro', provider: 'etoro', placeholder: 'eToro API key' },
|
||||
]
|
||||
|
||||
let values = {}
|
||||
let testing = {}
|
||||
let testResults = {}
|
||||
let saving = false
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const data = await api.getSettings()
|
||||
for (const p of providers) {
|
||||
values[p.key] = data[p.key] === '********' ? '' : (data[p.key] ?? '')
|
||||
}
|
||||
} catch(e) {
|
||||
notify('Impossible de charger les settings : ' + e.message, 'error')
|
||||
}
|
||||
})
|
||||
|
||||
async function save() {
|
||||
saving = true
|
||||
try {
|
||||
const body = {}
|
||||
for (const p of providers) {
|
||||
if (values[p.key]) body[p.key] = values[p.key]
|
||||
}
|
||||
await api.saveSettings(body)
|
||||
notify('Settings sauvegardés', 'success')
|
||||
} catch(e) {
|
||||
notify('Erreur sauvegarde : ' + e.message, 'error')
|
||||
} finally {
|
||||
saving = false
|
||||
}
|
||||
}
|
||||
|
||||
async function testKey(p) {
|
||||
testing[p.provider] = true
|
||||
testResults[p.provider] = null
|
||||
try {
|
||||
const r = await api.testKey(p.provider)
|
||||
testResults[p.provider] = r.status === 'ok' ? 'ok' : 'error'
|
||||
notify(`${p.label} : ${r.status === 'ok' ? 'clé valide' : r.message}`, r.status === 'ok' ? 'success' : 'error')
|
||||
} catch(e) {
|
||||
testResults[p.provider] = 'error'
|
||||
notify(`${p.label} : erreur de connexion`, 'error')
|
||||
} finally {
|
||||
testing[p.provider] = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
<h1>Settings</h1>
|
||||
|
||||
<form on:submit|preventDefault={save}>
|
||||
<section>
|
||||
<h2>Clés API</h2>
|
||||
<p class="hint">Les clés sont stockées chiffrées (AES-256). Les champs vides conservent la valeur existante.</p>
|
||||
|
||||
{#each providers as p}
|
||||
<div class="field">
|
||||
<label for={p.key}>{p.label}</label>
|
||||
<div class="input-row">
|
||||
<input
|
||||
id={p.key}
|
||||
type="password"
|
||||
bind:value={values[p.key]}
|
||||
placeholder={p.placeholder}
|
||||
autocomplete="off"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-test"
|
||||
class:ok={testResults[p.provider] === 'ok'}
|
||||
class:error={testResults[p.provider] === 'error'}
|
||||
disabled={testing[p.provider]}
|
||||
on:click={() => testKey(p)}
|
||||
>
|
||||
{testing[p.provider] ? '…' : testResults[p.provider] === 'ok' ? '✓' : testResults[p.provider] === 'error' ? '✗' : 'Tester'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn-primary" disabled={saving}>
|
||||
{saving ? 'Sauvegarde…' : 'Sauvegarder'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page h1 { color: #e6edf3; font-size: 1.4rem; }
|
||||
|
||||
form { max-width: 560px; }
|
||||
|
||||
section { margin-bottom: 2rem; }
|
||||
h2 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; color: #8b949e; border-bottom: 1px solid #21262d; padding-bottom: 0.5rem; margin-bottom: 1.25rem; }
|
||||
|
||||
.hint { font-size: 0.8rem; color: #484f58; margin: -0.75rem 0 1.25rem; }
|
||||
|
||||
.field { margin-bottom: 1.25rem; }
|
||||
label { display: block; font-size: 0.875rem; color: #8b949e; margin-bottom: 0.4rem; }
|
||||
|
||||
.input-row { display: flex; gap: 0.5rem; }
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
background: #161b22;
|
||||
border: 1px solid #30363d;
|
||||
border-radius: 6px;
|
||||
color: #e6edf3;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
input:focus { border-color: #58a6ff; }
|
||||
input::placeholder { color: #484f58; }
|
||||
|
||||
.btn-test {
|
||||
background: #21262d;
|
||||
border: 1px solid #30363d;
|
||||
border-radius: 6px;
|
||||
color: #8b949e;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
min-width: 64px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
.btn-test:hover:not(:disabled) { background: #30363d; color: #e6edf3; }
|
||||
.btn-test.ok { color: #3fb950; border-color: #3fb950; }
|
||||
.btn-test.error { color: #f85149; border-color: #f85149; }
|
||||
.btn-test:disabled { opacity: 0.5; }
|
||||
|
||||
.actions { padding-top: 1rem; }
|
||||
|
||||
.btn-primary {
|
||||
background: #1f6feb;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
padding: 0.6rem 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) { background: #388bfd; }
|
||||
.btn-primary:disabled { opacity: 0.5; }
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { api } from '../lib/api.js'
|
||||
import { notify } from '../lib/store.js'
|
||||
|
||||
let items = []
|
||||
let newTicker = ''
|
||||
let loading = true
|
||||
let adding = false
|
||||
|
||||
onMount(load)
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
items = await api.getWatchlist()
|
||||
} catch(e) {
|
||||
notify('Erreur chargement watchlist : ' + e.message, 'error')
|
||||
} finally {
|
||||
loading = false
|
||||
}
|
||||
}
|
||||
|
||||
async function add() {
|
||||
if (!newTicker.trim()) return
|
||||
adding = true
|
||||
try {
|
||||
await api.addTicker(newTicker.trim().toUpperCase())
|
||||
newTicker = ''
|
||||
await load()
|
||||
notify('Ticker ajouté', 'success')
|
||||
} catch(e) {
|
||||
notify('Erreur : ' + e.message, 'error')
|
||||
} finally {
|
||||
adding = false
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(ticker) {
|
||||
try {
|
||||
await api.removeTicker(ticker)
|
||||
await load()
|
||||
notify(`${ticker} supprimé`, 'info')
|
||||
} catch(e) {
|
||||
notify('Erreur : ' + e.message, 'error')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
<h1>Watchlist</h1>
|
||||
|
||||
<form class="add-form" on:submit|preventDefault={add}>
|
||||
<input
|
||||
bind:value={newTicker}
|
||||
placeholder="AAPL, TSLA, NVDA…"
|
||||
maxlength="10"
|
||||
disabled={adding}
|
||||
/>
|
||||
<button type="submit" class="btn-primary" disabled={adding || !newTicker.trim()}>
|
||||
{adding ? '…' : '+ Ajouter'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{#if loading}
|
||||
<p class="muted">Chargement…</p>
|
||||
{:else if items.length === 0}
|
||||
<p class="empty">Aucun ticker dans la watchlist. Ajoutes-en un ci-dessus.</p>
|
||||
{:else}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ticker</th>
|
||||
<th>Nom</th>
|
||||
<th>Secteur</th>
|
||||
<th>Exchange</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each items as item}
|
||||
<tr>
|
||||
<td class="ticker">{item.ticker}</td>
|
||||
<td>{item.name ?? '—'}</td>
|
||||
<td>{item.sector ?? '—'}</td>
|
||||
<td>{item.exchange ?? '—'}</td>
|
||||
<td>
|
||||
<button class="btn-remove" on:click={() => remove(item.ticker)}>✕</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page h1 { color: #e6edf3; font-size: 1.4rem; }
|
||||
|
||||
.add-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
background: #161b22;
|
||||
border: 1px solid #30363d;
|
||||
border-radius: 6px;
|
||||
color: #e6edf3;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
outline: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
input:focus { border-color: #58a6ff; }
|
||||
input::placeholder { color: #484f58; text-transform: none; }
|
||||
|
||||
.btn-primary {
|
||||
background: #1f6feb;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-primary:disabled { opacity: 0.5; }
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
color: #8b949e;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem;
|
||||
border-bottom: 1px solid #21262d;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid #161b22;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
tr:hover td { background: #161b22; }
|
||||
|
||||
.ticker { font-weight: 600; color: #58a6ff; }
|
||||
|
||||
.btn-remove {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #484f58;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
.btn-remove:hover { color: #f85149; background: #1c1c1c; }
|
||||
|
||||
.empty, .muted { color: #484f58; font-size: 0.875rem; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user