Updates timers for dashboard bottom
This commit is contained in:
djbadders
parent
9364fc70c8
commit
023acc0e57
|
|
@ -209,5 +209,6 @@
|
|||
|
||||
<script src="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/js/jquery.core.js?v=@Html.Raw(Model.CurrentBotVersion)"></script>
|
||||
<script src="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/js/jquery.app.js?v=@Html.Raw(Model.CurrentBotVersion)"></script>
|
||||
<script src="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/js/circlos.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -12,9 +12,11 @@
|
|||
<div class="row">
|
||||
<div class="col-md-5 px-1">
|
||||
<div class="card-box px-2" style="height:305px;">
|
||||
<div class="cdev" data-percent="100" data-duration="@Html.Raw(@Model.PTMagicConfiguration.GeneralSettings.Monitor.RefreshSeconds * 1000)" data-color="#aaa,#414d59"></div>
|
||||
|
||||
@if (!Model.TrendChartDataJSON.Equals("")) {
|
||||
<div class="trend-chart">
|
||||
<svg style="height:300px;width:100%"></svg>
|
||||
<svg style="height: 300px;width: 100%;"></svg>
|
||||
</div>
|
||||
} else {
|
||||
<p>Unable to load graph, no market trend data found.</p>
|
||||
|
|
@ -23,6 +25,7 @@
|
|||
</div>
|
||||
<div class="col-md-2 px-1">
|
||||
<div class="card-box px-2" style="height:305px;">
|
||||
<div class="cdev" data-percent="100" data-duration="@Html.Raw(@Model.PTMagicConfiguration.GeneralSettings.Monitor.RefreshSeconds * 1000)" data-color="#aaa,#414d59"></div>
|
||||
@{
|
||||
double currentBalance = Model.PTData.GetCurrentBalance();
|
||||
string currentBalanceString = currentBalance.ToString("#,#0.00000000", new System.Globalization.CultureInfo("en-US"));
|
||||
|
|
@ -45,6 +48,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-md-5 px-1">
|
||||
<div class="cdev" data-percent="100" data-duration="@Html.Raw(@Model.PTMagicConfiguration.GeneralSettings.Monitor.RefreshSeconds * 1000)" data-color="#aaa,#414d59"></div>
|
||||
|
||||
<div class="card-box px-2" style="height:305px;">
|
||||
@if (!Model.ProfitChartDataJSON.Equals("")) {
|
||||
<div class="profit-chart">
|
||||
|
|
@ -60,7 +65,10 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col-md-6 px-1">
|
||||
<div class="cdev" data-percent="100" data-duration="@Html.Raw(@Model.PTMagicConfiguration.GeneralSettings.Monitor.RefreshSeconds * 1000)" data-color="#aaa,#414d59"></div>
|
||||
|
||||
<div class="card-box px-2">
|
||||
<br/>
|
||||
<h4 class="m-t-0 m-b-20 header-title"><b>Market Trends at @Model.PTMagicConfiguration.GeneralSettings.Application.Exchange</b><small class="pull-right"><a href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)MarketAnalyzer">more</a></small></h4>
|
||||
|
||||
<table class="table table-sm">
|
||||
|
|
@ -100,7 +108,10 @@
|
|||
</div>
|
||||
|
||||
<div class="col-md-6 px-1">
|
||||
<div class="cdev" data-percent="100" data-duration="@Html.Raw(@Model.PTMagicConfiguration.GeneralSettings.Monitor.RefreshSeconds * 1000)" data-color="#aaa,#414d59"></div>
|
||||
|
||||
<div class="card-box px-2">
|
||||
<br/>
|
||||
<h4 class="m-t-0 m-b-20 header-title"><b>Sales Overview</b><small class="pull-right"><a href="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)SalesAnalyzer">more</a></small></h4>
|
||||
@{
|
||||
double totalProfit = Model.PTData.SellLog.Sum(s => s.Profit);
|
||||
|
|
@ -189,6 +200,7 @@
|
|||
<script src="@Html.Raw(Model.PTMagicConfiguration.GeneralSettings.Monitor.RootUrl)assets/plugins/tablesaw/js/tablesaw-init.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$(".cdev").circlos();
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
$('.text-autocolor').autocolor(false);
|
||||
|
||||
|
|
|
|||
|
|
@ -173,6 +173,10 @@ a:active {
|
|||
stroke-opacity: 1 !important;
|
||||
}
|
||||
|
||||
.trend-chart
|
||||
{
|
||||
clear: none;
|
||||
}
|
||||
|
||||
/* Custom menu styles */
|
||||
#topnav .navigation-menu {
|
||||
|
|
@ -211,4 +215,69 @@ a:active {
|
|||
|
||||
#topnav .has-submenu.active>a {
|
||||
color: #50cefc;
|
||||
}
|
||||
}
|
||||
|
||||
/* Circolus */
|
||||
.cdev {
|
||||
position: absolute;
|
||||
height : 30px;
|
||||
width : 30px;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
margin : 0 0 0 10px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.cdev div {
|
||||
position : absolute;
|
||||
height : 30px;
|
||||
width : 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cdev div span {
|
||||
position : absolute;
|
||||
font-family : Arial;
|
||||
font-size : 5px;
|
||||
line-height : 7px;
|
||||
height : 20px;
|
||||
width : 20px;
|
||||
left : 5px;
|
||||
top : 5px;
|
||||
text-align : center;
|
||||
border-radius : 50%;
|
||||
background-color: #36404a;
|
||||
color: #36404a;
|
||||
}
|
||||
|
||||
.cdev .background {
|
||||
background-color: #b3cef6;
|
||||
}
|
||||
|
||||
.cdev .rotate {
|
||||
clip : rect(0 15px 30px 0);
|
||||
background-color: #4b86db;
|
||||
}
|
||||
|
||||
.cdev .left {
|
||||
clip : rect(0 15px 30px 0);
|
||||
opacity : 1;
|
||||
background-color: #b3cef6;
|
||||
}
|
||||
|
||||
.cdev .right {
|
||||
clip : rect(0 15px 30px 0);
|
||||
transform : rotate(180deg);
|
||||
opacity : 0;
|
||||
background-color: #4b86db;
|
||||
}
|
||||
|
||||
@keyframes toggle {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,62 @@
|
|||
/*
|
||||
jQuery-Circle-Plugin v0.1 by Jamal hassouni
|
||||
https://github.com/jamalhassouni
|
||||
*/
|
||||
(function ($) {
|
||||
|
||||
// circle animation pluqins by jamal hassouni
|
||||
$.fn.circlos = function () {
|
||||
// deafualt options
|
||||
var DEFAULTS = {
|
||||
backgroundColor: '#b3cef6', // default background color
|
||||
progressColor: '#4b86db', // default progress color
|
||||
percent: 75, // default percent value
|
||||
duration: 2000 // default duration value
|
||||
};
|
||||
|
||||
$(this).each(function () {
|
||||
var $target = $(this);
|
||||
// options of circle
|
||||
var options = {
|
||||
// if isset value of background if not use the default value of background color
|
||||
backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
|
||||
// if isset value of progress if not use the default value of progress color
|
||||
progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
|
||||
// if isset value of percent if not use the default value of percent
|
||||
percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
|
||||
// if isset value of duration if not use the default value of duration
|
||||
duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
|
||||
};
|
||||
console.log(options);
|
||||
// add divs for structure
|
||||
$target.append('<div class="background"></div><div class="rotate"></div><div class="left"></div><div class="right"></div><div class=""><span>' + options.percent + '%</span></div>');
|
||||
// change style of the circle with the options values
|
||||
$target.find('.background').css('background-color', options.backgroundColor);
|
||||
$target.find('.left').css('background-color', options.backgroundColor);
|
||||
$target.find('.rotate').css('background-color', options.progressColor);
|
||||
$target.find('.right').css('background-color', options.progressColor);
|
||||
|
||||
var $rotate = $target.find('.rotate');
|
||||
setTimeout(function () {
|
||||
$rotate.css({
|
||||
'transition': 'transform ' + options.duration + 'ms linear',
|
||||
'transform': 'rotate(' + options.percent * 3.6 + 'deg)'
|
||||
});
|
||||
},1);
|
||||
|
||||
if (options.percent > 50) {
|
||||
// add animation for the right class and left class
|
||||
var animationRight = 'toggle ' + (options.duration / options.percent * 50) + 'ms step-end';
|
||||
var animationLeft = 'toggle ' + (options.duration / options.percent * 50) + 'ms step-start';
|
||||
$target.find('.right').css({
|
||||
animation: animationRight,
|
||||
opacity: 1
|
||||
});
|
||||
$target.find('.left').css({
|
||||
animation: animationLeft,
|
||||
opacity: 0
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue