rengine/startScan/templates/startScan/schedule_scan_ui.html

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

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


{% block custom_js_css_link %}>
<link rel="stylesheet" type="text/css" href="{% static 'assets/css/custom.css' %}">
<link href="{% static 'assets/css/components/custom-list-group.css' %}" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static 'assets/css/elements/alert.css' %}">
<link href="{% static 'assets/css/components/tabs/custom-tabs.css' %}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="{% static 'plugins/bootstrap-select/bootstrap-select.min.css' %}">
<link href="{% static 'plugins/flatpickr/flatpickr.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'assets/css/components/tabs/custom-accordions.css' %}" rel="stylesheet" type="text/css" />
{% endblock custom_js_css_link %}

{% block breadcrumb_title %}
Schedule Scan for {{domain.domain_name}}
{% endblock breadcrumb_title %}

{% block main_content %}
<div class="col-lg-12 layout-spacing">
  <div class="statbox widget box box-shadow">
    <div class="widget-header">
      <div class="row">
        <div class="col-12">
          <h4 class="text-info">Schedule scan for <span class="text-danger">{{domain.domain_name}}</span></h4>
        </div>
      </div>
    </div>
    <div class="widget-content widget-content-area">
      <form method="POST">
        {% csrf_token %}
        <div class="form-row">
          <div class="col-md-12 mb-4">
            <h6 class="mb-4">Choose the scheduler</h6>
            <select class="selectpicker" data-width='100%' onchange="schedulerChanged(this)" name="scheduled_mode">
              <option value="periodic">Periodic Scan</option>
              <option value="clocked">Clocked Scan</option>
            </select>
            <div class="widget-content widget-content-area animated-underline-content">
              <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">
                    <p>Run scan every</p>
                    <div class="row">
                      <div class='col-4'>
                        <input id="t-text" type="number" name="frequency" placeholder="10" class="form-control">
                      </div>
                      <div class='col-8'>
                        <select class="selectpicker" data-width='100%' name="frequency_type">
                          <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">
                    <p>Run scan exactly at</p>
                    <div class="row">
                      <div class="col-12">
                        <div class="form-group mb-0">
                          <input id="clockedTime" value="{% now "Y-m-d H:i" %}" class="form-control flatpickr flatpickr-input active" type="text" placeholder="Select Date and time" name="scheduled_time">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form-row">
          <div class="col-md-12 mb-4">
            <h6>Select the scan type</h6>
            {% if custom_engine_count == 0 %}
            <div class="alert custom-alert-1 mb-4" role="alert">
              <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"  data-dismiss="alert" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
              <div class="media">
                <div class="alert-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
                </div>
                <div class="media-body">
                  <div class="alert-text">
                    <span><b>Tips! </b>You don't have any custom engines! Did you know you can create your own scan engine?</span>
                  </div>
                  <div class="alert-btn">
                    <a href="{% url 'add_engine' %}" class="btn btn-default btn-dismiss">Create Engine</a>
                  </div>
                </div>
              </div>
            </div>
            {% endif %}
            {% include "startScan/_items/scanEngine_select.html" %}
            <div>
              <button class="btn btn-primary submit-fn mt-2 float-right" type="submit"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather table-scan feather-zap" id="myInput" value="helloworld">
                <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
              </svg> Schedule Scan</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock main_content %}


{% block page_level_script %}
<script src="{% static 'assets/js/scrollspyNav.js' %}"></script>
<script src="{% static 'plugins/bootstrap-select/bootstrap-select.min.js' %}"></script>
<script src="{% static 'plugins/flatpickr/flatpickr.js' %}"></script>
<script type="text/javascript">
var dateTimepicker = flatpickr(document.getElementById('clockedTime'), {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
});
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");
  }
}
</script>
{% endblock page_level_script %}