|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
|
<title>PinScript V6 Digital Dictionary for TradingView</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.code-block { |
|
|
background: #1e293b; |
|
|
color: #e2e8f0; |
|
|
padding: 1rem; |
|
|
border-radius: 0.5rem; |
|
|
font-family: 'Courier New', monospace; |
|
|
overflow-x: auto; |
|
|
border-left: 4px solid #3b82f6; |
|
|
} |
|
|
.highlight { |
|
|
background-color: #3b82f610; |
|
|
padding: 0.2rem 0.4rem; |
|
|
border-radius: 0.25rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
.indicator-card:hover { |
|
|
transform: translateY(-4px); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.search-highlight { |
|
|
background-color: #fbbf24; |
|
|
color: #000; |
|
|
font-weight: 600; |
|
|
padding: 0.1rem 0.3rem; |
|
|
border-radius: 0.25rem; |
|
|
} |
|
|
.tooltip { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
.tooltip .tooltiptext { |
|
|
visibility: hidden; |
|
|
width: 200px; |
|
|
background-color: #374151; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 8px; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
margin-left: -100px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
font-size: 14px; |
|
|
border: 1px solid #4b5563; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.tooltip:hover .tooltiptext { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
.sync-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.sync-icon.syncing { |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white min-h-screen"> |
|
|
|
|
|
|
|
|
<header class="bg-black/30 backdrop-blur-md border-b border-white/10 sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="text-3xl"><i class="fab fa-trade-federation text-blue-400"></i></div> |
|
|
<div> |
|
|
<h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">PinScript V6 Dictionary</h1> |
|
|
<p class="text-sm text-gray-300">Digital Kamus Indikator TradingView</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-6"> |
|
|
<div class="hidden md:flex items-center space-x-4 text-sm text-gray-300"> |
|
|
<span><i class="fas fa-database mr-1"></i> LocalStorage</span> |
|
|
<span><i class="fas fa-code mr-1"></i> PineScript V6</span> |
|
|
<span><i class="fas fa-chart-line mr-1"></i> Real-time Analysis</span> |
|
|
</div> |
|
|
<div class="tooltip"> |
|
|
<button id="syncBtn" class="flex items-center space-x-2 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition-colors"> |
|
|
<i id="syncIcon" class="fas fa-sync-alt sync-icon"></i> |
|
|
<span>Sinkron</span> |
|
|
</button> |
|
|
<div class="tooltiptext"> |
|
|
Sinkronisasi dengan database TradingView dan penyimpanan lokal. Memastikan Anda memiliki versi terbaru dari semua indikator. |
|
|
</div> |
|
|
</div> |
|
|
<div class="tooltip"> |
|
|
<button id="addIndicatorBtn" class="flex items-center space-x-2 bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg transition-colors"> |
|
|
<i class="fas fa-plus"></i> |
|
|
<span>Tambah</span> |
|
|
</button> |
|
|
<div class="tooltiptext"> |
|
|
Tambahkan indikator PinScript V6 baru ke dalam kamus digital Anda. Bagikan dengan komunitas trader! |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div id="addIndicatorModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4"> |
|
|
<div class="bg-slate-800 rounded-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto border border-white/10"> |
|
|
<div class="p-6 border-b border-white/10"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h3 class="text-xl font-bold">Tambah Indikator Baru</h3> |
|
|
<button onclick="closeAddModal()" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<form id="addIndicatorForm" class="p-6 space-y-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Nama Indikator <span class="text-red-400">*</span></label> |
|
|
<input type="text" id="indicatorTitle" required |
|
|
class="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-gray-300" |
|
|
placeholder="Contoh: SuperTrend Advanced" /> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Kategori <span class="text-red-400">*</span></label> |
|
|
<select id="indicatorCategory" required class="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white"> |
|
|
<option value="">Pilih kategori...</option> |
|
|
<option value="trend">Indikator Tren</option> |
|
|
<option value="oscillator">Oscillator</option> |
|
|
<option value="volume">Volume</option> |
|
|
<option value="volatility">Volatilitas</option> |
|
|
<option value="pattern">Pola & Strategi</option> |
|
|
<option value="custom">Custom Indikator</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Script PinScript V6 <span class="text-red-400">*</span></label> |
|
|
<div class="mb-2 text-xs text-gray-400">Mulai dengan //@version=6 untuk kompatibilitas</div> |
|
|
<textarea id="indicatorScript" required rows="8" |
|
|
class="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-gray-300 font-mono" |
|
|
placeholder="//@version=6 |
|
|
indicator("Nama Indikator", overlay=true) |
|
|
|
|
|
// Kode PythonScript Anda... |
|
|
"></textarea> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Penjelasan Indikator <span class="text-red-400">*</span></label> |
|
|
<textarea id="indicatorExplanation" required rows="3" |
|
|
class="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-gray-300" |
|
|
placeholder="Jelaskan secara ringkas apa yang dilakukan indikator ini dan bagaimana cara kerjanya..."></textarea> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Metode Penggunaan <span class="text-red-400">*</span></label> |
|
|
<textarea id="indicatorUsage" required rows="3" |
|
|
class="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-gray-300" |
|
|
placeholder="Jelaskan strategi, parameter, dan kondisi yang ideal untuk menggunakan indikator ini..."></textarea> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Tags (pisahkan dengan koma)</label> |
|
|
<input type="text" id="indicatorTags" |
|
|
class="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-gray-300" |
|
|
placeholder="trend, breakout, volatility, advance..." /> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-3"> |
|
|
<input type="checkbox" id="shareWithCommunity" class="w-4 h-4" checked> |
|
|
<label for="shareWithCommunity" class="text-sm">Bagikan dengan komunitas untuk disetujui (dianjurkan)</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-3 pt-4"> |
|
|
<button type="button" onclick="closeAddModal()" class="flex-1 bg-white/10 hover:bg-white/20 text-white font-medium py-3 px-6 rounded-xl transition-colors"> |
|
|
Batal |
|
|
</button> |
|
|
<button type="submit" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-xl transition-colors"> |
|
|
Tambahkan ke Kamus |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="syncModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4"> |
|
|
<div class="bg-slate-800 rounded-2xl max-w-md w-full border border-white/10"> |
|
|
<div class="p-6"> |
|
|
<div class="flex flex-col items-center text-center space-y-4"> |
|
|
<div id="syncStatusIcon" class="text-6xl"> |
|
|
<i class="fas fa-sync-alt sync-icon syncing"></i> |
|
|
</div> |
|
|
<h3 id="syncTitle" class="text-xl font-bold">Menyinkronkan Data</h3> |
|
|
<p id="syncMessage" class="text-gray-300">Menghubungkan dengan database TradingView dan memeriksa pembaruan...</p> |
|
|
<div id="syncProgressBar" class="w-full bg-white/10 rounded-full h-2"> |
|
|
<div id="syncProgress" class="bg-blue-500 h-2 rounded-full" style="width: 20%"></div> |
|
|
</div> |
|
|
<div id="syncDetails" class="text-xs text-gray-400 mt-2 max-h-32 overflow-y-auto w-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<main class="container mx-auto px-6 py-8 flex flex-col lg:flex-row gap-8"> |
|
|
|
|
|
|
|
|
<aside class="lg:w-80 flex-shrink-0"> |
|
|
<div class="bg-black/30 backdrop-blur-md rounded-2xl p-6 border border-white/10 sticky top-24"> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium mb-2">🔍 Cari Indikator</label> |
|
|
<div class="relative"> |
|
|
<input |
|
|
type="text" |
|
|
id="searchInput" |
|
|
placeholder="Cari berdasarkan nama, fungsi, atau kata kunci..." |
|
|
class="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 pl-12 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-gray-300" |
|
|
/> |
|
|
<i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium mb-2">🔖 Kategori</label> |
|
|
<select id="categoryFilter" class="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white"> |
|
|
<option value="">Semua Kategori</option> |
|
|
<option value="trend">Indikator Tren</option> |
|
|
<option value="oscillator">Oscillator</option> |
|
|
<option value="volume">Volume</option> |
|
|
<option value="volatility">Volatilitas</option> |
|
|
<option value="pattern">Pola & Strategi</option> |
|
|
<option value="custom">Custom Indikator</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<label class="block text-sm font-medium">💾 Indikator Saya</label> |
|
|
<span id="myIndicatorsCount" class="text-xs bg-white/10 text-gray-300 px-2 py-1 rounded-full">0</span> |
|
|
</div> |
|
|
<div id="myIndicatorsList" class="space-y-2 max-h-32 overflow-y-auto"> |
|
|
<p class="text-gray-400 text-sm">Tidak ada indikator pribadi</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<label class="block text-sm font-medium">⭐ Favorit Anda</label> |
|
|
<span id="favoritesCount" class="text-xs bg-white/10 text-gray-300 px-2 py-1 rounded-full">0</span> |
|
|
</div> |
|
|
<div id="favoritesList" class="space-y-2 max-h-32 overflow-y-auto"> |
|
|
<p class="text-gray-400 text-sm">Belum ada favorit</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white/5 rounded-xl p-4 text-sm"> |
|
|
<h4 class="font-semibold mb-2 flex items-center"> |
|
|
<i class="fas fa-chart-bar mr-2"></i> Statistik |
|
|
</h4> |
|
|
<div class="space-y-1 text-gray-300"> |
|
|
<div>Total Indikator: <span id="totalIndicators" class="float-right">24</span></div> |
|
|
<div>Terakhir disinkron: <span id="lastSync" class="float-right">Hari ini</span></div> |
|
|
<div>Database: <span class="float-right">Hybrid</span></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6 p-3 bg-white/5 rounded-lg text-xs"> |
|
|
<div class="flex items-center space-x-2 mb-2"> |
|
|
<div id="connectionStatus" class="w-2 h-2 bg-green-500 rounded-full"></div> |
|
|
<span>Terhubung dengan server</span> |
|
|
</div> |
|
|
<div id="syncStatusDetails" class="text-gray-400"> |
|
|
Sinkronisasi berhasil |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<div class="flex-1"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-2xl font-bold mb-2">📚 Kamus Digital PinScript V6</h2> |
|
|
<p class="text-gray-300">Kumpulan lengkap indikator, script, dan metode penggunaan PineScript v6 untuk <span class="highlight">TradingView</span>. <span id="cloudStatus" class="text-blue-400 text-sm"></span></p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-blue-500/30 rounded-xl p-4 mb-6"> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<i class="fas fa-lightbulb text-yellow-400 mt-1"></i> |
|
|
<div> |
|
|
<h4 class="font-semibold text-yellow-400">Cara Menggunakan:</h4> |
|
|
<p class="text-sm text-gray-300">1. Gunakan kotak pencarian untuk menemukan indikator<br>2. Gunakan filter kategori untuk menyaring hasil<br>3. Klik tombol ❤️ untuk menandai favorit<br>4. Klik "Salin Script" untuk menyalin kode ke clipboard<br>5. Klik tombol "Tambah" untuk membuat indikator sendiri</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="cloudNotification" class="hidden bg-green-500/20 border border-green-500/30 rounded-xl p-4 mb-6 items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-cloud text-green-400 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-semibold text-green-400">Sinkronisasi Cloud</h4> |
|
|
<p class="text-sm text-green-300">Indikator baru telah diunggah ke cloud. Periksa indikator Anda di perangkat lain!</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="indicatorList" class="space-y-6"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="toast" class="fixed bottom-6 right-6 bg-green-600 text-white px-6 py-3 rounded-xl shadow-lg hidden transition-all duration-300 transform opacity-0 translate-y-4"> |
|
|
<div class="flex items-center"> |
|
|
<i id="toastIcon" class="fas fa-check-circle mr-2"></i> |
|
|
<span id="toastMessage">Disalin ke clipboard!</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let pinScriptDB = []; |
|
|
let customDB = []; |
|
|
let favorites = []; |
|
|
let myIndicators = []; |
|
|
let syncInProgress = false; |
|
|
|
|
|
|
|
|
const CLOUD_CONFIG = { |
|
|
endpoint: 'https://example.com/api/pinescript', |
|
|
syncInterval: 300000, |
|
|
maxRetries: 3 |
|
|
}; |
|
|
|
|
|
|
|
|
const indicatorListEl = document.getElementById('indicatorList'); |
|
|
const searchInputEl = document.getElementById('searchInput'); |
|
|
const categoryFilterEl = document.getElementById('categoryFilter'); |
|
|
const favoritesListEl = document.getElementById('favoritesList'); |
|
|
const myIndicatorsListEl = document.getElementById('myIndicatorsList'); |
|
|
const totalIndicatorsEl = document.getElementById('totalIndicators'); |
|
|
const toastEl = document.getElementById('toast'); |
|
|
const toastMessageEl = document.getElementById('toastMessage'); |
|
|
const toastIconEl = document.getElementById('toastIcon'); |
|
|
const syncBtn = document.getElementById('syncBtn'); |
|
|
const syncIcon = document.getElementById('syncIcon'); |
|
|
const addIndicatorBtn = document.getElementById('addIndicatorBtn'); |
|
|
const addIndicatorModal = document.getElementById('addIndicatorModal'); |
|
|
const syncModal = document.getElementById('syncModal'); |
|
|
const syncTitle = document.getElementById('syncTitle'); |
|
|
const syncMessage = document.getElementById('syncMessage'); |
|
|
const syncProgress = document.getElementById('syncProgress'); |
|
|
const syncDetails = document.getElementById('syncDetails'); |
|
|
const connectionStatus = document.getElementById('connectionStatus'); |
|
|
const syncStatusDetails = document.getElementById('syncStatusDetails'); |
|
|
const cloudNotification = document.getElementById('cloudNotification'); |
|
|
const lastSyncEl = document.getElementById('lastSync'); |
|
|
const favoritesCountEl = document.getElementById('favoritesCount'); |
|
|
const myIndicatorsCountEl = document.getElementById('myIndicatorsCount'); |
|
|
const cloudStatusEl = document.getElementById('cloudStatus'); |
|
|
|
|
|
|
|
|
function init() { |
|
|
|
|
|
loadDataFromStorage(); |
|
|
|
|
|
|
|
|
if (pinScriptDB.length === 0) { |
|
|
initializeWithDemoData(); |
|
|
} |
|
|
|
|
|
|
|
|
renderIndicators(filterIndicators()); |
|
|
renderFavorites(); |
|
|
renderMyIndicators(); |
|
|
updateStats(); |
|
|
|
|
|
|
|
|
setInterval(performSync, CLOUD_CONFIG.syncInterval); |
|
|
|
|
|
|
|
|
setTimeout(performSync, 2000); |
|
|
} |
|
|
|
|
|
|
|
|
function loadDataFromStorage() { |
|
|
try { |
|
|
const storedMainDB = localStorage.getItem('pinescript_db_v6'); |
|
|
const storedCustomDB = localStorage.getItem('pinescript_custom_db_v6'); |
|
|
const storedFavorites = localStorage.getItem('pinescript_favorites_v6'); |
|
|
const storedMyIndicators = localStorage.getItem('pinescript_my_indicators_v6'); |
|
|
const lastSync = localStorage.getItem('pinescript_last_sync_v6'); |
|
|
|
|
|
pinScriptDB = storedMainDB ? JSON.parse(storedMainDB) : []; |
|
|
customDB = storedCustomDB ? JSON.parse(storedCustomDB) : []; |
|
|
favorites = storedFavorites ? JSON.parse(storedFavorites) : []; |
|
|
myIndicators = storedMyIndicators ? JSON.parse(storedMyIndicators) : []; |
|
|
|
|
|
if (lastSync) { |
|
|
lastSyncEl.textContent = new Date(lastSync).toLocaleString('id-ID'); |
|
|
} else { |
|
|
lastSyncEl.textContent = 'Belum pernah'; |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Error loading data from storage:', error); |
|
|
showToast('Gagal memuat data dari penyimpanan lokal', true); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function saveDataToStorage() { |
|
|
try { |
|
|
localStorage.setItem('pinescript_db_v6', JSON.stringify(pinScriptDB)); |
|
|
localStorage.setItem('pinescript_custom_db_v6', JSON.stringify(customDB)); |
|
|
localStorage.setItem('pinescript_favorites_v6', JSON.stringify(favorites)); |
|
|
localStorage.setItem('pinescript_my_indicators_v6', JSON.stringify(myIndicators)); |
|
|
localStorage.setItem('pinescript_last_sync_v6', new Date().toISOString()); |
|
|
|
|
|
lastSyncEl.textContent = new Date().toLocaleString('id-ID'); |
|
|
} catch (error) { |
|
|
console.error('Error saving data to storage:', error); |
|
|
showToast('Gagal menyimpan data ke penyimpanan lokal', true); |
|
|
return false; |
|
|
} |
|
|
return true; |
|
|
} |
|
|
|
|
|
|
|
|
function initializeWithDemoData() { |
|
|
pinScriptDB = [ |
|
|
{ |
|
|
id: 1, |
|
|
title: "Supertrend", |
|
|
category: "trend", |
|
|
script: `//@version=6 |
|
|
indicator("Supertrend", overlay=true, format=format.price, precision=2) |
|
|
|
|
|
length = input.int(10, title="Length") |
|
|
mult = input.float(3.0, title="Multiplier", step=0.1) |
|
|
src = input.source(hlc3, title="Source") |
|
|
|
|
|
atr = ta.sma(ta.tr, length) |
|
|
up = src - mult * atr |
|
|
dn = src + mult * atr |
|
|
|
|
|
var trend = 1 |
|
|
var atr_up = up |
|
|
var atr_dn = dn |
|
|
|
|
|
trend := src[1] > atr_up[1] ? 1 : src[1] < atr_dn[1] ? -1 : trend[1] |
|
|
atr_up := src <= atr_up[1] and src[1] >= atr_up[1] ? math.max(up, atr_up[1]) : up |
|
|
atr_dn := src >= atr_dn[1] and src[1] <= atr_dn[1] ? math.min(dn, atr_dn[1]) : dn |
|
|
|
|
|
trend_up = trend == 1 ? atr_up : na |
|
|
trend_dn = trend == -1 ? atr_dn : na |
|
|
|
|
|
plot(trend_up, color=color.green, title="Up Trend", linewidth=2) |
|
|
plot(trend_dn, color=color.red, title="Down Trend", linewidth=2) |
|
|
|
|
|
alertcondition(ta.crossover(close, trend_up), title="Buy Signal", message="Supertrend: Sinyal BELI!") |
|
|
alertcondition(ta.crossunder(close, trend_dn), title="Sell Signal", message="Supertrend: Sinyal JUAL!")`, |
|
|
explanation: "Supertrend adalah indikator tren yang dinamis yang menunjukkan arah tren saat ini dengan garis di atas atau di bawah harga. Garis berubah warna berdasarkan perubahan tren, dengan dasar Average True Range (ATR) dan titik masuk/keluar berdasarkan volatilitas.", |
|
|
usage: "Gunakan Supertrend sebagai filter tren utama. Saat garis berada di bawah harga dan berwarna hijau, tren naik. Saat di atas harga dan merah, tren turun. Gunakan sinyal crossover untuk entry dan trailing stop untuk exit. Bisa digabung dengan RSI atau volume untuk konfirmasi.", |
|
|
tags: ["trend", "atr", "entry", "exit", "dynamic"], |
|
|
source: "builtin", |
|
|
createdAt: new Date().toISOString(), |
|
|
lastModified: new Date().toISOString() |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
title: "Relative Strength Index (RSI)", |
|
|
category: "oscillator", |
|
|
script: `//@version=6 |
|
|
indicator("RSI", shorttitle="RSI", format=format.price, precision=2) |
|
|
|
|
|
rsiLength = input.int(14, title="Length") |
|
|
overbought = input.int(70, title="Overbought Level") |
|
|
oversold = input.int(30, title="Oversold Level") |
|
|
src = input.source(close, title="Source") |
|
|
|
|
|
vrsi = ta.rsi(src, rsiLength) |
|
|
|
|
|
h0 = hline(overbought, "Overbought", color=color.red) |
|
|
h1 = hline(oversold, "Oversold", color=color.green) |
|
|
h2 = hline(50, "Midline", color=color.white, linestyle=hline.style_dotted) |
|
|
|
|
|
plot(vrsi, color=color.blue, title="RSI", linewidth=2) |
|
|
plot(overbought, color=color.red, title="OB Line", style=plot.style_linebr) |
|
|
plot(oversold, color=color.green, title="OS Line", style=plot.style_linebr) |
|
|
|
|
|
fill(h0, h2, color=color.red, title="Overbought Zone") |
|
|
fill(h1, h2, color=color.green, title="Oversold Zone") |
|
|
|
|
|
alertcondition(ta.crossover(vrsi, oversold), title="RSI Oversold", message="RSI: KONDISI OVERSOLD TERIDENTIFIKASI!") |
|
|
alertcondition(ta.crossunder(vrsi, overbought), title="RSI Overbought", message="RSI: KONDISI OVERBOUGHT TERIDENTIFIKASI!")`, |
|
|
explanation: "RSI mengukur kekuatan relatif harga dengan membandingkan besarnya kenaikan harga terhadap besarnya penurunan. Nilai berkisar antara 0 hingga 100. Level 70 dianggap overbought, sedangkan 30 dianggap oversold.", |
|
|
usage: "Gunakan RSI untuk mengidentifikasi kondisi jenuh beli (di atas 70) dan jenuh jual (di bawah 30). Hindari entry saat overbought dalam tren turun, dan sebaliknya. Gunakan divergence (ketidaksesuaian antara harga dan RSI) sebagai sinyal pembalikan potensial.", |
|
|
tags: ["momentum", "rsi", "overbought", "oversold", "divergence"], |
|
|
source: "builtin", |
|
|
createdAt: new Date().toISOString(), |
|
|
lastModified: new Date().toISOString() |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
title: "Volume Profile", |
|
|
category: "volume", |
|
|
script: `//@version=6 |
|
|
indicator("Volume Profile", overlay=true) |
|
|
|
|
|
study.shorttitle = "VP" |
|
|
|
|
|
bins = input.int(20, title="Jumlah Level Harga", minval=5, maxval=50) |
|
|
lookback = input.int(100, title="Lookback Period", minval=10) |
|
|
|
|
|
var float[] prices = array.new_float() |
|
|
var float[] volumes = array.new_float() |
|
|
|
|
|
float priceMin = ta.lowest(low, lookback) |
|
|
float priceMax = ta.highest(high, lookback) |
|
|
|
|
|
float step = (priceMax - priceMin) / bins |
|
|
|
|
|
// Reset arrays every bar |
|
|
array.clear(prices) |
|
|
array.clear(volumes) |
|
|
|
|
|
for i = 0 to bins - 1 |
|
|
array.push(prices, priceMin + step * i) |
|
|
array.push(volumes, 0.0) |
|
|
|
|
|
// Distribute volume |
|
|
for i = 0 to lookback - 1 |
|
|
float p = close[i] |
|
|
float v = volume[i] |
|
|
int binIndex = math.floor((p - priceMin) / step) |
|
|
if binIndex >= 0 and binIndex < bins |
|
|
array.set(volumes, binIndex, array.get(volumes, binIndex) + v) |
|
|
|
|
|
// Find max volume for scaling |
|
|
float maxVol = array.max(volumes) |
|
|
float heightFactor = 0.7 // Persentase dari chart height |
|
|
|
|
|
for i = 0 to bins - 1 |
|
|
float p = array.get(prices, i) |
|
|
float v = array.get(volumes, i) |
|
|
float barHeight = na(maxVol) or maxVol == 0 ? 0 : (v / maxVol) * heightFactor * syminfo.pointvalue * 100 |
|
|
float top = p + (barHeight / 2) |
|
|
float bottom = p - (barHeight / 2) |
|
|
box.new( |
|
|
left=bar_index - 1, |
|
|
top=top, |
|
|
right=bar_index, |
|
|
bottom=bottom, |
|
|
bgcolor=color.new(color.blue, 0.6), |
|
|
border_color=color.blue, |
|
|
text=str.format("{0,number,#.#}", v), |
|
|
text_color=color.white, |
|
|
text_size=size.small |
|
|
)`, |
|
|
explanation: "Volume Profile menampilkan distribusi volume perdagangan pada level harga tertentu selama periode tertentu. Ini membantu mengidentifikasi zona nilai (value area), titik kontrol (POC), dan level penawaran/permintaan yang kuat.", |
|
|
usage: "Gunakan Volume Profile untuk menemukan level harga dengan aktivitas volume tertinggi (Point of Control) dan area di mana sebagian besar perdagangan terjadi (Value Area). Entry pada level support/resistance dengan volume tinggi cenderung lebih valid.", |
|
|
tags: ["volume", "profile", "support", "resistance", "value"], |
|
|
source: "builtin", |
|
|
createdAt: new Date().toISOString(), |
|
|
lastModified: new Date().toISOString() |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
saveDataToStorage(); |
|
|
} |
|
|
|
|
|
|
|
|
function filterIndicators() { |
|
|
const searchQuery = searchInputEl.value.trim().toLowerCase(); |
|
|
const categoryFilter = categoryFilterEl.value; |
|
|
|
|
|
let filtered = [...pinScriptDB, ...customDB]; |
|
|
|
|
|
|
|
|
if (searchQuery) { |
|
|
filtered = filtered.filter(ind => |
|
|
ind.title.toLowerCase().includes(searchQuery) || |
|
|
ind.explanation.toLowerCase().includes(searchQuery) || |
|
|
ind.usage.toLowerCase().includes(searchQuery) || |
|
|
ind.tags.some(tag => tag.toLowerCase().includes(searchQuery)) |
|
|
); |
|
|
} |
|
|
|
|
|
|
|
|
if (categoryFilter) { |
|
|
filtered = filtered.filter(ind => ind.category === categoryFilter); |
|
|
} |
|
|
|
|
|
return filtered; |
|
|
} |
|
|
|
|
|
|
|
|
function renderIndicators(indicators) { |
|
|
indicatorListEl.innerHTML = ''; |
|
|
|
|
|
if (indicators.length === 0) { |
|
|
indicatorListEl.innerHTML = ` |
|
|
<div class="text-center py-12 bg-white/5 rounded-2xl"> |
|
|
<i class="fas fa-search text-5xl text-gray-500 mb-4"></i> |
|
|
<h3 class="text-xl font-semibold text-gray-400">Tidak ditemukan</h3> |
|
|
<p class="text-gray-500">Coba sesuaikan kata pencarian atau filter Anda</p> |
|
|
<button onclick="resetFilters()" class="mt-4 bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors"> |
|
|
Reset Filter |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
indicators.sort((a, b) => a.title.localeCompare(b.title)); |
|
|
|
|
|
indicators.forEach(indicator => { |
|
|
const isFavorited = favorites.includes(indicator.id); |
|
|
const isMyIndicator = myIndicators.includes(indicator.id); |
|
|
const showCloudTag = indicator.source === 'cloud'; |
|
|
|
|
|
|
|
|
let title = indicator.title; |
|
|
let explanation = indicator.explanation; |
|
|
let usage = indicator.usage; |
|
|
const searchTerm = searchInputEl.value.trim().toLowerCase(); |
|
|
|
|
|
if (searchTerm) { |
|
|
const regex = new RegExp(`(${searchTerm})`, 'gi'); |
|
|
title = title.replace(regex, '<span class="search-highlight">$1</span>'); |
|
|
explanation = explanation.replace(regex, '<span class="search-highlight">$1</span>'); |
|
|
usage = usage.replace(regex, '<span class="search-highlight">$1</span>'); |
|
|
} |
|
|
|
|
|
const indicatorCard = document.createElement('div'); |
|
|
indicatorCard.className = 'indicator-card bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/10 hover:bg-white/20 transition-all duration-300'; |
|
|
|
|
|
|
|
|
let syncStatus = ''; |
|
|
if (showCloudTag) { |
|
|
syncStatus = `<span class="ml-2 px-2 py-1 bg-blue-500/20 text-blue-300 text-xs rounded-full">Cloud</span>`; |
|
|
} |
|
|
|
|
|
|
|
|
if (indicator.source === 'custom') { |
|
|
syncStatus += ` <span class="ml-1 px-2 py-1 bg-purple-500/20 text-purple-300 text-xs rounded-full">Custom</span>`; |
|
|
} |
|
|
|
|
|
indicatorCard.innerHTML = ` |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-xl font-bold">${title}${syncStatus}</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button onclick="copyScript(${indicator.id})" class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors" title="Salin Script"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
<button onclick="toggleFavorite(${indicator.id})" class="p-2 rounded-lg transition-colors ${isFavorited ? 'text-yellow-400 bg-yellow-400/20' : 'text-gray-400 hover:text-yellow-400 hover:bg-yellow-400/10'}" title="${isFavorited ? 'Hapus dari Favorit' : 'Tambah ke Favorit'}"> |
|
|
<i class="fas fa-heart"></i> |
|
|
</button> |
|
|
${isMyIndicator ? `<button onclick="editIndicator(${indicator.id})" class="p-2 text-blue-400 hover:text-blue-300 bg-blue-400/20 rounded-lg transition-colors" title="Edit Indikator"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button>` : ''} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<span class="inline-block bg-blue-500/20 text-blue-300 text-xs px-3 py-1 rounded-full mb-2"> |
|
|
${getCategoryLabel(indicator.category)} |
|
|
</span> |
|
|
<p class="text-gray-300">${explanation}</p> |
|
|
</div> |
|
|
|
|
|
<details class="mb-4 bg-black/20 rounded-lg overflow-hidden"> |
|
|
<summary class="cursor-pointer px-4 py-3 bg-white/5 hover:bg-white/10 transition-colors flex justify-between items-center font-medium"> |
|
|
<span>📘 Metode Penggunaan</span> |
|
|
<i class="fas fa-angle-down transition-transform duration-200"></i> |
|
|
</summary> |
|
|
<div class="px-4 pb-4 pt-2"> |
|
|
<p class="text-gray-300">${usage}</p> |
|
|
</div> |
|
|
</details> |
|
|
|
|
|
<details class="mb-4 bg-black/20 rounded-lg overflow-hidden"> |
|
|
<summary class="cursor-pointer px-4 py-3 bg-white/5 hover:bg-white/10 transition-colors flex justify-between items-center font-medium"> |
|
|
<span>💻 Script PineScript V6</span> |
|
|
<i class="fas fa-angle-down transition-transform duration-200"></i> |
|
|
</summary> |
|
|
<div class="px-4 pb-4 pt-2"> |
|
|
<pre class="code-block">${indicator.script}</pre> |
|
|
</div> |
|
|
</details> |
|
|
|
|
|
<div class="flex flex-wrap gap-2"> |
|
|
${indicator.tags.map(tag => `<span class="text-xs bg-white/5 text-gray-300 px-2 py-1 rounded">${tag}</span>`).join('')} |
|
|
<span class="text-xs bg-white/10 text-gray-300 px-2 py-1 rounded">Dibuat: ${new Date(indicator.createdAt).toLocaleDateString('id-ID')}</span> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
const details = indicatorCard.querySelectorAll('details'); |
|
|
details.forEach(detail => { |
|
|
const summary = detail.querySelector('summary'); |
|
|
const icon = summary.querySelector('i'); |
|
|
|
|
|
if (icon) { |
|
|
detail.addEventListener('toggle', () => { |
|
|
if (detail.open) { |
|
|
icon.classList.remove('fa-angle-down'); |
|
|
icon.classList.add('fa-angle-up'); |
|
|
} else { |
|
|
icon.classList.remove('fa-angle-up'); |
|
|
icon.classList.add('fa-angle-down'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
indicatorListEl.appendChild(indicatorCard); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function renderFavorites() { |
|
|
favoritesListEl.innerHTML = ''; |
|
|
|
|
|
if (favorites.length === 0) { |
|
|
favoritesListEl.innerHTML = '<p class="text-gray-400 text-sm">Belum ada favorit</p>'; |
|
|
favoritesCountEl.textContent = '0'; |
|
|
return; |
|
|
} |
|
|
|
|
|
const favoriteIndicators = [...pinScriptDB, ...customDB].filter(ind => favorites.includes(ind.id)); |
|
|
|
|
|
|
|
|
favoriteIndicators.sort((a, b) => a.title.localeCompare(b.title)); |
|
|
|
|
|
favoriteIndicators.forEach(ind => { |
|
|
const item = document.createElement('div'); |
|
|
item.className = 'flex items-center justify-between text-sm text-gray-300 bg-white/5 rounded px-2 py-1'; |
|
|
item.innerHTML = ` |
|
|
<span class="truncate">${ind.title}</span> |
|
|
<button onclick="toggleFavorite(${ind.id})" class="text-yellow-400 hover:text-yellow-300"> |
|
|
<i class="fas fa-heart"></i> |
|
|
</button> |
|
|
`; |
|
|
favoritesListEl.appendChild(item); |
|
|
}); |
|
|
|
|
|
favoritesCountEl.textContent = favoriteIndicators.length; |
|
|
} |
|
|
|
|
|
|
|
|
function renderMyIndicators() { |
|
|
myIndicatorsListEl.innerHTML = ''; |
|
|
|
|
|
if (myIndicators.length === 0) { |
|
|
myIndicatorsListEl.innerHTML = '<p class="text-gray-400 text-sm">Tidak ada indikator pribadi</p>'; |
|
|
myIndicatorsCountEl.textContent = '0'; |
|
|
return; |
|
|
} |
|
|
|
|
|
const myIndicatorItems = [...pinScriptDB, ...customDB].filter(ind => myIndicators.includes(ind.id)); |
|
|
|
|
|
|
|
|
myIndicatorItems.sort((a, b) => a.title.localeCompare(b.title)); |
|
|
|
|
|
myIndicatorItems.forEach(ind => { |
|
|
const item = document.createElement('div'); |
|
|
item.className = 'flex items-center justify-between text-sm text-gray-300 bg-white/5 rounded px-2 py-1'; |
|
|
item.innerHTML = ` |
|
|
<span class="truncate">${ind.title}</span> |
|
|
${ind.source === 'custom' ? `<button onclick="editIndicator(${ind.id})" class="text-blue-400 hover:text-blue-300"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button>` : ''} |
|
|
`; |
|
|
myIndicatorsListEl.appendChild(item); |
|
|
}); |
|
|
|
|
|
myIndicatorsCountEl.textContent = myIndicatorItems.length; |
|
|
} |
|
|
|
|
|
|
|
|
function getCategoryLabel(category) { |
|
|
const labels = { |
|
|
trend: 'Indikator Tren', |
|
|
oscillator: 'Oscillator', |
|
|
volume: 'Volume', |
|
|
volatility: 'Volatilitas', |
|
|
pattern: 'Pola & Strategi', |
|
|
custom: 'Custom Indikator' |
|
|
}; |
|
|
return labels[category] || category; |
|
|
} |
|
|
|
|
|
|
|
|
function updateStats() { |
|
|
totalIndicatorsEl.textContent = pinScriptDB.length + customDB.length; |
|
|
} |
|
|
|
|
|
|
|
|
function toggleFavorite(id) { |
|
|
const index = favorites.indexOf(id); |
|
|
if (index === -1) { |
|
|
favorites.push(id); |
|
|
showToast('Ditambahkan ke favorit!'); |
|
|
} else { |
|
|
favorites.splice(index, 1); |
|
|
showToast('Dihapus dari favorit!'); |
|
|
} |
|
|
|
|
|
saveDataToStorage(); |
|
|
renderIndicators(filterIndicators()); |
|
|
renderFavorites(); |
|
|
} |
|
|
|
|
|
|
|
|
function copyScript(id) { |
|
|
const indicator = [...pinScriptDB, ...customDB].find(ind => ind.id === id); |
|
|
navigator.clipboard.writeText(indicator.script) |
|
|
.then(() => { |
|
|
showToast('Script disalin ke clipboard!'); |
|
|
}) |
|
|
.catch(err => { |
|
|
console.error('Could not copy text: ', err); |
|
|
showToast('Gagal menyalin script', true); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function openAddModal() { |
|
|
addIndicatorModal.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
} |
|
|
|
|
|
|
|
|
function editIndicator(id) { |
|
|
const indicator = [...customDB, ...pinScriptDB].find(ind => ind.id === id); |
|
|
if (!indicator || indicator.source !== 'custom') { |
|
|
showToast('Hanya indikator custom yang bisa diedit', true); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('indicatorTitle').value = indicator.title; |
|
|
document.getElementById('indicatorCategory').value = indicator.category; |
|
|
document.getElementById('indicatorScript').value = indicator.script; |
|
|
document.getElementById('indicatorExplanation').value = indicator.explanation; |
|
|
document.getElementById('indicatorUsage').value = indicator.usage; |
|
|
document.getElementById('indicatorTags').value = indicator.tags.join(', '); |
|
|
document.getElementById('shareWithCommunity').checked = true; |
|
|
|
|
|
|
|
|
const form = document.getElementById('addIndicatorForm'); |
|
|
form.setAttribute('data-edit-id', id); |
|
|
|
|
|
const modalTitle = addIndicatorModal.querySelector('h3'); |
|
|
modalTitle.textContent = 'Edit Indikator'; |
|
|
|
|
|
const submitBtn = form.querySelector('button[type="submit"]'); |
|
|
submitBtn.textContent = 'Perbarui Indikator'; |
|
|
|
|
|
openAddModal(); |
|
|
} |
|
|
|
|
|
|
|
|
function closeAddModal() { |
|
|
addIndicatorModal.classList.add('hidden'); |
|
|
document.body.style.overflow = ''; |
|
|
|
|
|
|
|
|
const form = document.getElementById('addIndicatorForm'); |
|
|
form.reset(); |
|
|
form.removeAttribute('data-edit-id'); |
|
|
|
|
|
const modalTitle = addIndicatorModal.querySelector('h3'); |
|
|
modalTitle.textContent = 'Tambah Indikator Baru'; |
|
|
|
|
|
const submitBtn = form.querySelector('button[type="submit"]'); |
|
|
submitBtn.textContent = 'Tambahkan ke Kamus'; |
|
|
} |
|
|
|
|
|
|
|
|
function handleAddIndicator(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const editId = this.getAttribute('data-edit-id'); |
|
|
const isEdit = editId !== null; |
|
|
|
|
|
const title = document.getElementById('indicatorTitle').value.trim(); |
|
|
const category = document.getElementById('indicatorCategory').value; |
|
|
const script = document.getElementById('indicatorScript').value.trim(); |
|
|
const explanation = document.getElementById('indicatorExplanation').value.trim(); |
|
|
const usage = document.getElementById('indicatorUsage').value.trim(); |
|
|
const tagsInput = document.getElementById('indicatorTags').value.trim(); |
|
|
|
|
|
|
|
|
if (!title || !category || !script || !explanation || !usage) { |
|
|
showToast('Semua field yang ditandai * wajib diisi', true); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const tags = tagsInput ? tagsInput.split(',').map(tag => tag.trim()).filter(tag => tag) : []; |
|
|
|
|
|
if (isEdit) { |
|
|
|
|
|
const indicatorIndex = customDB.findIndex(ind => ind.id == editId); |
|
|
if (indicatorIndex !== -1) { |
|
|
customDB[indicatorIndex] = { |
|
|
...customDB[indicatorIndex], |
|
|
title, |
|
|
category, |
|
|
script, |
|
|
explanation, |
|
|
usage, |
|
|
tags, |
|
|
lastModified: new Date().toISOString() |
|
|
}; |
|
|
|
|
|
showToast('Indikator berhasil diperbarui!'); |
|
|
} else { |
|
|
showToast('Gagal memperbarui indikator', true); |
|
|
return; |
|
|
} |
|
|
} else { |
|
|
|
|
|
const newId = Date.now(); |
|
|
const newIndicator = { |
|
|
id: newId, |
|
|
title, |
|
|
category, |
|
|
script, |
|
|
explanation, |
|
|
usage, |
|
|
tags, |
|
|
source: 'custom', |
|
|
createdAt: new Date().toISOString(), |
|
|
lastModified: new Date().toISOString() |
|
|
}; |
|
|
|
|
|
customDB.push(newIndicator); |
|
|
myIndicators.push(newId); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
showToast('Indikator baru berhasil ditambahkan!'); |
|
|
} |
|
|
|
|
|
|
|
|
if (saveDataToStorage()) { |
|
|
|
|
|
closeAddModal(); |
|
|
renderIndicators(filterIndicators()); |
|
|
renderMyIndicators(); |
|
|
renderFavorites(); |
|
|
updateStats(); |
|
|
|
|
|
|
|
|
const shareWithCommunity = document.getElementById('shareWithCommunity').checked; |
|
|
if (shareWithCommunity && !isEdit) { |
|
|
queueForCloudSync({ |
|
|
id: isEdit ? editId : customDB[customDB.length-1].id, |
|
|
title, |
|
|
category, |
|
|
explanation, |
|
|
tags, |
|
|
createdAt: new Date().toISOString(), |
|
|
shared: true |
|
|
}); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function queueForCloudSync(indicatorData) { |
|
|
try { |
|
|
let syncQueue = JSON.parse(localStorage.getItem('pinescript_sync_queue_v6') || '[]'); |
|
|
syncQueue.push({ |
|
|
...indicatorData, |
|
|
queuedAt: new Date().toISOString(), |
|
|
status: 'pending' |
|
|
}); |
|
|
|
|
|
localStorage.setItem('pinescript_sync_queue_v6', JSON.stringify(syncQueue)); |
|
|
cloudStatusEl.textContent = 'Menunggu sinkronisasi cloud...'; |
|
|
|
|
|
|
|
|
if (!syncInProgress) { |
|
|
setTimeout(performSync, 1000); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Failed to queue for cloud sync:', error); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function performSync() { |
|
|
if (syncInProgress) return; |
|
|
|
|
|
syncInProgress = true; |
|
|
|
|
|
|
|
|
syncModal.classList.remove('hidden'); |
|
|
syncTitle.textContent = 'Menyinkronkan Data'; |
|
|
syncMessage.textContent = 'Menghubungkan dengan server cloud...'; |
|
|
syncProgress.style.width = '10%'; |
|
|
syncDetails.innerHTML = ''; |
|
|
syncIcon.classList.add('syncing'); |
|
|
|
|
|
try { |
|
|
|
|
|
await sleep(1000); |
|
|
|
|
|
|
|
|
syncMessage.textContent = 'Memeriksa pembaruan dari server...'; |
|
|
syncProgress.style.width = '25%'; |
|
|
addSyncDetail('✔️ Terhubung dengan server cloud'); |
|
|
|
|
|
|
|
|
await sleep(1000); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const updatesAvailable = Math.random() > 0.7; |
|
|
const userUploads = JSON.parse(localStorage.getItem('pinescript_sync_queue_v6') || '[]'); |
|
|
|
|
|
if (userUploads.length > 0) { |
|
|
syncMessage.textContent = `Mengunggah ${userUploads.length} indikator ke cloud...`; |
|
|
syncProgress.style.width = '50%'; |
|
|
addSyncDetail(`📝 Mengunggah ${userUploads.length} indikator baru`); |
|
|
|
|
|
await sleep(1500); |
|
|
|
|
|
|
|
|
userUploads.forEach(item => { |
|
|
item.status = 'uploaded'; |
|
|
item.uploadedAt = new Date().toISOString(); |
|
|
}); |
|
|
|
|
|
localStorage.setItem('pinescript_sync_queue_v6', JSON.stringify(userUploads)); |
|
|
addSyncDetail('✅ Semua indikator berhasil diunggah'); |
|
|
|
|
|
|
|
|
cloudNotification.classList.remove('hidden'); |
|
|
setTimeout(() => { |
|
|
cloudNotification.classList.add('hidden'); |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
if (updatesAvailable) { |
|
|
syncMessage.textContent = 'Mengunduh pembaruan dari komunitas...'; |
|
|
syncProgress.style.width = '75%'; |
|
|
addSyncDetail('📥 Menemukan 2 indikator baru dari komunitas'); |
|
|
|
|
|
|
|
|
await sleep(1500); |
|
|
|
|
|
|
|
|
|
|
|
const communityIndicators = [ |
|
|
{ |
|
|
id: Date.now() + 1, |
|
|
title: "Community Trend Finder V2", |
|
|
category: "trend", |
|
|
script: "// Community contributed script\n//@version=6\nindicator(\"Community Trend Finder V2\", overlay=true)\n// ...", |
|
|
explanation: "Indikator tren yang dikembangkan oleh komunitas untuk mendeteksi perubahan tren lebih awal.", |
|
|
usage: "Gunakan sebagai konfirmasi tren utama. Bekerja paling baik pada time frame 1H ke atas.", |
|
|
tags: ["community", "trend", "advance"], |
|
|
source: "cloud", |
|
|
createdAt: new Date().toISOString(), |
|
|
lastModified: new Date().toISOString() |
|
|
}, |
|
|
{ |
|
|
id: Date.now() + 2, |
|
|
title: "Volume Flow Detector", |
|
|
category: "volume", |
|
|
script: "// Community contributed script\n//@version=6\nindicator(\"Volume Flow Detector\", overlay=false)\n// ...", |
|
|
explanation: "Mendeteksi aliran volume besar yang bisa menunjukkan akumulasi atau distribusi institusi.", |
|
|
usage: "Gunakan sebagai filter untuk entry. Volume besar dengan harga naik menunjukkan pembelian agresif.", |
|
|
tags: ["community", "volume", "breakout"], |
|
|
source: "cloud", |
|
|
createdAt: new Date().toISOString(), |
|
|
lastModified: new Date().toISOString() |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
pinScriptDB.unshift(...communityIndicators); |
|
|
|
|
|
addSyncDetail('✅ Pembaruan berhasil diinstal'); |
|
|
} |
|
|
|
|
|
|
|
|
syncMessage.textContent = 'Sinkronisasi selesai!'; |
|
|
syncProgress.style.width = '100%'; |
|
|
addSyncDetail('🔄 Sinkronisasi lokal dan cloud berhasil'); |
|
|
|
|
|
|
|
|
saveDataToStorage(); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
syncModal.classList.add('hidden'); |
|
|
syncIcon.classList.remove('syncing'); |
|
|
|
|
|
renderIndicators(filterIndicators()); |
|
|
renderMyIndicators(); |
|
|
renderFavorites(); |
|
|
updateStats(); |
|
|
|
|
|
syncStatusDetails.textContent = 'Terakhir disinkron: ' + new Date().toLocaleTimeString('id-ID'); |
|
|
connectionStatus.className = 'w-2 h-2 bg-green-500 rounded-full'; |
|
|
showToast('Sinkronisasi berhasil!'); |
|
|
|
|
|
syncInProgress = false; |
|
|
}, 1000); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Sync failed:', error); |
|
|
syncTitle.textContent = 'Gagal Menyinkronkan'; |
|
|
syncMessage.textContent = 'Terjadi kesalahan saat menyinkronkan data'; |
|
|
syncProgress.style.width = '100%'; |
|
|
addSyncDetail(`❌ ${error.message}`); |
|
|
syncIcon.classList.remove('syncing'); |
|
|
|
|
|
connectionStatus.className = 'w-2 h-2 bg-red-500 rounded-full'; |
|
|
syncStatusDetails.textContent = 'Kesalahan koneksi'; |
|
|
|
|
|
setTimeout(() => { |
|
|
syncModal.classList.add('hidden'); |
|
|
syncInProgress = false; |
|
|
}, 2000); |
|
|
|
|
|
showToast('Gagal menyinkronkan data', true); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function addSyncDetail(text) { |
|
|
const p = document.createElement('p'); |
|
|
p.className = 'text-xs text-gray-400 mt-1'; |
|
|
p.textContent = text; |
|
|
syncDetails.appendChild(p); |
|
|
|
|
|
|
|
|
syncDetails.scrollTop = syncDetails.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
function showToast(message, isError = false) { |
|
|
toastMessageEl.textContent = message; |
|
|
toastIconEl.className = isError ? 'fas fa-exclamation-circle mr-2' : 'fas fa-check-circle mr-2'; |
|
|
toastEl.className = `fixed bottom-6 right-6 bg-${isError ? 'red' : 'green'}-600 text-white px-6 py-3 rounded-xl shadow-lg transform opacity-100 translate-y-0 transition-all duration-300`; |
|
|
|
|
|
setTimeout(() => { |
|
|
toastEl.className = 'fixed bottom-6 right-6 bg-green-600 text-white px-6 py-3 rounded-xl shadow-lg hidden transition-all duration-300 transform opacity-0 translate-y-4'; |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
|
|
|
function sleep(ms) { |
|
|
return new Promise(resolve => setTimeout(resolve, ms)); |
|
|
} |
|
|
|
|
|
|
|
|
function resetFilters() { |
|
|
searchInputEl.value = ''; |
|
|
categoryFilterEl.value = ''; |
|
|
renderIndicators(filterIndicators()); |
|
|
} |
|
|
|
|
|
|
|
|
searchInputEl.addEventListener('input', () => { |
|
|
renderIndicators(filterIndicators()); |
|
|
}); |
|
|
|
|
|
categoryFilterEl.addEventListener('change', () => { |
|
|
renderIndicators(filterIndicators()); |
|
|
}); |
|
|
|
|
|
syncBtn.addEventListener('click', performSync); |
|
|
addIndicatorBtn.addEventListener('click', openAddModal); |
|
|
|
|
|
|
|
|
const addForm = document.getElementById('addIndicatorForm'); |
|
|
addForm.addEventListener('submit', handleAddIndicator); |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', (e) => { |
|
|
|
|
|
if (e.key === 'Escape') { |
|
|
closeAddModal(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
window.toggleFavorite = toggleFavorite; |
|
|
window.copyScript = copyScript; |
|
|
window.openAddModal = openAddModal; |
|
|
window.closeAddModal = closeAddModal; |
|
|
window.editIndicator = editIndicator; |
|
|
window.resetFilters = resetFilters; |
|
|
|
|
|
|
|
|
window.addEventListener('load', init); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=alterzick/library" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
