Skip to content

Commit

Permalink
refactor: move javascript to separate file
Browse files Browse the repository at this point in the history
  • Loading branch information
@ElinaZoldnere
ElinaZoldnere committed Feb 13, 2025
1 parent db6103f commit ee50ae0
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 81 deletions.
69 changes: 69 additions & 0 deletions insurance-calculator-app/src/main/resources/static/js/person.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
function addPerson() {
let personsContainer = document.getElementById("persons-container");
let index = document.getElementsByClassName("person-card").length;
let personTemplate = `
<div class="card person-card shadow-sm mt-3">
<div class="card-body">
<h3 class="text-primary">Person ${index + 1}</h3>
<div class="mb-3">
<label class="form-label" for="persons[${index}].personFirstName">First Name:</label>
<input type="text" class="form-control" id="persons[${index}].personFirstName" name="persons[${index}].personFirstName" />
</div>
<div class="mb-3">
<label class="form-label" for="persons[${index}].personLastName">Last Name:</label>
<input type="text" class="form-control" id="persons[${index}].personLastName" name="persons[${index}].personLastName" />
</div>
<div class="mb-3">
<label class="form-label" for="persons[${index}].personalCode">Personal Code:</label>
<input type="text" class="form-control" id="persons[${index}].personalCode" name="persons[${index}].personalCode" />
</div>
<div class="mb-3">
<label class="form-label" for="persons[${index}].personBirthDate">Birth Date:</label>
<input type="date" class="form-control" id="persons[${index}].personBirthDate" name="persons[${index}].personBirthDate" />
</div>
<div class="mb-3">
<label class="form-label" for="persons[${index}].medicalRiskLimitLevel">Medical Risk Limit Level:</label>
<input type="text" class="form-control" id="persons[${index}].medicalRiskLimitLevel" name="persons[${index}].medicalRiskLimitLevel" />
</div>
<div class="mb-3">
<label class="form-label" for="persons[${index}].travelCost">Travel Cost:</label>
<input type="text" class="form-control" id="persons[${index}].travelCost" name="persons[${index}].travelCost" />
</div>
</div>
</div>`;
personsContainer.insertAdjacentHTML('beforeend', personTemplate);
}

function removePerson() {
let personsContainer = document.getElementById("persons-container");
let personForms = document.getElementsByClassName("person-card");
if (personForms.length > 0) {
personsContainer.removeChild(personForms[personForms.length - 1]);
}
}

document.addEventListener('DOMContentLoaded', (event) => {
const agreementDateFrom = document.getElementById('agreementDateFrom');
const agreementDateTo= document.getElementById('agreementDateTo');

const today = new Date();

const dateFrom = new Date();
dateFrom.setDate(today.getDate() + 1);

const dateTo = new Date();
dateTo.setDate(today.getDate() + 2);

agreementDateFrom.value = dateFrom.toISOString().split('T')[0];
agreementDateTo.value = dateTo.toISOString().split('T')[0];
});

function clearForm() {
window.location.href = window.location.href.split('?')[0];
}
91 changes: 10 additions & 81 deletions insurance-calculator-app/src/main/resources/templates/travel-calculate-premium-v2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ <h2>Travel Insurance Premium Calculation</h2>
<textarea id="selectedRisks" th:field="*{selectedRisks}" class="form-control"></textarea>
</div>

<div id="persons-container">
<div id="persons-container" class="mb-3">
<!-- PersonRequestDTO dynamic forms will be added here -->
<div th:each="person, personStat : *{persons}" class="card shadow-sm mt-3">
<div th:each="person, personStat : *{persons}" class="card person-card shadow-sm mt-3">
<div class="card-body">
<h3>Person <span th:text="${personStat.index + 1}"></span></h3>
<div>
Expand Down Expand Up @@ -88,10 +88,12 @@ <h3>Person <span th:text="${personStat.index + 1}"></span></h3>
</div>
</div>

