Untitled
unknown
plain_text
a year ago
8.7 kB
1
Indexable
Never
<body>
<div class="container mt-5">
<h1 class="text-center">Register Carbon Emissions</h1>
<div class="mt-4">
<ul class="nav nav-tabs" id="emissionsTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="register-tab" data-toggle="tab" href="#register" role="tab" aria-controls="register" aria-selected="true">Manual input</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="byfile-tab" data-toggle="tab" href="#byfile" role="tab" aria-controls="byfile" aria-selected="false">By file</a>
</li>
</ul>
<div class="tab-content" id="emissionsTabContent">
<div class="tab-pane fade show active" id="register" role="tabpanel" aria-labelledby="register-tab">
<form id="emission-form" class="mt-4">
<div class="form-group" id="scopes-group">
<!-- Radio buttons for scopes will be added here dynamically -->
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="categories">Category:</label>
<select id="categories" class="form-control"></select>
</div>
<div class="form-group col-md-6">
<label for="sources">Source:</label>
<select id="sources" class="form-control"></select>
</div>
</div>
<div id="unit-fields" class="form-row">
<!-- Unit fields will be added here dynamically -->
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="carbonfactor">Carbon Factor:</label>
<input type="text" id="carbonfactor" class="form-control" disabled>
</div>
<div class="form-group col-md-6">
<label for="result">Result CO2e:</label>
<input type="text" id="result" class="form-control" disabled>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="datefrom">Date From:</label>
<input type="date" id="datefrom" class="form-control">
</div>
<div class="form-group col-md-6">
<label for="dateto">Date To:</label>
<input type="date" id="dateto" class="form-control">
</div>
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea id="comment" class="form-control" rows="3" maxlength="250" oninput="updateCharCount()"></textarea>
<small id="char-count" class="form-text text-muted">0</small>
</div>
<button type="button" class="btn btn-primary" onclick="addEmission()">Add Emission</button>
<button type="button" class="btn btn-secondary" onclick="clearForm()">Clear Form</button>
</form>
</div>
<!-- Tab för att fixa uppladdning av fil -->
</div>
</div>
</div>
<script>
let data = @Data@; // your data here
$(document).ready(function() {
updateScopes();
updateCategories();
updateSources();
});
function updateScopes() {
let group = document.getElementById('scopes-group');
group.innerHTML = '';
let scopes = [...new Set(data.map(item => item.scope))];
let btnGroup = document.createElement('div');
btnGroup.className = 'btn-group btn-group-toggle';
btnGroup.setAttribute('data-toggle', 'buttons');
scopes.forEach(scope => {
let label = document.createElement('label');
label.className = 'btn btn-secondary';
label.innerText = scope;
let input = document.createElement('input');
input.type = 'radio';
input.name = 'scopes';
input.value = scope;
input.autocomplete = 'off';
input.addEventListener('change', updateForm);
label.appendChild(input);
btnGroup.appendChild(label);
});
group.appendChild(btnGroup);
// Set the first button as active
btnGroup.firstChild.classList.add('active');
btnGroup.firstChild.firstChild.checked = true;
}
function updateForm() {
updateCategories();
updateSources();
}
function updateCategories() {
let select = document.getElementById('categories');
select.innerHTML = '';
let scope = document.querySelector('input[name="scopes"]:checked').value;
let categories = [...new Set(data.filter(item => item.scope === scope).map(item => item.category))];
categories.forEach(category => {
let option = document.createElement('option');
option.text = category;
select.add(option);
});
}
function updateSources() {
let select = document.getElementById('sources');
select.innerHTML = '';
let scope = document.querySelector('input[name="scopes"]:checked').value;
let category = document.getElementById('categories').value;
let sources = [...new Set(data.filter(item => item.scope === scope && item.category === category).map(item => item.source))];
sources.forEach(source => {
let option = document.createElement('option');
option.text = source;
select.add(option);
});
updateUnitsAndFactor();
}
function updateUnitsAndFactor() {
let unitFields = document.getElementById('unit-fields');
let carbonFactorField = document.getElementById('carbonfactor');
let scope = document.querySelector('input[name="scopes"]:checked').value;
let category = document.getElementById('categories').value;
let source = document.getElementById('sources').value;
let unitAndFactor = data.find(item => item.scope === scope && item.category === category && item.source === source);
// Clear existing unit fields
unitFields.innerHTML = '';
if (unitAndFactor) {
let units = unitAndFactor.unit.split(';');
units.forEach((unit, index) => {
let div = document.createElement('div');
div.className = "form-group col-md-" + (12 / units.length);
let label = document.createElement('label');
label.htmlFor = 'unit' + (index + 1);
label.innerText = unit;
div.appendChild(label);
let input = document.createElement('input');
input.type = 'number';
input.className = 'form-control';
input.id = 'unit' + (index + 1);
input.step = '0.01';
input.oninput = calculateResult;
div.appendChild(input);
unitFields.appendChild(div);
});
carbonFactorField.value = unitAndFactor.carbonfactor;
} else {
carbonFactorField.value = '';
}
calculateResult();
}
function updateResult() {
let result = 1;
unitInputs.forEach(input => {
let value = parseFloat(input.value);
if (!isNaN(value)) {
result *= value;
}
});
let carbonFactor = parseFloat(document.getElementById('carbonfactor').value);
if (!isNaN(carbonFactor)) {
result *= carbonFactor;
}
document.getElementById('result').value = result.toFixed(2);
}
function updateCharCount() {
let comment = document.getElementById('comment');
document.getElementById('char-count').innerText = comment.value.length;
}
function clearForm() {
document.getElementById('emission-form').reset();
document.getElementById('char-count').innerText = '0';
document.getElementById('result').value = '';
updateScopes(); // Reset scopes, categories, and sources
}
// initialize the dropdowns and button group when the page loads
updateScopes();
// Add event listeners for Categories and Sources changes
document.getElementById('categories').addEventListener('change', updateSources);
document.getElementById('sources').addEventListener('change', updateUnitsAndFactor);
</script>
</body>