89 lines
2.9 KiB
Plaintext

@{
ViewData["Title"] = "CreateProcedure";
}
@{
<div class="text-center">
<h2 class="display-4">Создание процедуры</h2>
</div>
}
<form method="post">
<div class="row">
<div class="col-4">Название процедуры:</div>
<div class="col-8"><input type="text" name="procedurename" id="procedurename"/></div>
</div>
<div class="row">
<div class="col-4">Тип:</div>
<div class="col-8"><input type="text" id="proceduretype" name="proceduretype" value="@Model?.Type" /></div>
</div>
<div class="row">
<div class="col-4">Добавление лекарств</div>
<div class="col-8">
<div class="row">
<div class="col-6">
<select id="medicines" name="medicines" class="form-control" asp-items="@(new SelectList(@ViewBag.Medicines,"Id", "MedicinesName"))"></select>
</div>
<div class="col-6">
<button type="button" class="btn btn-success" onclick="addMedicine()">Добавить</button>
</div>
</div>
</div>
</div>
<div class="row">
<p class="text-center"><strong>Лекарства</strong></p>
<table id="medicinesTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>Название</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var medicine in Model.ProcedureMedicine)
{
<tr>
<td>@medicine.Value.MedicinesName</td>
<td>
<button type="button" class="btn btn-danger" data-id="@medicine.Key" onclick="removeMedicine('@medicine.Key')">Удалить</button>
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="row">
<div class="col-8"></div>
<div class="col-4"><input type="submit" value="Создать" class="btn btn-primary" /></div>
</div>
</form>
@section scripts {
<script>
var procedureMedicine = @Json.Serialize(Model.ProcedureMedicine);
function addMedicine() {
var medicineId = $('#medicines').val();
var medicinesName = $('#medicines option:selected').text();
if (procedureMedicine.hasOwnProperty(medicineId)) {
alert('This medicine is already added.');
return;
}
procedureMedicine[medicineId] = { Id: medicineId, MedicinesName: medicinesName };
var row = $('<tr>').append($('<td>').text(medicinesName));
var removeButton = $('<button>').text('Удалить').attr('data-id', medicineId).attr('class', 'btn btn-danger').click((function (id) {
return function () {
removeMedicine(id);
};
})(medicineId));
row.append($('<td>').append(removeButton));
$('#medicinesTable tbody').append(row);
var input = $('<input>').attr('type', 'hidden').attr('name', 'ProcedureMedicine[' + medicineId + ']').val(medicineId);
$('#procedures-form').append(input);
}
function removeMedicine(medicineId) {
delete procedureMedicine[medicineId];
$('#medicinesTable button[data-id="' + medicineId + '"]').closest('tr').remove();
$('#procedures-form input[name="ProcedureMedicine[' + medicineId + ']"]').remove();
}
</script>
}