134 lines
4.5 KiB
Plaintext
134 lines
4.5 KiB
Plaintext
@using rPiNVR.Models
|
|
@model List<int>
|
|
@{
|
|
var cameras = ViewData["available"] as List<Camera>;
|
|
}
|
|
|
|
<div class="d-flex flex-row fullheight">
|
|
<div class="left">
|
|
<h1>Camera List</h1>
|
|
<div>
|
|
<label for="numcams">Number of cameras</label>
|
|
<select id="numcams" name="numcams" title="Number of cameras">
|
|
<option value=1>1</option>
|
|
<option value=4>4</option>
|
|
<option value=6>6</option>
|
|
</select>
|
|
</div>
|
|
@foreach (Camera cam in cameras)
|
|
{
|
|
<div class="camera border" data-id="@cam.id">@cam.name</div>
|
|
}
|
|
<div><button id="upload" type="button" value="">Upload</button></div>
|
|
<div><button id="stop" type="button" value="">Stop Cameras</button></div>
|
|
</div>
|
|
<div class="right">
|
|
<table class="table table-bordered align-middle text-center">
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<form method="post">
|
|
@for (var idx = 0; idx < Model.Count; idx++)
|
|
{
|
|
<input type="hidden" id="cams_@idx" name="cams[@idx]" value="@Model[idx]" />
|
|
}
|
|
</form>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script>
|
|
function selectCamera(cell, camera) {
|
|
cell.data("id", camera.data("id"));
|
|
cell.html(camera.html());
|
|
//camera.hide();
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
$('#numcams').on('change', function () {
|
|
var numcams = $(this).val();
|
|
var html = '';
|
|
var rows = 0;
|
|
var cols = 0;
|
|
if (numcams == 1) {
|
|
rows = 1;
|
|
cols = 1;
|
|
}
|
|
else if (numcams == 4) {
|
|
rows = 2;
|
|
cols = 2;
|
|
}
|
|
else if (numcams == 6) {
|
|
rows = 2;
|
|
cols = 3;
|
|
}
|
|
var cell = 0;
|
|
for (row = 0; row < rows; row++) {
|
|
html += "<tr>";
|
|
for (col = 0; col < cols; col++) {
|
|
html += "<td style='height:" + (100 / rows) + "%;width:" + (100 / cols) + "%;' data-cell='" + cell++ + "'></td>";
|
|
}
|
|
html += "</tr>"
|
|
}
|
|
$("tbody").html(html);
|
|
//$('.camera').show();
|
|
|
|
$('.camera').draggable({
|
|
revert: true,
|
|
cursor: "clone",
|
|
helper: "original"
|
|
});
|
|
$('td').droppable({
|
|
accept: ".camera",
|
|
drop: function (event, ui) {
|
|
// $('.camera[data-id=' + $(this).data('id') + ']').show();
|
|
selectCamera($(this), $(event.originalEvent.target));
|
|
}
|
|
});
|
|
});
|
|
|
|
$("#numcams>option[value=@Model.Count]").attr('selected', 'selected');
|
|
$("#numcams").trigger("change");
|
|
|
|
var initialCams = Array(@Model.Count);
|
|
|
|
@for (var i = 0; i < Model.Count; i++)
|
|
{
|
|
@Html.Raw($"initialCams[{i}] = {Model[i]};")
|
|
}
|
|
|
|
initialCams.forEach(function (value, idx) {
|
|
var camera = $('.camera[data-id=' + value + ']');
|
|
var cell = $('td[data-cell=' + idx + ']');
|
|
selectCamera(cell, camera);
|
|
});
|
|
|
|
$('#upload').on('click', function () {
|
|
var cams = $('td:data("id")');
|
|
if (cams.length == 0)
|
|
alert('you must place at least one camera');
|
|
var numcams = parseInt($('#numcams').val());
|
|
var camArray = Array.from(cams);
|
|
var formdata = "";
|
|
camArray.forEach(function (cam, idx) {
|
|
var channel = $(cam).data('id');
|
|
var cell = $(cam).data('cell');
|
|
formdata += `<input type="hidden" id="cams_${idx}" name="cams[${idx}]" value="${channel}" />`;
|
|
});
|
|
$('form').html(formdata);
|
|
$('form').trigger('submit');
|
|
});
|
|
|
|
$('#stop').on('click', function () {
|
|
$.ajax({
|
|
url: "@Url.Action("StopCameras")",
|
|
type: "GET",
|
|
success: function () {
|
|
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
}
|