AssetPilot OrangePi 5 Pluse Server-First Commit
This commit is contained in:
Wind
353
asset_pilot_docker/static/css/style.css
Normal file
353
asset_pilot_docker/static/css/style.css
Normal file
@@ -0,0 +1,353 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--success-color: #10b981;
|
||||
--danger-color: #ef4444;
|
||||
--warning-color: #f59e0b;
|
||||
--bg-color: #f8fafc;
|
||||
--card-bg: #ffffff;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 헤더 */
|
||||
header {
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 32px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--success-color);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
/* 손익 요약 */
|
||||
.pnl-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.pnl-card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.pnl-card.total {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, #1e40af 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pnl-card h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.pnl-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.pnl-percent {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pnl-value.profit {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.pnl-value.loss {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.pnl-card.total .pnl-value,
|
||||
.pnl-card.total .pnl-percent {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 자산 섹션 */
|
||||
.assets-section {
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 테이블 */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--bg-color);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.numeric {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
td input {
|
||||
width: 100%;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
td input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.price-up {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.price-down {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* 버튼 */
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #1e40af;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #cbd5e1;
|
||||
}
|
||||
|
||||
/* 모달 */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.close {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.setting-group {
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.setting-group:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.setting-group h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.setting-group label {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.setting-group input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.setting-group input[type="number"] {
|
||||
width: 120px;
|
||||
padding: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 20px 24px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* 푸터 */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.pnl-summary {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
309
asset_pilot_docker/static/js/app.js
Normal file
309
asset_pilot_docker/static/js/app.js
Normal file
@@ -0,0 +1,309 @@
|
||||
// 전역 변수
|
||||
let currentPrices = {};
|
||||
let userAssets = [];
|
||||
let alertSettings = {};
|
||||
|
||||
// 초기화
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadAssets();
|
||||
loadAlertSettings();
|
||||
startPriceStream();
|
||||
|
||||
// 이벤트 리스너
|
||||
document.getElementById('refresh-btn').addEventListener('click', refreshData);
|
||||
document.getElementById('alert-settings-btn').addEventListener('click', openAlertModal);
|
||||
document.querySelector('.close').addEventListener('click', closeAlertModal);
|
||||
document.getElementById('save-alerts').addEventListener('click', saveAlertSettings);
|
||||
document.getElementById('cancel-alerts').addEventListener('click', closeAlertModal);
|
||||
|
||||
// 주기적 PnL 업데이트
|
||||
setInterval(updatePnL, 1000);
|
||||
});
|
||||
|
||||
// 자산 데이터 로드
|
||||
async function loadAssets() {
|
||||
try {
|
||||
const response = await fetch('/api/assets');
|
||||
userAssets = await response.json();
|
||||
renderAssetsTable();
|
||||
} catch (error) {
|
||||
console.error('자산 로드 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 알림 설정 로드
|
||||
async function loadAlertSettings() {
|
||||
try {
|
||||
const response = await fetch('/api/alerts/settings');
|
||||
alertSettings = await response.json();
|
||||
} catch (error) {
|
||||
console.error('알림 설정 로드 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 실시간 가격 스트리밍
|
||||
function startPriceStream() {
|
||||
const eventSource = new EventSource('/api/stream');
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
currentPrices = JSON.parse(event.data);
|
||||
updatePricesInTable();
|
||||
updateLastUpdateTime();
|
||||
};
|
||||
|
||||
eventSource.onerror = () => {
|
||||
console.error('SSE 연결 오류');
|
||||
document.getElementById('status-indicator').style.backgroundColor = '#ef4444';
|
||||
};
|
||||
}
|
||||
|
||||
// 테이블 렌더링
|
||||
function renderAssetsTable() {
|
||||
const tbody = document.getElementById('assets-tbody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
const assets = [
|
||||
'XAU/USD', 'XAU/CNY', 'XAU/GBP', 'USD/DXY', 'USD/KRW',
|
||||
'BTC/USD', 'BTC/KRW', 'KRX/GLD', 'XAU/KRW'
|
||||
];
|
||||
|
||||
assets.forEach(symbol => {
|
||||
const asset = userAssets.find(a => a.symbol === symbol);
|
||||
if (!asset) return;
|
||||
|
||||
const row = document.createElement('tr');
|
||||
row.dataset.symbol = symbol;
|
||||
|
||||
const decimalPlaces = symbol.includes('BTC') ? 8 : 2;
|
||||
|
||||
row.innerHTML = `
|
||||
<td><strong>${symbol}</strong></td>
|
||||
<td class="numeric">
|
||||
<input type="number"
|
||||
class="prev-close"
|
||||
value="${asset.previous_close}"
|
||||
step="0.01"
|
||||
data-symbol="${symbol}">
|
||||
</td>
|
||||
<td class="numeric current-price">N/A</td>
|
||||
<td class="numeric change">N/A</td>
|
||||
<td class="numeric change-percent">N/A</td>
|
||||
<td class="numeric">
|
||||
<input type="number"
|
||||
class="avg-price"
|
||||
value="${asset.average_price}"
|
||||
step="0.01"
|
||||
data-symbol="${symbol}">
|
||||
</td>
|
||||
<td class="numeric">
|
||||
<input type="number"
|
||||
class="quantity"
|
||||
value="${asset.quantity}"
|
||||
step="${symbol.includes('BTC') ? '0.00000001' : '0.01'}"
|
||||
data-symbol="${symbol}">
|
||||
</td>
|
||||
<td class="numeric buy-total">0</td>
|
||||
`;
|
||||
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
|
||||
// 입력 필드 이벤트 리스너
|
||||
document.querySelectorAll('input[type="number"]').forEach(input => {
|
||||
input.addEventListener('change', handleAssetChange);
|
||||
input.addEventListener('blur', handleAssetChange);
|
||||
});
|
||||
}
|
||||
|
||||
// 테이블에 가격 업데이트
|
||||
function updatePricesInTable() {
|
||||
const rows = document.querySelectorAll('#assets-tbody tr');
|
||||
|
||||
rows.forEach(row => {
|
||||
const symbol = row.dataset.symbol;
|
||||
const priceData = currentPrices[symbol];
|
||||
|
||||
if (!priceData || !priceData.가격) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentPrice = priceData.가격;
|
||||
const prevClose = parseFloat(row.querySelector('.prev-close').value) || 0;
|
||||
|
||||
// 현재가 표시
|
||||
const decimalPlaces = symbol.includes('USD') || symbol.includes('DXY') ? 2 : 0;
|
||||
row.querySelector('.current-price').textContent = formatNumber(currentPrice, decimalPlaces);
|
||||
|
||||
// 변동 계산
|
||||
const change = currentPrice - prevClose;
|
||||
const changePercent = prevClose > 0 ? (change / prevClose * 100) : 0;
|
||||
|
||||
const changeCell = row.querySelector('.change');
|
||||
const changePercentCell = row.querySelector('.change-percent');
|
||||
|
||||
changeCell.textContent = formatNumber(change, decimalPlaces);
|
||||
changePercentCell.textContent = `${formatNumber(changePercent, 2)}%`;
|
||||
|
||||
// 색상 적용
|
||||
const colorClass = change > 0 ? 'price-up' : change < 0 ? 'price-down' : '';
|
||||
changeCell.className = `numeric ${colorClass}`;
|
||||
changePercentCell.className = `numeric ${colorClass}`;
|
||||
|
||||
// 매입액 계산
|
||||
const avgPrice = parseFloat(row.querySelector('.avg-price').value) || 0;
|
||||
const quantity = parseFloat(row.querySelector('.quantity').value) || 0;
|
||||
const buyTotal = avgPrice * quantity;
|
||||
row.querySelector('.buy-total').textContent = formatNumber(buyTotal, 0);
|
||||
});
|
||||
}
|
||||
|
||||
// 손익 업데이트
|
||||
async function updatePnL() {
|
||||
try {
|
||||
const response = await fetch('/api/pnl');
|
||||
const pnl = await response.json();
|
||||
|
||||
// 금 손익
|
||||
updatePnLCard('gold-pnl', 'gold-percent', pnl.금손익, pnl['금손익%']);
|
||||
|
||||
// BTC 손익
|
||||
updatePnLCard('btc-pnl', 'btc-percent', pnl.BTC손익, pnl['BTC손익%']);
|
||||
|
||||
// 총 손익
|
||||
updatePnLCard('total-pnl', 'total-percent', pnl.총손익, pnl['총손익%']);
|
||||
|
||||
} catch (error) {
|
||||
console.error('PnL 업데이트 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// PnL 카드 업데이트
|
||||
function updatePnLCard(valueId, percentId, value, percent) {
|
||||
const valueElem = document.getElementById(valueId);
|
||||
const percentElem = document.getElementById(percentId);
|
||||
|
||||
valueElem.textContent = formatNumber(value, 0) + ' 원';
|
||||
percentElem.textContent = formatNumber(percent, 2) + '%';
|
||||
|
||||
// 총손익이 아닌 경우만 색상 적용
|
||||
if (valueId !== 'total-pnl') {
|
||||
valueElem.className = `pnl-value ${value > 0 ? 'profit' : value < 0 ? 'loss' : ''}`;
|
||||
percentElem.className = `pnl-percent ${value > 0 ? 'profit' : value < 0 ? 'loss' : ''}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 자산 변경 처리
|
||||
async function handleAssetChange(event) {
|
||||
const input = event.target;
|
||||
const symbol = input.dataset.symbol;
|
||||
const row = input.closest('tr');
|
||||
|
||||
const previousClose = parseFloat(row.querySelector('.prev-close').value) || 0;
|
||||
const averagePrice = parseFloat(row.querySelector('.avg-price').value) || 0;
|
||||
const quantity = parseFloat(row.querySelector('.quantity').value) || 0;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/assets', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
symbol,
|
||||
previous_close: previousClose,
|
||||
average_price: averagePrice,
|
||||
quantity: quantity
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
console.log(`✅ ${symbol} 업데이트 완료`);
|
||||
// 매입액 즉시 업데이트
|
||||
const buyTotal = averagePrice * quantity;
|
||||
row.querySelector('.buy-total').textContent = formatNumber(buyTotal, 0);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('업데이트 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 알림 설정 모달 열기
|
||||
function openAlertModal() {
|
||||
document.getElementById('급등락_감지').checked = alertSettings.급등락_감지 || false;
|
||||
document.getElementById('급등락_임계값').value = alertSettings.급등락_임계값 || 3.0;
|
||||
document.getElementById('목표수익률_감지').checked = alertSettings.목표수익률_감지 || false;
|
||||
document.getElementById('목표수익률').value = alertSettings.목표수익률 || 10.0;
|
||||
document.getElementById('특정가격_감지').checked = alertSettings.특정가격_감지 || false;
|
||||
document.getElementById('금_목표가격').value = alertSettings.금_목표가격 || 100000;
|
||||
document.getElementById('BTC_목표가격').value = alertSettings.BTC_목표가격 || 100000000;
|
||||
|
||||
document.getElementById('alert-modal').classList.add('active');
|
||||
}
|
||||
|
||||
// 알림 설정 모달 닫기
|
||||
function closeAlertModal() {
|
||||
document.getElementById('alert-modal').classList.remove('active');
|
||||
}
|
||||
|
||||
// 알림 설정 저장
|
||||
async function saveAlertSettings() {
|
||||
const settings = {
|
||||
급등락_감지: document.getElementById('급등락_감지').checked,
|
||||
급등락_임계값: parseFloat(document.getElementById('급등락_임계값').value),
|
||||
목표수익률_감지: document.getElementById('목표수익률_감지').checked,
|
||||
목표수익률: parseFloat(document.getElementById('목표수익률').value),
|
||||
특정가격_감지: document.getElementById('특정가격_감지').checked,
|
||||
금_목표가격: parseInt(document.getElementById('금_목표가격').value),
|
||||
BTC_목표가격: parseInt(document.getElementById('BTC_목표가격').value)
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/alerts/settings', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ settings })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
alertSettings = settings;
|
||||
console.log('✅ 알림 설정 저장 완료');
|
||||
closeAlertModal();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('알림 설정 저장 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 데이터 새로고침
|
||||
async function refreshData() {
|
||||
await loadAssets();
|
||||
console.log('🔄 데이터 새로고침 완료');
|
||||
}
|
||||
|
||||
// 마지막 업데이트 시간 표시
|
||||
function updateLastUpdateTime() {
|
||||
const now = new Date();
|
||||
const timeString = now.toLocaleTimeString('ko-KR');
|
||||
document.getElementById('last-update').textContent = `마지막 업데이트: ${timeString}`;
|
||||
}
|
||||
|
||||
// 숫자 포맷팅
|
||||
function formatNumber(value, decimals = 0) {
|
||||
if (value === null || value === undefined || isNaN(value)) {
|
||||
return 'N/A';
|
||||
}
|
||||
return value.toLocaleString('ko-KR', {
|
||||
minimumFractionDigits: decimals,
|
||||
maximumFractionDigits: decimals
|
||||
});
|
||||
}
|
||||
|
||||
// 외부 클릭 시 모달 닫기
|
||||
window.addEventListener('click', (event) => {
|
||||
const modal = document.getElementById('alert-modal');
|
||||
if (event.target === modal) {
|
||||
closeAlertModal();
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user