<button type="button" onclick="addPerson()" class="btn btn-primary">Add Person</button>
<button type="button" onclick="removePerson()" class="btn btn-danger">Remove Person</button>
<button type="submit" class="btn btn-success">Calculate Premium</button>
<button type="button" onclick="clearForm()" class="btn btn-secondary">Clear</button>
<div class="mb-4">
<button type="button" onclick="addPerson()" class="btn btn-primary">Add Person</button>
<button type="button" onclick="removePerson()" class="btn btn-danger">Remove Person</button>
<button type="submit" class="btn btn-success">Calculate Premium</button>
<button type="button" onclick="clearForm()" class="btn btn-secondary">Clear</button>
</div>
</form>

<!-- Added condition if response != null -->
Expand Down Expand Up @@ -120,89 +122,16 @@ <h3>Travel Insurance Premium Calculation ERRORS</h3>
<tr th:each="error : ${response.errors}">
<td th:text="${error.errorCode}"/>
<td th:text="${error.description}"/>


</tr>
</td>

<h3>
<label th:if="${response.agreementPremium != null}"
th:text="'AGREEMENT PREMIUM: ' + ${response.agreementPremium}"></label>
</h3>

</div>
<script>
function addPerson() {
let personsContainer = document.getElementById("persons-container");
let index = document.getElementsByClassName("person-form").length;
let personTemplate = `
<div class="card shadow-sm mt-3">
<div class="card-body">
<h3 class="text-primary">Person ${index + 1}</h3>
<div class="mb-3">
<label class="form-label" for="persons[${index}].personFirstName">First Name:</label>
<input type="text" class="form-control" id="persons[${index}].personFirstName" name="persons[${index}].personFirstName" />
</div>
<div class="mb-3">
<label class="form-label" for="persons[${index}].personLastName">Last Name:</label>
<input type="text" class="form-control" id="persons[${index}].personLastName" name="persons[${index}].personLastName" />
</div>
<div class="mb-3">
<label class="form-label" for="persons[${index}].personalCode">Personal Code:</label>
<input type="text" class="form-control" id="persons[${index}].personalCode" name="persons[${index}].personalCode" />
</div>
<div class="mb-3">
<label class="form-label" for="persons[${index}].personBirthDate">Birth Date:</label>
<input type="date" class="form-control" id="persons[${index}].personBirthDate" name="persons[${index}].personBirthDate" />
</div>
<div class="mb-3">
<label class="form-label" for="persons[${index}].medicalRiskLimitLevel">Medical Risk Limit Level:</label>
<input type="text" class="form-control" id="persons[${index}].medicalRiskLimitLevel" name="persons[${index}].medicalRiskLimitLevel" />
</div>
<div class="mb-3">
<label class="form-label" for="persons[${index}].travelCost">Travel Cost:</label>
<input type="text" class="form-control" id="persons[${index}].travelCost" name="persons[${index}].travelCost" />
</div>
</div>
</div>`;
personsContainer.insertAdjacentHTML('beforeend', personTemplate);
}

function removePerson() {
let personsContainer = document.getElementById("persons-container");
let personForms = document.getElementsByClassName("person-form");
if (personForms.length > 0) {
personsContainer.removeChild(personForms[personForms.length - 1]);
}
}

document.addEventListener('DOMContentLoaded', (event) => {
const agreementDateFrom = document.getElementById('agreementDateFrom');
const agreementDateTo= document.getElementById('agreementDateTo');

const today = new Date();

const dateFrom = new Date();
dateFrom.setDate(today.getDate() + 1);

const dateTo = new Date();
dateTo.setDate(today.getDate() + 2);

agreementDateFrom.value = dateFrom.toISOString().split('T')[0];
agreementDateTo.value = dateTo.toISOString().split('T')[0];
});

function clearForm() {
window.location.href = window.location.href.split('?')[0];
}

</script>
<!-- JavaScript for adding persons -->
<script th:src="@{/js/person.js}"></script>

<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
Expand Down

0 comments on commit ee50ae0

Please sign in to comment.