d0zingcat/gocryptotrader
1
0
Fork 0
mirror of https://github.com/d0zingcat/gocryptotrader.git synced 2026-05-13 23:16:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adds a loading circle to the main page

Browse Source
This commit is contained in:
Scott
2017-02-07 21:57:17 +11:00
parent 76107660a9
commit 377762487c
4 changed files with 108 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web/app/app.css
View File

@@ -1,30 +1,45 @@
/* app css stylesheet */
.menu {
list-style: none;
border-bottom: 0.1em solid black;
margin-bottom: 2em;
padding: 0 0 0.5em;
list-style: none;
border-bottom: 0.1em solid black;
margin-bottom: 2em;
padding: 0 0 0.5em;
}
.menu:before {
content: "[";
content: "[";
}
.menu:after {
content: "]";
content: "]";
}
.menu > li {
display: inline;
.menu>li {
display: inline;
}
.menu > li:before {
content: "|";
padding-right: 0.3em;
.menu>li:before {
content: "|";
padding-right: 0.3em;
}
.menu > li:nth-child(1):before {
content: "";
padding: 0;
.menu>li:nth-child(1):before {
content: "";
padding: 0;
}
.animate-show-hide.ng-hide {
opacity: 0;
}
.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
transition: all linear 0.5s;
}
.check-element {
border: 1px solid black;
opacity: 1;
padding: 10px;
}

3
web/app/components/enabled-exchanges/enabled-exchanges.js
View File

@@ -24,6 +24,9 @@ angular.module('myApp.enabledExchanges', []).component('enabledexchanges', {
$rootScope.$emit('CurrencyChanged', $scope.selected);
};
$scope.getDashboardData();
}
});

94
web/app/views/home/home.html
View File

@@ -1,40 +1,72 @@
<h1>Dashboard</h1>
<div class="col-md-12">
<div class="col-md-8">
<div class="col-md-12">
<!-- This is to get a sense of scale, I don't intend on any hardcoded heights!' -->
<div class="col-md-6" style=" height: 300px;">
<h3>Sell orders</h3>
</div>
<div class="col-md-6" style=" height: 300px;">
<h3>Buy orders</h3>
</div>
<div ng-show="loaded">
<div class="col-md-11">
<h2>{{exchange.exchangeName}} Exchange</h2>
<h4>{{currency.CryptoCurrency}}</h4>
</div>
<div class="col-md-12" style=" height: 300px;">
<h3>Market depth chart</h3>
<div class="col-md-8">
<div class="col-md-12">
<!-- This is to get a sense of scale, I don't intend on any hardcoded heights!' -->
<div class="col-md-6" style=" height: 300px;">
<h3>Sell orders</h3>
</div>
<div class="col-md-6" style=" height: 300px;">
<h3>Buy orders</h3>
</div>
</div>
<div class="col-md-12" style=" height: 300px;">
<h3>Market depth chart</h3>
</div>
<div class="col-md-4">
<h4>Buy</h4>
<buy></buy>
</div>
<div class="col-md-4" style=" height: 300px;">
<h4>Sell</h4>
<sell></sell>
</div>
<div class="col-md-4" style=" height: 300px;">
<h4>Wallet quick look</h4>
See current holding of selected currency
</div>
<div class="col-md-12">
<div class="col-md-6" style=" height: 400px;">
<h3>Trade History</h3>
</div>
<div class="col-md-6" style=" height: 400px;">
<h3>My Open Orders</h3>
</div>
</div>
</div>
<div class="col-md-4">
<h4>Buy</h4>
<buy></buy>
</div>
<div class="col-md-4" style=" height: 300px;">
<h4>Sell</h4>
<sell></sell>
</div>
<div class="col-md-4" style=" height: 300px;">
<h4>Wallet quick look</h4>
See current holding of selected currency
</div>
<div class="col-md-12">
<div class="col-md-6" style=" height: 400px;">
<h3>Trade History</h3>
</div>
<div class="col-md-6" style=" height: 400px;">
<h3>My Open Orders</h3>
<div class="col-md-11">
<enabledexchanges></enabledexchanges>
</div>
</div>
</div>
<div class="col-md-4">
<enabledexchanges></enabledexchanges>
<div ng-show="!loaded && !loadFailed" class="col-md-12 text-center">
<br />
<br />
<br />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="120" height="120" fill="#40bfc0">
<path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/>
<path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z">
<animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" />
</path>
</svg>
<br />
<br />
<br />
</div>
<div ng-show="loadFailed">
<br />
<br />
<h1 class="text-center">D:</h1>
<br />
<h4 class="text-center">Something went wrong! Make sure Gocryptotrader is running. If things still aren't cool, open a ticket <a href="https://github.com/thrasher-/gocryptotrader/issues" target="blank">here</a></h4>
<br />
<br />
<br />
</div>
</div>

14
web/app/views/home/home.js
View File

@@ -9,7 +9,19 @@ angular.module('myApp.home', ['ngRoute'])
});
}])
.controller('HomeController', function() {
.controller('HomeController', function($scope, $rootScope, $timeout) {
$scope.loaded = false;
$rootScope.$on('CurrencyChanged', function(event, args) {
$scope.currency = args.Currency;
$scope.exchange = args.Exchange;
});
$timeout(function() {
if ($scope.currency) {
$scope.loaded = true;
} else {
$scope.loadFailed = true;
}
}, 10000);
});