Building new test form

Added CRUD for tests

ref-test/admin/static/css/style.css

@@ -27,7 +27,7 @@ body {
     margin: auto;
 }
 
-.form-signin-heading {
+.form-heading {
     margin-bottom: 2rem;
 }
 
@@ -65,6 +65,10 @@ body {
     border-bottom: 2px solid #585858;
 }
 
+.form-label-group input:active, .form-label-group input:focus {
+    background-color: transparent;
+}
+
 .form-label-group input::-webkit-input-placeholder {
     color: transparent;
 }
@@ -149,6 +153,50 @@ table.dataTable {
     width: 100%;
 }
 
+.alert-db-empty {
+    width: 100%;
+    max-width: 720px;
+    font-size: 14pt;
+    margin: 20px auto;
+}
+
+.form-date-input, .form-select-input {
+    position: relative;
+    margin: 2rem 0;
+}
+
+.form-date-input input,
+.form-date-input label, .form-select-input select, .form-select-input label {
+    padding: var(--input-padding-y) var(--input-padding-x);
+    font-size: 16pt;
+    width: 100%;
+    background-color: transparent;
+    border: none;
+    border-bottom: 2px solid #585858;
+}
+
+.datepicker::-webkit-calendar-picker-indicator {    
+    border: 1px;
+    border-color: gray;
+    border-radius: 10%;
+}
+
+.form-date-input label, .form-select-input label {
+    /* position: absolute; */
+    /* top: 0;
+    left: 0; */
+    display: block;
+    width: 100%;
+    margin-bottom: 0; /* Override default `<label>` margin */
+    line-height: 1.5;
+    color: #495057;
+    cursor: text; /* Match the input under the label */
+    border: 1px solid transparent;
+    border-radius: .25rem;
+    transition: all .1s ease-in-out;
+    z-index: -1;
+}
+
 /* Fallback for Edge
 -------------------------------------------------- */
 @supports (-ms-ime-align: auto) {

ref-test/admin/static/js/script.js

@@ -350,6 +350,49 @@ $('form[name=form-update-account]').submit(function(event) {
     event.preventDefault();
 });
 
+$('form[name=form-create-test]').submit(function(event) {
+    
+    var $form = $(this);
+    var alert = document.getElementById('alert-box');
+    var data = $form.serialize();
+    console.log(data)
+    alert.innerHTML = ''
+
+    $.ajax({
+        url: window.location.pathname,
+        type: 'POST',
+        data: data,
+        dataType: 'json',
+        success: function(response) {
+            window.location.reload();
+        },
+        error: function(response) {
+            console.log(response.responseJSON)
+            if (typeof response.responseJSON.error === 'string' || response.responseJSON.error instanceof String) {
+                alert.innerHTML = alert.innerHTML + `
+                <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                    <i class="bi bi-exclamation-triangle-fill" title="Danger"></i>
+                    ${response.responseJSON.error}
+                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                </div>
+                `;
+            } else if (response.responseJSON.error instanceof Array) {
+                for (var i = 0; i < response.responseJSON.error.length; i ++) {
+                    alert.innerHTML = alert.innerHTML + `
+                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                        <i class="bi bi-exclamation-triangle-fill" title="Danger"></i>
+                        ${response.responseJSON.error[i]}
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                    </div>
+                    `;
+                }
+            }
+        }
+    });
+
+    event.preventDefault();
+});
+
 // Dismiss Cookie Alert
 $('#dismiss-cookie-alert').click(function(event){