mirror of
https://github.com/Prominence/car-repair-site.git
synced 2026-01-09 19:56:43 +03:00
131 lines
7.2 KiB
HTML
131 lines
7.2 KiB
HTML
<!doctype html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
layout:decorate="~{main}">
|
|
<head>
|
|
<title th:text="#{default.title}"></title>
|
|
<link rel="stylesheet" type="text/css" href="/webjars/bootstrap-datetimepicker/2.4.2/css/bootstrap-datetimepicker.min.css"/>
|
|
</head>
|
|
<body>
|
|
<div layout:fragment="header">
|
|
<h1 th:text="#{order.title}"></h1>
|
|
</div>
|
|
<div layout:fragment="content">
|
|
<form th:action="'/order/' + ${orderDto.id != null ? 'update/' + orderDto.id : 'create'}" th:object="${orderDto}" method="post">
|
|
<div class="form-group row">
|
|
<label for="orderDescription" class="col-sm-2 col-form-label" th:text="#{description.label}"></label>
|
|
<div class="col-sm-10">
|
|
<textarea name="description" class="form-control" id="orderDescription" th:field="*{description}" th:errorclass="is-invalid" th:value="${orderDto.description}"></textarea>
|
|
<div th:replace="common::errors('description')"></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="orderClient_tmp" class="col-sm-2 col-form-label" th:text="#{client.label}"></label>
|
|
<div class="input-group col-sm-10" th:with="clientInitials=${(orderDto.clientId != null) ? (orderDto.clientFirstName + ' ' + orderDto.clientLastName) : null}">
|
|
<span class="input-group-prepend input-group-text" id="orderClientPlaceholder" th:text="${clientInitials}"></span>
|
|
<input type="text" name="clientId_tmp" class="form-control" id="orderClient_tmp" th:classappend="${#fields.hasErrors('clientId') ? 'is-invalid' : null}">
|
|
<input type="hidden" name="clientId" id="orderClient" th:value="${orderDto.clientId}">
|
|
<div th:replace="common::errors('clientId')"></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="orderMechanic" class="col-sm-2 col-form-label" th:text="#{mechanic.label}"></label>
|
|
<div class="input-group col-sm-10" th:with="mechanicInitials=${(orderDto.mechanicId != null) ? (orderDto.mechanicFirstName + ' ' + orderDto.mechanicLastName) : null}">
|
|
<span class="input-group-prepend input-group-text" id="orderMechanicPlaceholder" th:text="${mechanicInitials}"></span>
|
|
<input type="text" name="mechanicId_tmp" class="form-control" id="orderMechanic_tmp" th:classappend="${#fields.hasErrors('mechanicId') ? 'is-invalid' : null}">
|
|
<input type="hidden" name="mechanicId" id="orderMechanic" th:value="${orderDto.mechanicId}">
|
|
<div th:replace="common::errors('mechanicId')"></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="orderCreatedOn" class="col-sm-2 col-form-label" th:text="#{createdOn.label}"></label>
|
|
<div class="input-group col-sm-10">
|
|
<input type="datetime-local" name="createdOnDate" class="form-control" id="orderCreatedOn" th:field="*{createdOnDate}" th:errorclass="is-invalid" th:value="${orderDto.createdOnDate}">
|
|
<span class="input-group-append input-group-text">
|
|
<i class="far fa-calendar"></i>
|
|
</span>
|
|
<div th:replace="common::errors('createdOnDate')"></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="orderFinishedOn" class="col-sm-2 col-form-label" th:text="#{finishedOn.label}"></label>
|
|
<div class="input-group col-sm-10">
|
|
<input type="datetime-local" name="finishedOnDate" class="form-control" id="orderFinishedOn" th:field="*{finishedOnDate}" th:errorclass="is-invalid" th:value="${orderDto.finishedOnDate}">
|
|
<span class="input-group-append input-group-text">
|
|
<i class="far fa-calendar"></i>
|
|
</span>
|
|
<div th:replace="common::errors('finishedOnDate')"></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="orderTotalPrice" class="col-sm-2 col-form-label" th:text="#{totalPrice.label}"></label>
|
|
<div class="input-group col-sm-10">
|
|
<input type="number" name="totalPrice" class="form-control" id="orderTotalPrice" th:field="*{totalPrice}" th:errorclass="is-invalid" th:value="${orderDto.totalPrice}">
|
|
<span class="input-group-append input-group-text">EUR</span>
|
|
<div th:replace="common::errors('totalPrice')"></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="orderStatus" class="col-sm-2 col-form-label" th:text="#{status.label}"></label>
|
|
<div class="col-sm-10">
|
|
<select name="orderStatus" class="form-control custom-select" id="orderStatus" th:field="*{orderStatus}" th:errorclass="is-invalid" th:value="${orderDto.orderStatus}">
|
|
<option th:each="orderStatus : ${orderStatuses}" th:value="${orderStatus.toString()}" th:text="${{orderStatus}}"></option>
|
|
</select>
|
|
<div th:replace="common::errors('orderStatus')"></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row float-right">
|
|
<div class="col-sm-12">
|
|
<a href="/order" class="btn btn-secondary" th:text="#{common.back.button}"></a>
|
|
<button type="submit" class="btn btn-primary" th:text="#{common.save.button}"></button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<th:block layout:fragment="scripts">
|
|
<script src="/webjars/jQuery-Autocomplete/1.4.9/jquery.autocomplete.min.js"></script>
|
|
<script src="/webjars/bootstrap-datetimepicker/2.4.2/js/bootstrap-datetimepicker.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
function initializeAutocomplete(entity, inputId) {
|
|
$('#' + inputId + '_tmp').autocomplete({
|
|
serviceUrl: '/api/autocomplete/' + entity,
|
|
paramName: "query",
|
|
minChars: 3,
|
|
transformResult: function(response) {
|
|
return {
|
|
suggestions: $.map($.parseJSON(response), function(item) {
|
|
var value = item.firstName;
|
|
if (item.middleName) {
|
|
value += (' ' + item.middleName);
|
|
}
|
|
value += (' ' + item.lastName)
|
|
return { value: value, data: item.id};
|
|
})
|
|
};
|
|
},
|
|
onSelect: function (suggestion) {
|
|
$('#' + inputId).val(suggestion.data);
|
|
$('#' + inputId + 'Placeholder').text(suggestion.value);
|
|
$('#' + inputId + '_tmp').val('');
|
|
},
|
|
showNoSuggestionNotice: true
|
|
});
|
|
}
|
|
|
|
function initializeDatetimePicker(field) {
|
|
$('#' + field).datetimepicker({
|
|
format: 'yyyy-mm-dd hh:mm:ss'
|
|
});
|
|
}
|
|
|
|
initializeAutocomplete('client', 'orderClient');
|
|
initializeAutocomplete('mechanic', 'orderMechanic');
|
|
|
|
initializeDatetimePicker('orderCreatedOn');
|
|
initializeDatetimePicker('orderFinishedOn');
|
|
</script>
|
|
</th:block>
|
|
|
|
</body>
|
|
</html> |