Add project files.

Views/Home/Index.cshtml

@@ -0,0 +1,133 @@
+@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>
+}

Views/Shared/Error.cshtml

@@ -0,0 +1,25 @@
+@model ErrorViewModel
+@{
+    ViewData["Title"] = "Error";
+}
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+@if (Model.ShowRequestId)
+{
+    <p>
+        <strong>Request ID:</strong> <code>@Model.RequestId</code>
+    </p>
+}
+
+<h3>Development Mode</h3>
+<p>
+    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+</p>
+<p>
+    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+    It can result in displaying sensitive information from exceptions to end users.
+    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    and restarting the app.
+</p>

Views/Shared/_Layout.cshtml

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en,"
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>rPiNVR</title>
+    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="~/lib/jquery-ui/jquery-ui.min.css" />
+    <link href="~/css/rpinvr.css" rel="stylesheet" />
+</head>
+<body>
+    @RenderBody()
+
+    <script src="~/lib/jquery/dist/jquery.min.js"></script>
+    <script src="~/lib/jquery-ui/jquery-ui.min.js"></script>
+    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    @await RenderSectionAsync("Scripts", required: false)
+</body>
+</html>

Views/Shared/_Layout.cshtml.css

@@ -0,0 +1,48 @@
+/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
+for details on configuring this project to bundle and minify static web assets. */
+
+a.navbar-brand {
+  white-space: normal;
+  text-align: center;
+  word-break: break-all;
+}
+
+a {
+  color: #0077cc;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #1b6ec2;
+  border-color: #1861ac;
+}
+
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+  color: #fff;
+  background-color: #1b6ec2;
+  border-color: #1861ac;
+}
+
+.border-top {
+  border-top: 1px solid #e5e5e5;
+}
+.border-bottom {
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.box-shadow {
+  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
+}
+
+button.accept-policy {
+  font-size: 1rem;
+  line-height: inherit;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  white-space: nowrap;
+  line-height: 60px;
+}

Views/Shared/_ValidationScriptsPartial.cshtml

@@ -0,0 +1,2 @@
+<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
+<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

Views/_ViewImports.cshtml

@@ -0,0 +1,3 @@
+@using rPiNVR
+@using rPiNVR.Models
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Views/_ViewStart.cshtml

@@ -0,0 +1,3 @@
+@{
+    Layout = "_Layout";
+}