LiveViewer/test.html at master · The-Scrum-Masters/LiveViewer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cruddly - The worlds worst address book</title>
</head>
<style>
div {
  margin: 20px;
  width: 200px;
  height: 200px;
  position: relative;
}
.center_it {
  margin-left: auto;
  margin-right: auto;
}
</style>
<body>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
  <br>

  <nav class="navbar navbar-inverse center_it" style="width: 95%;">
    <ul class="nav navbar-nav center_it">
        <li><h2 style="color: white; padding: 0 10 0 0;">Live Trolleys</h2>/li>
    </ul>
  </nav>


<table class="center_it" style="width:50%">
 <tr>
   <th><div id="bay1">10</div></th>
   <th><div id="bay2">25</div></th>
   <th><div id="bay3">40</div></th>
 </tr>
 <tr>
   <th><div id="n_bay1"></div></th>
   <th><div id="n_bay2"></div></th>
   <th><div id="n_bay3"></div></th>
 </tr>
</table>


</body>
<script>
  function set_wheel( max, div_name) {
  get_val = document.getElementById(div_name).innerHTML;
  document.getElementById(div_name).innerHTML = '';
  if (get_val > max) {
    get_val = "EXCEED"
  }
  document.getElementById("n_"+div_name).innerHTML = div_name;
  var bar = new ProgressBar.Circle(document.getElementById(div_name), {
    color: '#aaa',
    // This has to be the same size as the maximum width to
    // prevent clipping
    strokeWidth: 4,
    trailWidth: 1,
    easing: 'easeInOut',
    duration: 1400,
    text: {
      autoStyleContainer: false
  },
    from: { color: '#FF0000', width: 2 },

    to: { color: '#00FF00', width: 3 },
    // Set default step function for all animate calls
    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      circle.path.setAttribute('stroke-width', state.width);
      circle.setText(get_val + ' trolleys');

    }
  });
  bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
  bar.text.style.fontSize = '2rem';
  bar.text.style.position = 'relative';
  bar.animate(get_val/max);

  }
  set_wheel(50, "bay1");
  set_wheel(50, "bay2");
  set_wheel(50, "bay3");
</script>
</html>