<div class="container-sm pt-5">

​

​

<form id='ReceptionNoteForm' name='ReceptionNoteForm' class="needs-validation" novalidate>

​

      <div class="form-outline mb-4">

        <input type="text" id="NoteHeadline" name="NoteHeadline" class="form-control" />

        <label class="form-label" for="form3Example1">Overskrift</label>

      </div>

​

      <div class="form-outline mb-4">

        <textarea class="form-control" id="NoteText" name="NoteText" rows="4" required></textarea>

        <label class="form-label" for="textAreaExample">Besked på Receptionist</label>

        <div style="position: relative; top: -15px; left: 0px;" class="invalid-feedback">Besked teksten må ikke være tom<br></div>        

      </div>

​

​

      <div class="mb-4">

        <select class="form-control select" id="NoteColor" name="NoteColor">

          <option value="primary" data-mdb-icon="img/colorpicker-primary.png">Blå</option>

          <option value="success" data-mdb-icon="img/colorpicker-success.png">Grøn</option>

          <option value="warning" data-mdb-icon="img/colorpicker-warning.png" SELECTED>Gul</option>

          <option value="danger" data-mdb-icon="img/colorpicker-danger.png">Rød</option>

          <option value="secondary" data-mdb-icon="img/colorpicker-secondary.png">Lilla</option>

        </select>

        <label class="form-label select-label">Farve på note</label>

      </div>

​

​

      <div class="form-outline mb-4 datepicker-translated-note" data-mdb-toggle-button="false" required>

          <input type="text" id="ReceptionNote_Date" name="ReceptionNote_Date" data-mdb-toggle="datepicker" class="form-control"  value="18-11-2021" />

          <label class="form-label" for="ReceptionNote_Date">Vælg aktiv dato</label>    

          <button class="datepicker-toggle-button" data-mdb-toggle="datepicker">

              <i class="fa-duotone fa-calendar-days datepicker-toggle-icon" style="--fa-primary-color: black; --fa-secondary-color: blue;"></i>

          </button>  

      </div>

​

​

      <div class="row mb-4">

        <div class="col">

            <div class="form-outline timepicker-note-from" required>

              <input type="text" class="form-control" id="NoteFrom" name="NoteFrom"  data-mdb-toggle="timepicker" value="07:00" />

              <label class="form-label" for="TimeNoteFrom">Vælg fra (7:00-17:00)</label>

              <button tabindex="0" type="button" class="timepicker-toggle-button" data-mdb-toggle="timepicker">

                <i class="fa-duotone fa-clock-eight" style="--fa-primary-color: dimgray; --fa-secondary-color: limegreen;"></i>

              </button>

            </div>

        </div>

        <div class="col">

            <div class="form-outline timepicker-note-to" required>

              <input type="text" class="form-control" id="NoteTo" name="NoteTo"  data-mdb-toggle="timepicker" value="17:00" />

              <label class="form-label" for="TimeNoteTo">Vælg til (7:00-17:00)</label>

              <button tabindex="0" type="button" class="timepicker-toggle-button" data-mdb-toggle="timepicker">

                <i class="fa-duotone fa-clock-eight fa-flip-horizontal" style="--fa-primary-color: dimgray; --fa-secondary-color: red;"></i>

              </button>

            </div>

        </div>

      </div>

​

​

​

      <div id="NoteSuccessDIV" class="pb-4" style="display: none;"><i class="fa-regular fa-message-check text-success fa-lg"></i> <font class="text-success">Din note er gemt!</font></div>

​

  <!-- Submit button -->

  <button type="submit" id="ReceptionNoteBtn" form="ReceptionNoteForm" class="btn btn-primary btn-block mb-4">Gem Note</button>

</form>

</div>

​

            $(document).ready(function () {

                $("#ReceptionNoteForm").submit(function(e) {

                    console.log('Form Submit Entered')

                    e.preventDefault(); // avoid to execute the actual submit of the form.

​

                    var form = $('#ReceptionNoteForm');

                    var url = "insert_reception_note.asp"

​

                    var today = new Date();

                    var dd = String(today.getDate()).padStart(2, '0');

                    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!

                    var yyyy = today.getFullYear();

​

                    var tadasound = document.getElementById("tadaeffect");                    

​

                    today = dd + '-' + mm + '-' + yyyy;

​

                    $.ajax({

                          type: "POST",

                          url: url,

                          data: form.serialize(), // serializes the form's elements.

                          success: function(data)

                          {

​

                            tadasound.play();

                            tadasound.currentTime = 0;

​

                            $('#NoteSuccessDIV').fadeIn('slow', function(){

                              $('#NoteSuccessDIV').delay(5000).fadeOut(); 

                            });

​

                            $( "#NoteHeadline" ).val('');

                            $( "#NoteText" ).val('');

                            $( "#ReceptionNote_Date" ).val( today );      

                            $( "#NoteFrom" ).val("07:00");

                            $( "#NoteTo" ).val("17:00");  

                            $("#ReceptionNoteForm").removeClass('was-validated');

                            $("#ReceptionNoteForm").addClass('needs-validation');

​

​

​

                            const singleSelect = document.querySelector('#NoteColor');

                            const singleSelectInstance = mdb.Select.getInstance(singleSelect);

                            singleSelectInstance.setValue('warning');

​

                            $('#ReceptionNoteForm').focus().blur();

​

                            $.get( "get_reception_notes.asp", function( data ) {

                              if( data.NotesCount >= 1 ){

                                $( '#NoteStringDIV' ).html( data.NoteStringResponse );

                                $( '#ActiveNoteDIV' ).show();

                              }else if( data.NotesCount <= 0 ){

                                $( '#NoteStringDIV' ).hide();

                              }     

                            }, "json" )    

                      },

                      error:function(data){

                        $("#FeatureRequestSubmitError").show().fadeOut(10000); //===Show Error Message====

                        console.log('fejl')

                      }

                        });

                  });

​

​

               });