Skip to content

Commit f1104cb

Browse files
danlooodanlooo
committed
Add price estimator
1 parent b595b00 commit f1104cb

File tree

7 files changed

+134
-74
lines changed

7 files changed

+134
-74
lines changed

‎.github/workflows/deploy_website.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,4 +90,4 @@ jobs:
9090
steps:
9191
- name: Deploy to GitHub Pages
9292
id: deployment
93-
uses: actions/deploy-pages@v4
93+
uses: actions/deploy-pages@v4

‎website/.vitepress/config.mts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { defineConfig } from 'vitepress'
22
import mathjax3 from 'markdown-it-mathjax3';
33

4+
45
const customElements = [
56
'mjx-container',
67
'mjx-assistive-mml',
@@ -102,6 +103,10 @@ export default defineConfig({
102103
md.use(mathjax3);
103104
},
104105
},
106+
// head: [
107+
// ['link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css' }],
108+
// ['script', { src: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js', defer: 'defer' }]
109+
// ],
105110
vue: {
106111
template: {
107112
compilerOptions: {

‎website/.vitepress/theme/custom.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@
1515
code {
1616
font-size: small;
1717
white-space: pre-wrap;
18-
}
18+
}

‎website/.vitepress/theme/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1+
2+
import 'bootstrap/dist/css/bootstrap.min.css';
3+
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
4+
5+
// overwrite bootstrap css
16
import DefaultTheme from 'vitepress/theme'
27
import './custom.css'
38

9+
410
export default DefaultTheme

‎website/docs/pricing.md‎

Lines changed: 91 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -3,82 +3,101 @@
33
This project is creating free and open-source software under the MIT license.
44
There are plenty of ways to run the workflow locally after downloading the [data](/background-gfm.html#data).
55
However, the workflow can be also be executed with [openEO at EODC](https://editor.openeo.org/?server=openeo.eodc.eu%2Fopeneo%2F1.2.0%2F) by enabling experimental processes and searching for 'rqadeforestation'.
6-
A preliminary price estimation can be calculated using the following tool:
7-
8-
## openEO price calculator
9-
10-
<div>
11-
12-
<!-- added HTML form + script -->
13-
<form id="pricing-form" onsubmit="return false;" style="margin-top:1rem;">
14-
<label>
15-
Equi7 tiles:
16-
<input id="tiles" type="number" min="0" step="1" value="1" style="width:6rem;">
17-
</label>
18-
<br style="line-height:0.6;">
19-
<label>
20-
Start date:
21-
<input id="start" type="date">
22-
</label>
23-
<label style="margin-left:1rem;">
24-
End date:
25-
<input id="end" type="date">
26-
</label>
27-
<div style="margin-top:0.5rem;">
28-
Price: <output id="price">0.00</output>
6+
7+
## Price calculator
8+
9+
Please enter the spatio-temporal extent to be processed.
10+
The price will be estimated automatically.
11+
Please note that these results are not official offerings from any cloud provider.
12+
Ressource estimation were based on the Sentinel-1 Sigma0 collection at 20m resolution in Equi7 projection at the EODC cloud.
13+
14+
<ClientOnly>
15+
16+
<form @submit.prevent="onSubmit" class="form-horizontal">
17+
<div class="form-floating">
18+
<label for="start">Start date</label><br />
19+
<input id="start" type="date" v-model="start" class="form-control" value="01/01/2024" required />
2920
</div>
21+
22+
<div class="form-floating">
23+
<label for="end">End date</label><br />
24+
<!-- enforce end >= start on the client -->
25+
<input id="end" type="date" v-model="end" :min="start" class="form-control" required />
26+
</div>
27+
28+
<div class="form-floating">
29+
<label for="n_tiles">Number of Equi7 tiles</label><br />
30+
<input
31+
id="n_tiles"
32+
type="number"
33+
v-model.number="n_tiles"
34+
min="1"
35+
step="1"
36+
inputmode="numeric"
37+
class="form-control"
38+
required
39+
/>
40+
</div>
41+
42+
<div v-if="error" style="color:#b00020;margin-top:0.4rem">{{ error }}</div>
43+
44+
<tbody class="form-floating mt-3 ">
45+
<tr>
46+
<td>
47+
<strong>Estimated memory usage:</strong>
48+
</td>
49+
<td>
50+
{{ price }} GB
51+
</td>
52+
</tr>
53+
<tr>
54+
<td>
55+
<strong>Estimated runtime on one vCPU:</strong>
56+
</td>
57+
<td>
58+
{{ price }} min
59+
</td>
60+
</tr>
61+
</tbody>
3062
</form>
3163

32-
<script>
33-
(function(){
34-
const tilesEl = document.getElementById('tiles');
35-
const startEl = document.getElementById('start');
36-
const endEl = document.getElementById('end');
37-
const priceEl = document.getElementById('price');
38-
39-
const minDate = '2014-01-01';
40-
const today = new Date();
41-
const yyyy = today.getFullYear();
42-
const mm = String(today.getMonth()+1).padStart(2,'0');
43-
const dd = String(today.getDate()).padStart(2,'0');
44-
const todayStr = `${yyyy}-${mm}-${dd}`;
45-
46-
startEl.min = minDate;
47-
endEl.min = minDate;
48-
startEl.max = todayStr;
49-
endEl.max = todayStr;
50-
51-
startEl.value = minDate;
52-
endEl.value = todayStr;
53-
54-
function parseDateInput(el){
55-
const v = el.value;
56-
if(!v) return null;
57-
const d = new Date(v + 'T00:00:00Z');
58-
return isNaN(d) ? null : d;
59-
}
6064

61-
function compute(){
62-
const tiles = Number(tilesEl.value) || 0;
63-
const start = parseDateInput(startEl);
64-
const end = parseDateInput(endEl);
65-
if(!start || !end || end < start){
66-
priceEl.textContent = '0.00';
67-
return;
68-
}
69-
// duration in years (approx)
70-
const msPerYear = 1000 * 60 * 60 * 24 * 365.25;
71-
const years = (end - start) / msPerYear;
72-
const product = tiles * years;
73-
priceEl.textContent = product.toFixed(2);
65+
</ClientOnly>
66+
67+
<script setup>
68+
import { ref, computed, onMounted, watch } from 'vue'
69+
70+
const start = ref('')
71+
const end = ref('')
72+
const n_tiles = ref(1)
73+
const submitted = ref(false)
74+
const error = ref('')
75+
let price = 1337
76+
77+
const valid = computed(() => {
78+
if (!start.value || !end.value) return false
79+
if (start.value > end.value) return false
80+
if (!Number.isInteger(n_tiles.value) || n_tiles.value < 0) return false
81+
return true
82+
})
83+
84+
watch([start, end, n_tiles], () => {
85+
error.value = ''
86+
if (start.value && end.value && start.value > end.value) {
87+
error.value = 'Start date must be on or before end date.'
7488
}
89+
if (!Number.isInteger(n_tiles.value)) {
90+
error.value = 'Count must be an integer.'
91+
}
92+
93+
let days = (Date.parse(end.value) - Date.parse(start.value)) * 1e-3 / 60 / 60 / 24 / 365
7594

76-
tilesEl.addEventListener('input', compute);
77-
startEl.addEventListener('change', compute);
78-
endEl.addEventListener('change', compute);
95+
price = n_tiles.value * days * 100 * 1.00123
96+
price = Math.round(price * 100) / 100
97+
})
7998

80-
// initial compute
81-
compute();
82-
})();
83-
</script>
84-
</div>
99+
onMounted(() => {
100+
start.value = "2022-01-01"
101+
end.value = "2023-01-01"
102+
})
103+
</script>

‎website/package-lock.json‎

Lines changed: 29 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"docs:preview": "vitepress preview"
99
},
1010
"dependencies": {
11+
"bootstrap": "^5.3.8",
1112
"markdown-it-mathjax3": "^4.3.2"
1213
}
1314
}

0 commit comments

Comments
 (0)