StreamKit/streaming-thermometer.html at master · DonorDrive/StreamKit · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<html>
	<head>
		<script src="https://cdn.jsdelivr.net/npm/numeral@2.0.6/numeral.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<link rel="stylesheet" href="resources/css/streaming-overlay.css"/>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
		<script src="config.js"></script>
	</head>
	<body>
		<div id="app" class="py-3 bg-grad-grey shadow text-light position-relative overflow-hidden rounded" style="width: 600px;">
			<section class="container-fluid">
				<div class="row align-items-center">
					<div class="col-3">
						<img src="resources/images/streamingOverlayLogo.png" class="img-fluid" style="max-height: 60px;" alt="Logo" />
					</div>
					<div class="col-9 js-progress">
						<div class="text-right">
							<h1 class="h5">{{ entity.sumDonations | formatMoney }} / {{ entity.fundraisingGoal | formatMoney }}</h1>
						</div>
						<div class="progress">
							<div class="progress-bar progress-bar-grow bg-blue" role="progressbar" v-bind:style="{ width: ((entity.sumDonations / entity.fundraisingGoal) * 100) + '%' }"></div>
						</div>
					</div>
				</div>
			</section>
			<transition name="slide">
				<section v-if="donation" class="row no-gutters align-items-center bg-grad-blue position-absolute pos-t-0 h-100 w-100 slide-start-right slide-left">
					<div class="col px-3 py-2">
						<h1 class="h2 d-block w-100"><span v-if="donation.amount">{{ donation.amount | formatMoney }}</span></h1>
						<h2 class="h6 d-block w-100"><span v-if="donation.displayName">{{ donation.displayName }}</span><span v-else>Anonymous</span></h2>
					</div>
				</section>
			</transition>
		</div>
	</body>
	<script>
		Vue.filter(
			'formatMoney',
			(value) => {
				return numeral(value).format('$0,0.00');
			}
		);

		var v = new Vue({
			data: {
				count: 0,
				donation: null,
				donations: [],
				entity: {
					etag: '',
					lastDonation: new Date().toISOString()
				}
			},
			el: '#app',
			methods: {
				refreshDonations() {
					var ld = new Date(this.entity.lastDonation);

					axios.get(window.config.api + window.config.resource + '/' + window.config.resourceID + '/donations' + ( window.config.api.indexOf('?') >= 0 ? '&' : '?' ) + 'where=' + encodeURIComponent('createdDateUTC > ' + ld.toISOString()) + '&orderBy=' + encodeURIComponent('createdDateUTC ASC'))
						.then((response) => {
							response.data.forEach((dx) => {
								var createdDate = new Date(dx.createdDateUTC);

								if(createdDate > ld) {
									this.donations.push(dx);
									this.entity.lastDonation = dx.createdDateUTC;
								}
							});
						});
				},
				refreshEntity() {
					axios.get(window.config.api + window.config.resource + '/' + window.config.resourceID, { headers: { 'if-none-match': this.entity.etag } })
						.then((response) => {
							// success
							var e = Object.assign({}, this.entity, response.data);
							e.etag = response.headers.etag;

							this.entity = e;

							if(window.config.streamingThermometer.showDonations) {
								this.refreshDonations();
							}
						})
						.catch((error) => {});
				}
			}
		});

		setInterval(
			() => {
				v.refreshEntity();
			},
			15000
		);

		if(window.config.streamingThermometer.showDonations) {
			setInterval(
				() => {
					if(v.donations.length) {
						v.donation = v.donations.shift();
						setTimeout(
							() => { v.donation = null; },
							5000
						);
					}
				},
				7000
			);
		}

		v.refreshEntity();
	</script>
</html>