Untitled
unknown
plain_text
2 years ago
8.7 kB
4
Indexable
<style>
.invalid-input {
border-color: red;
}
.row > div {
margin-bottom: 10px;
}
.full-width {
width: 100%;
}
.carbon-result, .date-inputs {
display: flex;
justify-content: space-between;
}
.carbon-result > div, .date-inputs > div {
width: 49%;
}
</style>
<body>
<div class="container my-5">
<ul class="nav nav-tabs" id="inputTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="manual-tab" data-toggle="tab" href="#manual" role="tab" aria-controls="manual" aria-selected="true">Manual Input</a>
</li>
<li class="nav-item">
<a class="nav-link" id="file-tab" data-toggle="tab" href="#file" role="tab" aria-controls="file" aria-selected="false">File Import</a>
</li>
</ul>
<div class="tab-content" id="inputTabContent">
<div class="tab-pane fade show active" id="manual" role="tabpanel" aria-labelledby="manual-tab">
<div class="container my-5">
<!-- Form -->
<div class="container my-5">
<div class="form-group">
<div id="scope" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary">
<input type="radio" name="scope" value="1"> Scope 1
</label>
<label class="btn btn-outline-secondary">
<input type="radio" name="scope" value="2"> Scope 2
</label>
<label class="btn btn-outline-secondary">
<input type="radio" name="scope" value="3"> Scope 3
</label>
</div>
</div>
<div class="row">
<div class="col-4">
<label>Kategori</label>
<select id="category" class="form-control"></select>
</div>
<div class="col-4">
<label>Källa</label>
<select id="source" class="form-control"></select>
</div>
<div class="col-4">
<label>Koldioxidfaktor</label>
<input type="text" id="carbonfactor" class="form-control" disabled>
</div>
</div>
<div class="row">
<div id="unit-container" class="col-8">
<label id="unit-label">Inmatning</label>
<input type="text" id="unit" class="form-control">
</div>
<div id="unit2-container" class="col-4" style="display: none;">
<label id="unit-label2"></label>
<input type="text" id="unit2" class="form-control">
</div>
<div class="col-4">
<label>Resultat CO2e</label>
<input type="text" id="result" class="form-control" disabled>
</div>
</div>
<div class="row">
<div class="col-6">
<label for="dateFrom">Utsläpp från</label>
<input type="date" id="dateFrom" class="form-control">
</div>
<div class="col-6">
<label for="dateTo">Utsläpp till</label>
<input type="date" id="dateTo" class="form-control">
</div>
</div>
<div class="form-group">
<label>Comment</label>
<textarea class="form-control" id="comment" maxlength="250"></textarea>
<div class="d-flex justify-content-end">
<small id="charCount" class="form-text text-muted">0/250</small>
</div>
</div>
<button class="btn btn-primary" id="submit">Lägg till</button>
<button class="btn btn-outline-secondary" id="clear">Rensa</button>
</div>
</div>
<div class="tab-pane fade" id="file" role="tabpanel" aria-labelledby="file-tab">
</div>
</div>
</div>
</div>
<script>
let data = JSON.parse('@Data@');
let scopeRadios;
let categorySelect;
let sourceSelect;
let unitInput;
let unitInput2;
let carbonFactorInput;
let resultInput;
let commentInput;
let charCount;
$(document).ready(function () {
scopeRadios = $('input[name="scope"]');
categorySelect = $('#category');
sourceSelect = $('#source');
unitInput = $('#unit');
unitInput2 = $('#unit2').hide(); // hide second input box by default
carbonFactorInput = $('#carbonfactor');
resultInput = $('#result');
commentInput = $('#comment');
charCount = $('#charCount');
// Event bindings
scopeRadios.change(onScopeChange);
categorySelect.change(onCategoryChange);
sourceSelect.change(onSourceChange);
unitInput.add(unitInput2).on('input', onUnitInputChange);
commentInput.on('keyup', onCommentKeyUp);
$('#submit').click(onSubmitClick);
$('#clear').click(onClearClick);
// Initialize form state
resetForm();
// Trigger change event on the first scope radio button to initialize categories
scopeRadios.first().prop('checked', true).trigger('change');
});
function resetForm() {
// Clear inputs and textarea
$('input').val('');
$('textarea').val('');
$('#unit-label2').text('');
$('#charCount').text('0/250');
unitInput2.hide();
unitInput.removeClass('col-4').addClass('col-12');
$('.invalid-input').removeClass('invalid-input');
unitInput.prop('disabled', true);
// Reset category and source select elements
categorySelect.empty().append(new Option("Välj kategori", "", true, true)).prop('disabled', true);
sourceSelect.empty().append(new Option("Välj källa", "", true, true)).prop('disabled', true);
}
function onScopeChange() {
let selectedScope = parseInt($(this).val());
let categories = [...new Set(data.filter(item => item.scope === selectedScope).map(item => item.category))];
// Clear the categories dropdown
categorySelect.empty();
categorySelect.append(new Option("Välj kategori", "", true, true));
// Populate the categories dropdown
categories.forEach(category => {
categorySelect.append(new Option(category, category));
});
// Enable the categories dropdown
categorySelect.prop('disabled', false);
}
function onCategoryChange() {
if($(this).val() !== "") {
sourceSelect.empty();
sourceSelect.append(new Option("Välj källa", "", true, true)).prop('disabled', false);
let selectedScope = parseInt($('input[name="scope"]:checked').val());
let selectedCategory = $(this).val();
let sources = [...new Set(data.filter(item => item.scope == selectedScope && item.category == selectedCategory).map(item => item.source))];
sources.forEach(source => {
sourceSelect.append(new Option(source, source));
});
}
}
function onSourceChange() {
unitInput.val('');
unitInput2.val('').hide();
let selectedScope = $('input[name="scope"]:checked').val();
let selectedCategory = categorySelect.val();
let selectedSource = $(this).val();
let selectedData = data.find(item => item.scope == selectedScope && item.category == selectedCategory && item.source == selectedSource);
let units = selectedData.unit.split(";");
$('#unit-label').text('Inmatning (' + units[0] + ')');
unitInput.show().parent().addClass('col-12').removeClass('col-8 col-4'); // make full width
if (units.length > 1) {
$('#unit-label2').text('Inmatning (' + units[1] + ')');
unitInput2.show().parent().addClass('col-6').removeClass('col-8 col-4'); // make half width
unitInput.parent().removeClass('col-12').addClass('col-6'); // make half width
} else {
$('#unit-label2').text('');
}
carbonFactorInput.val(selectedData.carbonfactor);
unitInput.prop('disabled', false);
}
function onUnitInputChange() {
if (isNaN($(this).val()) || !isFinite($(this).val())) {
$(this).addClass('invalid-input');
} else {
$(this).removeClass('invalid-input');
calculateResult();
}
}
function calculateResult() {
let unit1 = parseFloat(unitInput.val()) || 0;
let unit2 = parseFloat(unitInput2.val()) || 0;
let carbonFactor = parseFloat(carbonFactorInput.val());
let result = (unit1 + unit2) * carbonFactor;
resultInput.val(result);
}
function onCommentKeyUp() {
charCount.text($(this).val().length + '/250');
}
function onSubmitClick() {
if ($('.invalid-input').length > 0) {
alert('Please correct the invalid inputs');
} else {
alert('Form submitted!');
}
}
function onClearClick() {
resetForm();
}
</script>
</body>Editor is loading...