-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
173 lines (163 loc) · 7.92 KB
/
index.html
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html>
<head>
<title>Octopus Agile Daily Price & Consumption Tracker</title>
<meta name="description" content="Track Octopus Agile prices and your daily energy consumption with our easy-to-use tracker.">
<meta name="keywords" content="Octopus Energy, Agile Prices, Energy Consumption, Energy Tracker, Octopus Agile, Energy Prices, Consumption Tracker">
<meta name="author" content="Tiny Blue Robots">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
<script type="module">
import * as app from '/build/r0rzz752.js'
window.app = app
</script>
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.1/bundles/datastar.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-6T17K877ZY"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-6T17K877ZY');
</script>
<style>
html,
option,
.modal-card-head,
.modal-card-body,
.modal-card-foot,
.button {
background-color: rgb(16 0 48) !important
}
.button,
input {
color: azure !important;
}
.button:hover {
border-color: rgb(240 80 248) !important;
}
#chart {
background-color: rgb(24 0 72);
}
.tag {
background-color: rgb(88 64 255) !important;
color: azure !important;
}
.is-info {
background-color: rgb(240 80 248) !important;
}
a {
color: rgb(240 80 248) !important;
}
header a {
color: azure !important;
}
</style>
</head>
<body class="container">
<header class="section">
<h1 class="title has-text-centered"><a href="/">Octopus Agile Daily Price & Consumption Tracker</a></h1>
</header>
<main class="box has-background-inherit" data-signals-totals="''" data-on-totalsupdated__window="$totals = evt.detail" data-replace-url="$periodfrom != new Date().toISOString().split('T')[0] ? `?periodfrom=${$periodfrom}` : '/'" data-computed-nextdatedisabled="$periodfrom == $maxperiodfrom" data-signals-periodfrom="new URLSearchParams(window.location.search).get('periodfrom') || app.getMaxPeriodFrom()" data-computed-maxperiodfrom="$periodfrom && app.getMaxPeriodFrom()" data-signals-account="app.getAccount()" data-signals-token="app.getToken()" data-signals-region="app.getRegion() || 'A'" data-persist="account token region" data-on-load="app.onload($rateschart, $costchart, $rendercharts)" data-signals-rendercharts="() => app.renderCharts($region, $periodfrom)" >
<div class="columns">
<div class="column is-11">
<div class="field">
<label for="region" class="label">Region</label>
<div class="control">
<div class="select" class="has-background-inherit">
<select id="region" class="has-background-inherit" data-bind="region" data-on-change="$rendercharts()">
<option value="A">Eastern England</option>
<option value="B">East Midlands</option>
<option value="C">London</option>
<option value="D">North Wales, Merseyside and Cheshire</option>
<option value="E">West Midlands</option>
<option value="F">North East England</option>
<option value="G">North West England</option>
<option value="H">Southern England</option>
<option value="J">South East England</option>
<option value="K">South Wales</option>
<option value="L">South West England</option>
<option value="M">Yorkshire</option>
<option value="N">Southern Scotland</option>
<option value="P">Northern Scotland</option>
</select>
</div>
</div>
</div>
<div class="field">
<label for="periodfrom" class="label">Date</label>
<span data-on-click="$periodfrom = app.setPreviousDay($periodfrom); $rendercharts()" class="button has-background-inherit"><<</span>
<input id="periodfrom" type="date" data-bind-periodfrom data-attr-max="$maxperiodfrom" class="button has-background-inherit" data-on-change="app.renderCharts($region, $periodfrom)" />
<span data-on-click="$periodfrom = app.setNextDay($periodfrom, $maxperiodfrom); $rendercharts()" class="button has-background-inherit" data-attr-disabled="$nextdatedisabled">>></span>
</div>
</div>
<div class="column">
<div class="field" data-class-is-hidden="!$account">
<label class="label">Account</label>
<span data-text="$account"></span>
</div>
<button class="button" data-class-is-hidden="$account" data-on-click="$signinmodalactive = true">Sign In</button>
<button class="button" data-class-is-hidden="!$account" data-on-click="$account = $token = ''; app.signOut(); $rendercharts()">Sign Out</button>
</div>
</div>
<div class="field is-grouped is-grouped-multiline" data-class-is-hidden="!$totals">
<div class="control">
<div class="tags has-addons">
<span class="tag">Total cost</span>
<span class="tag is-info" data-text="`£${$totals.totalCost}`"></span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag">Total kWh</span>
<span class="tag is-info" data-text="`${$totals.totalKwh}`"></span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag">Average kWh cost</span>
<span class="tag is-info" data-text="`£${$totals.averageKwhCost}`"></span>
</div>
</div>
</div>
<div data-ref-rateschart></div>
<br>
<div data-ref-costchart></div>
</main>
<footer class="footer has-background-inherit">
<div class="has-text-centered box has-background-inherit">
<p>
Not on Agile? <a href="https://share.octopus.energy/rich-moon-324" target="_blank">Switch to Octopus Energy</a> and get £50 credit.
</p>
<p>
This site is not affiliated with Octopus Energy. It uses the <a href="https://developer.octopus.energy" target="_blank">Octopus Energy API</a> to display Agile tariff prices and consumption data.
</p>
<p data-class-is-hidden="$account">
<a href="#" data-on-click="$signinmodalactive = true">Sign in</a> to see your consumption data. Your account and token will only be stored in your browser's local storage.
</p>
<p>
Built by <a href="https://tinybluerobots.com" target="_blank">Tiny Blue Robots</a>. Found a bug or want to suggest a feature? <a href="mailto:info@tinybluerobots.com">Let us know</a>.
</p>
</div>
</footer>
<div class="modal" data-bind-signinmodalactive data-class-is-active="$signinmodalactive">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Sign in</p>
<button class="delete" aria-label="close" data-on-click="$signinmodalactive = false"></button>
</header>
<section class="modal-card-body">
<label for="account" class="label">Account</label>
<input id="account" type="text" class="input has-background-inherit" data-bind-signinaccount />
<label for="token" class="label">Token</label>
<input id="token" type="text" class="input has-background-inherit" data-bind-signintoken />
</section>
<footer class="modal-card-foot">
<div class="buttons">
<button class="button" data-on-click="app.signIn($signinaccount, $signintoken).then(result => result && ($account = $signinaccount) && ($token = $signintoken) && ($signinmodalactive = !result)).then(() => $rendercharts())">Ok</button>
<button class="button" data-on-click="$signinmodalactive = false">Cancel</button>
</div>
</footer>
</div>
</div>
</body>
</html>