Rename services to remove "app"

This commit is contained in:
Ben Firshman
2016-06-18 09:14:28 -07:00
parent dd03d8937a
commit 09279e12a8
20 changed files with 32 additions and 32 deletions

50
result/views/app.js Normal file
View File

@ -0,0 +1,50 @@
var app = angular.module('catsvsdogs', []);
var socket = io.connect({transports:['polling']});
var bg1 = document.getElementById('background-stats-1');
var bg2 = document.getElementById('background-stats-2');
app.controller('statsCtrl', function($scope){
$scope.aPercent = 50;
$scope.bPercent = 50;
var updateScores = function(){
socket.on('scores', function (json) {
data = JSON.parse(json);
var a = parseInt(data.a || 0);
var b = parseInt(data.b || 0);
var percentages = getPercentages(a, b);
bg1.style.width = percentages.a + "%";
bg2.style.width = percentages.b + "%";
$scope.$apply(function () {
$scope.aPercent = percentages.a;
$scope.bPercent = percentages.b;
$scope.total = a + b;
});
});
};
var init = function(){
document.body.style.opacity=1;
updateScores();
};
socket.on('message',function(data){
init();
});
});
function getPercentages(a, b) {
var result = {};
if (a + b > 0) {
result.a = Math.round(a / (a + b) * 100);
result.b = 100 - result.a;
} else {
result.a = result.b = 50;
}
return result;
}

43
result/views/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html ng-app="catsvsdogs">
<head>
<meta charset="utf-8">
<title>Cats vs Dogs -- Result</title>
<base href="/index.html">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<meta name="keywords" content="docker-compose, docker, stack">
<meta name="author" content="Docker">
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body ng-controller="statsCtrl" >
<div id="background-stats">
<div id="background-stats-1">
</div><!--
--><div id="background-stats-2">
</div>
</div>
<div id="content-container">
<div id="content-container-center">
<div id="choice">
<div class="choice cats">
<div class="label">Cats</div>
<div class="stat">{{aPercent | number:1}}%</div>
</div>
<div class="divider"></div>
<div class="choice dogs">
<div class="label">Dogs</div>
<div class="stat">{{bPercent | number:1}}%</div>
</div>
</div>
</div>
</div>
<div id="result">
<span ng-if="total == 0">No votes yet</span>
<span ng-if="total == 1">{{total}} vote</span>
<span ng-if="total >= 2">{{total}} votes</span>
</div>
<script src="socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>

6988
result/views/socket.io.js Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,112 @@
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,600);
*{
box-sizing:border-box;
}
html,body{
margin:0;
padding:0;
height:100%;
font-family: 'Open Sans';
}
body{
opacity:0;
transition: all 1s linear;
}
.divider{
height: 150px;
width:2px;
background-color: #C0C9CE;
position: relative;
top: 50%;
float: left;
transform: translateY(-50%);
}
#background-stats-1{
background-color: #2196f3;
}
#background-stats-2{
background-color: #00cbca;
}
#content-container{
z-index:2;
position:relative;
margin:0 auto;
display:table;
padding:10px;
max-width:940px;
height:100%;
}
#content-container-center{
display:table-cell;
text-align:center;
vertical-align:middle;
}
#result{
z-index: 3;
position: absolute;
bottom: 40px;
right: 20px;
color: #fff;
opacity: 0.5;
font-size: 45px;
font-weight: 600;
}
#choice{
transition: all 300ms linear;
line-height:1.3em;
background:#fff;
box-shadow: 10px 0 0 #fff, -10px 0 0 #fff;
vertical-align:middle;
font-size:40px;
font-weight: 600;
width: 450px;
height: 200px;
}
#choice a{
text-decoration:none;
}
#choice a:hover, #choice a:focus{
outline:0;
text-decoration:underline;
}
#choice .choice{
width: 49%;
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: left;
padding-left: 50px;
}
#choice .choice .label{
text-transform: uppercase;
}
#choice .choice.dogs{
color: #00cbca;
float: right;
}
#choice .choice.cats{
color: #2196f3;
float: left;
}
#background-stats{
z-index:1;
height:100%;
width:100%;
position:absolute;
}
#background-stats div{
transition: width 400ms ease-in-out;
display:inline-block;
margin-bottom:-4px;
width:50%;
height:100%;
}