rengine/web/startScan/templates/organization/schedule_scan_ui.html

{% extends 'base/base.html' %}
{% load static %}

{% block title %}
Schedule Scan for Organization
{% endblock title %}


{% block custom_js_css_link %}
<link href="{% static 'plugins/jquery-step/jquery.steps.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'plugins/accordions/custom-accordions.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'plugins/flatpickr/flatpickr.min.css' %}" rel="stylesheet" type="text/css" />
{% endblock custom_js_css_link %}

{% block breadcrumb_title %}
<li class="breadcrumb-item"><a href="{% url 'list_organization' %}">Organization</a></li>
<li class="breadcrumb-item active">Schedule Scan</li>
<li class="breadcrumb-item active" aria-current="page">{{organization.name}}</li>
{% endblock breadcrumb_title %}

{% block page_title %}
Scheduling scan for {{organization.name}}
{% endblock page_title %}

{% block main_content %}
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-body">
        <h4 class="heading-title">{{ domain_list|length }} Domains associated with organization {{organization.name}}</h4>
        {% for domain in domain_list %}
        <span class="badge bg-dark m-1">{{domain.name}}</span>
        {% endfor %}
        <form method="POST" id="start-scan-form" class="mt-2">
          {% csrf_token %}
          <div id="schedule_scan_steps">
            <h4>Choose the scheduler</h4>
            <div class="">
              <div class="form-row">
                <select class="form-select" onchange="schedulerChanged(this)" name="scheduled_mode" style="line-height: 2.0;">
                  <option value="periodic">Periodic Scan</option>
                  <option value="clocked">Clocked Scan</option>
                </select>
              </div>
              <div class="tab-content" id="animateLineContent-4">
                <div class="tab-pane fade show active" id="periodic-div" role="tabpanel" aria-labelledby="periodic-tab-tab">
                  <div class="mb-4">
                    <h5>Run scan every</h5>
                    <div class="row">
                      <div class='col-4'>
                        <input id="t-text" type="number" name="frequency" value="30" class="form-control form-control-lg">
                      </div>
                      <div class="col-8">
                        <select class="form-select" name="frequency_type" style="line-height: 2.0;">
                          <option value="minutes">Minutes</option>
                          <option value="hours">Hours</option>
                          <option value="days">Days</option>
                          <option value="weeks">Weeks</option>
                          <option value="months">Months</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane fade" id="clocked-div" role="tabpanel" aria-labelledby="clocked-tab-tab">
                  <div class="mb-4">
                    <h5>Run scan exactly at</h5>
                    <div class="row">
                      <div class="col-12">
                        <div class="form-group mb-0">
                          <input type="text" id="clockedTime" class="form-control form-control-lg flatpickr flatpickr-input active" placeholder="Select Scheduler Date and time" name="scheduled_time">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <h4>Choose Scan Engine</h4>
            <div class="">
              <h4>Select Scan Engine</h4>
              {% if custom_engine_count == 0 %}
              <div class="alert bg-soft-primary border-0 mb-4" role="alert">
                <span><b>Tips! </b> You do not have any custom scan engines. Would you like to create your own scan engine?</span>
                <a href="{% url 'add_engine' %}" class="text-primary">Create Custom Scan Engine</a>
              </div>
              {% endif %}
              {% include "startScan/_items/scanEngine_select.html" %}
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock main_content %}


{% block page_level_script %}
<script src="{% static 'plugins/jquery-step/jquery.steps.min.js' %}"></script>
<script src="{% static 'plugins/flatpickr/flatpickr.min.js' %}"></script>
<script type="text/javascript">

function schedulerChanged(selectObject){
  selectedValue = selectObject.value;
  if (selectedValue == 'periodic') {
    var clockedDiv = document.getElementById("clocked-div");
    clockedDiv.classList.remove("show");
    clockedDiv.classList.remove("active");
    var periodicDiv = document.getElementById("periodic-div");
    periodicDiv.classList.add("show");
    periodicDiv.classList.add("active");
  }
  else if (selectedValue == 'clocked') {
    var periodicDiv = document.getElementById("periodic-div");
    periodicDiv.classList.remove("show");
    periodicDiv.classList.remove("active");
    var clockedDiv = document.getElementById("clocked-div");
    clockedDiv.classList.add("show");
    clockedDiv.classList.add("active");
  }
}


var buttonEnabled = true;
var globalTimeout = 0;


function disableNext(){
  var nextButton = $(".actions ul li:nth-child(2) a");
  nextButton.attr("href", "#");
  buttonEnabled = $(".actions ul li:nth-child(2)").addClass("disabled").attr("aria-disabled", "true");
}

function enableNext(){
  var nextButton = $(".actions ul li:nth-child(2) a");
  nextButton.attr("href", "#next");
  buttonEnabled = $(".actions ul li:nth-child(2)").removeClass("disabled").attr("aria-disabled", "false");
}


function updateButton(){
  var text = $("input[type=radio][name=scan_mode]").val();
  if(text === ''){
    disableNext();
    return false;
  }else{
    enableNext();
    return true;
  }
}

function initTimer() {
  if (globalTimeout) clearTimeout(globalTimeout);
  globalTimeout = setTimeout(updateButton, 400);
}

$(function(){
  $("#schedule_scan_steps").steps({
    headerTag: "h4",
    bodyTag: "div",
    transitionEffect: "slide",
    cssClass: 'pill wizard',
    enableKeyNavigation: false,
    onStepChanging: updateButton,
    labels: {finish: "Start Scan"},
    onInit :function (event, current) {
      $('a[role="menuitem"]').addClass('text-white');
      $(".actions ul li:nth-child(3) a").attr('onclick', `$(this).closest('form').submit()`);
      flatpickr(document.getElementById('clockedTime'), {
        enableTime: true,
        dateFormat: "Y-m-d H:i",
      });
      $(".basic").select2({
        minimumResultsForSearch: -1
      });
    },
    onStepChanged: function (event, currentIndex, priorIndex) {
      if (currentIndex == 1){
        $("input[type=radio][name=scan_mode]").change(initTimer).keyup(initTimer);
        disableNext();
      }
    }
  });

});

</script>
{% endblock page_level_script %}