303 lines
12 KiB
Plaintext
303 lines
12 KiB
Plaintext
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SharePrices.aspx.vb" Inherits="SharePrices.SharePrices" %>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head runat="server">
|
|
<title>Steve's share prices</title>
|
|
<link rel="shortcut icon" href="icons/favicon.ico" type="image/x-icon"/>
|
|
<link rel="stylesheet" href="SharePricesStyles.css" type="text/css" />
|
|
<link rel="stylesheet" href="SharePricesModal.css" type="text/css" />
|
|
<link rel="stylesheet" href="jquery-ui.css" type="text/css" />
|
|
<script src="scripts/jquery/jquery-3.5.1.min.js" type="text/javascript"></script>
|
|
<script src="scripts/jquery/jquery-ui.min.js" type="text/javascript"></script>
|
|
<script src="scripts/flot/jquery.flot.js" type="text/javascript"></script>
|
|
<script src="scripts/flot/jquery.flot.axislabels.js" type="text/javascript"></script>
|
|
<script src="scripts/flot/jquery.flot.downsample.js" type="text/javascript"></script>
|
|
<script src="scripts/flot/jquery.flot.crosshair.js" type="text/javascript"></script>
|
|
<script src="scripts/flot/jquery.flot.selection.min.js" type="text/javascript"></script>
|
|
<script src="scripts/flot/jquery.flot.time.min.js" type="text/javascript"></script>
|
|
<script src="scripts/flot/jquery.flot.tooltip.js" type="text/javascript"></script>
|
|
<script src="scripts/flot/jquery.flot.pie.js" type="text/javascript"></script>
|
|
<script src="scripts/js.cookie-2.2.1.min.js" type="text/javascript"></script>
|
|
<script src="scripts/tablesorter/jquery.tablesorter.js" type="text/javascript"></script>
|
|
<script src="scripts/tablesorter/jquery.tablesorter.widgets.js" type="text/javascript"></script>
|
|
<script src="scripts/jquery/jquery.marquee.min.js" type="text/javascript"></script>
|
|
<script src="scripts/SharePrices.js" type="module"></script>
|
|
<script src="scripts/FlotGaps.js" type="text/javascript"></script>
|
|
|
|
<!--<script src="scripts/highcharts_9.3.1/highcharts.js" type="text/javascript"></script>!--
|
|
<!--<script src="scripts/highcharts_9.3.1/modules/broken-axis.js" type="text/javascript"></script>!-->
|
|
<script src="https://code.highcharts.com/highcharts.js"></script>
|
|
<script src="https://code.highcharts.com/stock/modules/stock.js"></script>
|
|
<script src="https://code.highcharts.com/modules/broken-axis.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
<div class="navbar">
|
|
<table>
|
|
<tr>
|
|
<td class="navbarlink" style="width: 35%;">
|
|
<a id="navCharts" class="activenav" onclick="showTab(this)" data-div="chartDiv">Charts</a>
|
|
<a id="navCurrentHoldings" onclick="showTab(this);" data-div="holdingsDiv">Holdings</a>
|
|
<a id="navAccounts" onclick="showTab(this);" data-div="accountsDiv">Accounts</a>
|
|
<a id="navLedger" onclick="showTab(this); importedFunctions.updateLedgerTable();" data-div="ledgerDiv">Ledger</a>
|
|
<!--<a id="navAnal" onclick="showTab(this);" data-div="analDiv">Analysis</a>!-->
|
|
<a id="navHist" onclick="showTab(this); importedFunctions.refreshHistoryChart();" data-div="histDiv">History</a>
|
|
<a id="navLog" onclick="showTab(this);" data-div="logDiv">Log</a>
|
|
</td>
|
|
<td style="width: 30%; text-align: center;">
|
|
<span id="spnTotalHoldings"></span>
|
|
</td>
|
|
<td style="width: 35%; text-align: right;">
|
|
<span id="spnCurrencies"></span>
|
|
</td>
|
|
</tr>
|
|
<!--
|
|
<tr>
|
|
<td colspan="2" class="marquee" style="width: 100%;"> < !--id="tdIndexTicker" style="width: 600px;"!-- >
|
|
<div class="marquee" id="divIndexMarquee" style="width: 100%;"></div>
|
|
</td>
|
|
</tr>
|
|
!-->
|
|
</table>
|
|
<div class="marquee" id="divIndexMarquee" style="width: 100%;"></div>
|
|
</div>
|
|
<div class="tabParent">
|
|
<div class="tabContainer" id="chartDiv">
|
|
<div>
|
|
<label for="displayAsPercent">Display as percent</label><input type="checkbox" name="displayAsPercent" id="displayAsPercent" onclick="handleClick(this)"/>
|
|
<label for="excludeNoHoldings">Hide shares with no holdings</label><input type="checkbox" name="excludeNoHoldings" id="excludeNoHoldings" onclick="handleClick(this)"/>
|
|
<button onclick="importedFunctions.showModalDialog_AddInstrument()">Add Instrument</button>
|
|
</div>
|
|
<div id="chartsDiv">Charts</div>
|
|
</div>
|
|
</div>
|
|
<div class="tabParent">
|
|
<div class="tabContainer" id="holdingsDiv">
|
|
<!-- Old holdings table
|
|
<div>
|
|
<label for="groupBySymbol">Group By Symbol</label>
|
|
<input type="checkbox" name="groupBySymbol" id="groupBySymbol" onclick="handleClick(this)"/>
|
|
</div>
|
|
<div id="holdingsTableDiv">Holdings table</div>
|
|
<br />
|
|
!-->
|
|
<div id="aggHoldingsTableDiv">Aggregated Holdings table</div>
|
|
<br />
|
|
<div>
|
|
<label for="showSubtotals">Show Tax Bracket Subtotals</label>
|
|
<input type="checkbox" name="showSubtotals" id="showSubtotals" onclick="handleClick(this)"/>
|
|
<label for="showCryptoHoldings">Show Cryptocurrency Holdings</label>
|
|
<input type="checkbox" name="showCryptoHoldings" id="showCryptoHoldings" onclick="handleClick(this)"/>
|
|
</div>
|
|
<div id="newHoldingsTableDiv">New Holdings table</div>
|
|
<br />
|
|
<div id="watchlistTableDiv">Watchlist table</div>
|
|
<!-- Old pie charts
|
|
<br />
|
|
<table>
|
|
<tr>
|
|
<td>Book Cost currencies<div id="divHoldingCurrenciesChart" class="HoldingCurrenciesChart"></div></td>
|
|
<td style="width:50px"></td>
|
|
<td>Current Value currencies<div id="divHoldingCurrenciesChartCurrentValue" class="HoldingCurrenciesChart"></div></td>
|
|
<td style="width:50px"></td>
|
|
<td>Book Cost per Account<div id="divAccountBookCost" class="HoldingCurrenciesChart"></div></td>
|
|
<td style="width:50px"></td>
|
|
<td>Current Value per Account<div id="divAccountValue" class="HoldingCurrenciesChart"></div></td>
|
|
</tr>
|
|
</table>
|
|
!-->
|
|
</div>
|
|
</div>
|
|
<div class="tabParent">
|
|
<div class="tabContainer" id="accountsDiv">
|
|
<div>
|
|
<label for="hideEmptyAccounts">Hide Empty Accounts</label><input type="checkbox" name="hideEmptyAccounts" id="hideEmptyAccounts" onclick="handleClick(this)"/>
|
|
</div>
|
|
<div id="accountsSummaryDiv"></div>
|
|
</div>
|
|
</div>
|
|
<div class="tabParent">
|
|
<div class="tabContainer" id="ledgerDiv">Analysis</div>
|
|
</div>
|
|
<!--
|
|
<div class="tabParent">
|
|
<div class="tabContainer" id="analDiv">Analysis</div>
|
|
</div>
|
|
!-->
|
|
<div class="tabParent">
|
|
<div class="tabContainer" id="histDiv" style="height: 85%;">History Chart</div>
|
|
<!--<span onclick="refreshHistoryChart();">Refresh Chart</span>!-->
|
|
</div>
|
|
<div class="tabParent">
|
|
<div class="tabContainer" id="logDiv">Log</div>
|
|
</div>
|
|
<div id="modalDialog" class="modal">
|
|
<div class="modal-content">
|
|
<div>
|
|
<!--<span class="modal-title">Title<span class="close">×</span></span> !-->
|
|
<table class="modal-title"><tr><td id="modalTitle">Title</td><td class="close">×</td></tr></table>
|
|
</div>
|
|
<br />
|
|
<div id="modalContentDiv"></div>
|
|
</div>
|
|
</div>
|
|
<div id="modalChart" class="modal-chart">
|
|
<div style="height: 70px;"> </div>
|
|
<div class="modal-chart-content">
|
|
<table style="height: 100%; width:100%; border-collapse: collapse;">
|
|
<tr>
|
|
<td>
|
|
<table class="modal-title"><tr><td id="modalChartTitle">Title</td><td><span id="spnCompareInstruments">Compare</span></td><td class="close">×</td></tr></table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="divFullScreenChart" class="FullScreenChart"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="chartTooltip" class="chart-tooltip"></div>
|
|
<script>
|
|
let importedFunctions = {};
|
|
|
|
function logInfo(msg) {
|
|
console.info(msg);
|
|
if (typeof msg == 'object') {
|
|
$("#logDiv").css("font-color", "white").text(JSON.stringify(msg));
|
|
} else {
|
|
$("#logDiv").css("font-color", "white").text(msg);
|
|
}
|
|
}
|
|
function logWarning(msg) {
|
|
console.warn(msg);
|
|
if (typeof msg == 'object') {
|
|
$("#logDiv").css("font-color", "orange").text(JSON.stringify(msg));
|
|
} else {
|
|
$("#logDiv").css("font-color", "orange").text(msg);
|
|
}
|
|
}
|
|
function logError(msg) {
|
|
console.error(msg);
|
|
if (typeof msg == 'object') {
|
|
$("#logDiv").css("font-color", "red").text(JSON.stringify(msg));
|
|
} else {
|
|
$("#logDiv").css("font-color", "red").text(msg);
|
|
}
|
|
}
|
|
function showTab(tab) {
|
|
//$('.navbar>a').removeClass('activenav');
|
|
$('.navbar').find('.activenav').removeClass('activenav');
|
|
$('#' + tab.id).addClass('activenav');
|
|
|
|
//$('#mainDiv>div').removeClass('activetab').addClass('inactivetab');
|
|
$('.tabParent.activeTab').removeClass('activeTab');
|
|
//$('#' + $(tab).attr('data-div')).removeClass('inactivetab').addClass('activetab');
|
|
$('#' + $(tab).attr('data-div')).parent().addClass('activeTab');
|
|
|
|
Cookies.set('activeTab', tab.id, { 'sameSite': 'strict' });
|
|
}
|
|
function handleClick(checkbox) {
|
|
Cookies.set(checkbox.id, checkbox.checked, { 'sameSite': 'strict' });
|
|
|
|
switch (checkbox.id) {
|
|
/*case 'showBreakevenLine':
|
|
redrawAllSharesCharts();
|
|
break;*/
|
|
case 'displayAsPercent':
|
|
importedFunctions.redrawAllSharesCharts();
|
|
break;
|
|
case 'excludeNoHoldings':
|
|
importedFunctions.createSharesTable();
|
|
importedFunctions.redrawAllSharesCharts();
|
|
break;
|
|
/*case 'showPreviousHoldings':
|
|
redrawAllSharesCharts();
|
|
break;*/
|
|
case 'groupBySymbol':
|
|
$("#tbMainHoldings").html(''); //Empty the table body to make sure no duplicate rows are created
|
|
//updateHoldingsTable();
|
|
tablesUpdateTimings.updateNeeded = true;
|
|
tablesUpdateTimings.lastUpdate = 0;
|
|
break;
|
|
case 'hideEmptyAccounts':
|
|
break;
|
|
case 'showSubtotals':
|
|
break;
|
|
case 'showCryptoHoldings':
|
|
break;
|
|
}
|
|
}
|
|
</script>
|
|
<script type="module">
|
|
import {
|
|
addInstrument,
|
|
createSharesTable,
|
|
getInstruments,
|
|
redrawAllSharesCharts,
|
|
refreshHistoryChart,
|
|
searchForYahooInstrument,
|
|
selectSearchResult,
|
|
showModalDialog_AddInstrument,
|
|
showModalDialog_AddHolding,
|
|
showModalDialog_FullScreenChart,
|
|
showModalDialog_SoldHolding
|
|
} from "./scripts/SharePrices.js";
|
|
|
|
import { updateLedgerTable } from "./scripts/SharePrices_Ledger.js";
|
|
|
|
importedFunctions = {
|
|
addInstrument: addInstrument,
|
|
createSharesTable: createSharesTable,
|
|
getInstruments: getInstruments,
|
|
redrawAllSharesCharts: redrawAllSharesCharts,
|
|
refreshHistoryChart: refreshHistoryChart,
|
|
searchForYahooInstrument: searchForYahooInstrument,
|
|
selectSearchResult: selectSearchResult,
|
|
showModalDialog_AddInstrument: showModalDialog_AddInstrument,
|
|
showModalDialog_AddHolding: showModalDialog_AddHolding,
|
|
showModalDialog_FullScreenChart: showModalDialog_FullScreenChart,
|
|
showModalDialog_SoldHolding: showModalDialog_SoldHolding,
|
|
updateLedgerTable: updateLedgerTable
|
|
}
|
|
|
|
function initPage() {
|
|
let c = Cookies.get('activeTab');
|
|
let t = $('#' + c);
|
|
if (t && t.length > 0) {
|
|
showTab(t[0]);
|
|
} else {
|
|
showTab($('#navCharts')[0]);
|
|
}
|
|
|
|
/*c = Cookies.get('showBreakevenLine');
|
|
$("#showBreakevenLine").prop('checked', (c == 'true') ? true : false);*/
|
|
c = Cookies.get('displayAsPercent');
|
|
$("#displayAsPercent").prop('checked', (c == 'true') ? true : false);
|
|
|
|
c = Cookies.get('excludeNoHoldings');
|
|
$("#excludeNoHoldings").prop('checked', (c == 'true') ? true : false);
|
|
|
|
/*c = Cookies.get('showPreviousHoldings');
|
|
$("#showPreviousHoldings").prop('checked', (c == 'true') ? true : false);*/
|
|
c = Cookies.get('groupBySymbol');
|
|
$("#groupBySymbol").prop('checked', (c == 'true') ? true : false);
|
|
|
|
c = Cookies.get('hideEmptyAccounts');
|
|
$("#hideEmptyAccounts").prop('checked', (c == 'true') ? true : false)
|
|
|
|
c = Cookies.get('showSubtotals');
|
|
$("#showSubtotals").prop('checked', (c == 'true') ? true : false);
|
|
|
|
c = Cookies.get('showCryptoHoldings');
|
|
$("#showCryptoHoldings").prop('checked', (c == 'true') ? true : false);
|
|
|
|
getInstruments();
|
|
}
|
|
$(document).ready(initPage());
|
|
</script>
|
|
</body>
|
|
</html>
|