showing transaction with animation in home page
This commit is contained in:
parent
0697e9c18a
commit
21e221b68b
|
@ -12,6 +12,7 @@ script(type='text/javascript', src='/lib/angular-resource/angular-resource.js')
|
|||
script(type='text/javascript', src='/lib/angular-route/angular-route.js')
|
||||
script(type='text/javascript', src='/lib/qrcode-generator/js/qrcode.js')
|
||||
script(type='text/javascript', src='/lib/angular-qrcode/qrcode.js')
|
||||
script(type='text/javascript', src='/lib/angular-animate/angular-animate.js')
|
||||
|
||||
//Angular UI
|
||||
script(type='text/javascript', src='/lib/angular-bootstrap/ui-bootstrap.js')
|
||||
|
|
|
@ -14,5 +14,4 @@ head
|
|||
link(rel='stylesheet', href='/css/common.css')
|
||||
|
||||
script(src='/socket.io/socket.io.js')
|
||||
script(src='/lib/jquery/jquery.js')
|
||||
|
||||
|
|
|
@ -2,11 +2,14 @@
|
|||
|
||||
var Transaction = require('../../models/Transaction');
|
||||
|
||||
// server-side socket behaviour
|
||||
module.exports = function(app, io) {
|
||||
io.set('log level', 1); // reduce logging
|
||||
io.sockets.on('connection', function(socket) {
|
||||
Transaction.findOne(function(err, tx) {
|
||||
socket.emit('tx', tx);
|
||||
setTimeout(function() {
|
||||
socket.emit('tx', tx);
|
||||
}, 5000);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
|
@ -10,6 +10,8 @@
|
|||
"bootstrap": "3.0.3",
|
||||
"angular-bootstrap": "0.9.0",
|
||||
"angular-ui-utils": "0.1.0",
|
||||
"angular-qrcode": "latest"
|
||||
"angular-qrcode": "latest",
|
||||
"angular-animate": "latest"
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -48,3 +48,14 @@ body {
|
|||
font-size: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Animations */
|
||||
.fader.ng-enter {
|
||||
transition: opacity 1s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fader.ng-enter-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('mystery', ['ngCookies', 'ngResource', 'ngRoute', 'ui.bootstrap', 'ui.route', 'mystery.system', 'mystery.index', 'mystery.blocks', 'mystery.transactions', 'monospaced.qrcode', 'mystery.address']);
|
||||
var app = angular.module('mystery', ['ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ui.bootstrap', 'ui.route', 'mystery.system', 'mystery.index', 'mystery.blocks', 'mystery.transactions', 'monospaced.qrcode', 'mystery.address']);
|
||||
|
||||
angular.module('mystery.system', []);
|
||||
angular.module('mystery.index', []);
|
||||
angular.module('mystery.blocks', []);
|
||||
angular.module('mystery.transactions', []);
|
||||
angular.module('mystery.address', []);
|
||||
|
||||
|
|
|
@ -1,16 +1,14 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('mystery.system').controller('IndexController', ['$scope', 'Global', 'Index', function($scope, Global, Index) {
|
||||
angular.module('mystery.system').controller('IndexController', ['$scope', 'Global', 'socket', function($scope, Global, socket) {
|
||||
$scope.global = Global;
|
||||
$scope.index = Index;
|
||||
}]);
|
||||
|
||||
$(document).ready(function() {
|
||||
var socket = io.connect('http://localhost');
|
||||
socket.on('tx', function(data) {
|
||||
var tx = data;
|
||||
console.log('Transaction received! '+tx.txid);
|
||||
console.log('Transaction received! ' + tx.txid);
|
||||
$scope.txs.push(tx.txid);
|
||||
});
|
||||
|
||||
});
|
||||
$scope.txs = [];
|
||||
|
||||
}]);
|
||||
|
||||
|
|
|
@ -1,5 +1,26 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('mystery.index').factory('Index', ['$resource', function($resource) {
|
||||
return $resource;
|
||||
}]);
|
||||
app.factory('socket', function($rootScope) {
|
||||
var socket = io.connect();
|
||||
return {
|
||||
on: function(eventName, callback) {
|
||||
socket.on(eventName, function() {
|
||||
var args = arguments;
|
||||
$rootScope.$apply(function() {
|
||||
callback.apply(socket, args);
|
||||
});
|
||||
});
|
||||
},
|
||||
emit: function(eventName, data, callback) {
|
||||
socket.emit(eventName, data, function() {
|
||||
var args = arguments;
|
||||
$rootScope.$apply(function() {
|
||||
if (callback) {
|
||||
callback.apply(socket, args);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
<section data-ng-controller="IndexController" data-ng-init="last_blocks()">
|
||||
<div class="jumbotron">
|
||||
<h1>Hello, BitPay!</h1>
|
||||
<p>Start here for blocks information</p>
|
||||
<p><a href="/#!/blocks" class="btn btn-primary btn-lg">List all blocks</a></p>
|
||||
<section data-ng-controller="IndexController" data-ng-init="">
|
||||
<div class="">
|
||||
<h3>New transactions</h3>
|
||||
<div class="alert alert-info fader" ng-repeat='tx in txs'>
|
||||
{{tx}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
@ -63,8 +63,9 @@ require('./app/views/sockets/main.js')(app,io);
|
|||
|
||||
//Start the app by listening on <port>
|
||||
var port = process.env.PORT || config.port;
|
||||
server.listen(port);
|
||||
console.log('Express app started on port ' + port);
|
||||
server.listen(port, function(){
|
||||
console.log('Express server listening on port %d in %s mode', server.address().port, process.env.NODE_ENV);
|
||||
});
|
||||
|
||||
//expose app
|
||||
exports = module.exports = app;
|
||||
|
|
Loading…
Reference in New Issue