{% extends "base_logged.html" %}
{% block head %}
<script type="text/javascript" src="yaml.js"></script>
{% endblock %}
{% block page %}
<div id="page-wrapper">

<div class="row">
  <div class="col-lg-12">
    <h1>Module <small>Firewalld</small></h1>
    <ol class="breadcrumb">
      <li><a href="{{ url_for('index') }}"><i class="fa fa-dashboard"></i> SaltPad</a></li>
      <li class="active"><i class="fa fa-check-square"></i> Role {{ role }}</li>
    </ol>
  </div>
</div><!-- /.row -->

{{firewalld["firewalld"].update(base_zone={})}}
<div class="row" id="main">
  <button type="button" onclick="save();" class="btn btn-default">Save Firewalld for {{ role }}</button><br />
  <select id="select_zone" onChange="show()">
    {% for zone in firewalld["firewalld"] %}
      {% if zone != "base_zone" %}
    <option value="{{ zone }}" id="zone_{{ zone }}">{{ zone }}</option>
      {% endif %}
    {% endfor %}
  </select>
  <button type="button" onclick="remZone();" class="btn btn-default">delete zone</button><br />
  <input type="text" name="zone" id="zone_add"/>
  <button type="button" onclick="addZone();" class="btn btn-default">add zone</button>

  {% for zone in firewalld["firewalld"] %}
  <div class="zone" id="{{ zone }}">
    <!-- add description -->
    <div class="col-lg-12">
      <div class="table-responsive">
        <table class="table table-bordered table-hover tablesorter" id="maintainers">
          <thead>
            <tr>
              <th>Source</th>
              <th>Remove</th>
            </tr>
          </thead>
          <tbody id="{{ zone }}_source_table_body">
            {% if firewalld["firewalld"][zone] is defined %}
            {% for source in firewalld["firewalld"][zone]["source"] %}
            <tr id="{{ zone }}_source_{{ source }}">
              <td>{{ source }}</td>
              <td><button type="button" onclick="remValue('source','{{ source }}');" class="btn btn-default">remove {{ source }}</button></td>
            </tr>
            {% endfor %}
            {% endif %}
          </tbody>
        </table>
      </div>
      <div>
        <input type="text" name="source" id="{{ zone }}_source_add"/>
        <button type="button" onclick="addValue('source');" class="btn btn-default">add source</button>
      </div>
    </div>


    <div class="col-lg-12">
      <div class="table-responsive">
        <table class="table table-bordered table-hover tablesorter" id="maintainers">
          <thead>
            <tr>
              <th>Service</th>
              <th>Remove</th>
            </tr>
          </thead>
          <tbody id="{{ zone }}_service_table_body">
            {% if firewalld["firewalld"][zone] is defined %}
            {% for service in firewalld["firewalld"][zone]["service"] %}
            <tr id="{{ zone }}_service_{{ service }}">
              <td>{{ service }}</td>
              <td><button type="button" onclick="remValue('service','{{ service }}');" class="btn btn-default">remove {{ service }}</button></td>
            </tr>
            {% endfor %}
            {% endif %}
          </tbody>
        </table>
      </div>
      <div>
        <input type="text" name="service" id="{{ zone }}_service_add"/>
        <button type="button" onclick="addValue('service');" class="btn btn-default">add service</button>
      </div>
    </div>


    <div class="col-lg-12">
      <div class="table-responsive">
        <table class="table table-bordered table-hover tablesorter" id="maintainers">
          <thead>
            <tr>
              <th>Port</th>
              <th>Remove</th>
            </tr>
          </thead>
          <tbody id="{{ zone }}_port_table_body">
            {% if firewalld["firewalld"][zone] is defined %}
            {% for source in firewalld["firewalld"][zone]["port"] %}
            <tr id="{{ zone }}_port_{{ port }}">
              <td>{{ port }}</td>
              <td><button type="button" onclick="remValue('port','{{ port }}');" class="btn btn-default">remove {{ port }}</button></td>
            </tr>
            {% endfor %}
            {% endif %}
          </tbody>
        </table>
      </div>
      <div>
        <input type="text" name="port" id="{{ zone }}_port_add"/>
        <button type="button" onclick="addValue('port');" class="btn btn-default">add port</button>
      </div>
    </div>

    <div class="col-lg-12">
      <h2>Custom Rules</h2></br>
      <div class="table-responsive">
        <table class="table table-bordered table-hover tablesorter" id="maintainers">
          <thead>
            <tr>
              <th>Name</th>
              <th>Source</th>
              <th>Port</th>
              <th>Action</th>
              <th>Remove</th>
            </tr>
          </thead>
          <tbody id="{{ zone }}_rule_table_body">
            {% if firewalld["firewalld"][zone] is defined %}
            {% for rule in firewalld["firewalld"][zone]["rule"] %}
            <tr id="{{ zone }}_rule_{{ rule }}">
              <td>{{ rule }}</td>
              <td>{{ firewalld["firewalld"][zone]["rule"][rule]["source"] }}</td>
              <td>{{ firewalld["firewalld"][zone]["rule"][rule]["port"] }}</td>
              <td>{{ firewalld["firewalld"][zone]["rule"][rule]["action"] }}</td>
              <td><button type="button" onclick="remValue('rule','{{ rule }}');" class="btn btn-default">remove {{ rule }}</button></td>
            </tr>
            {% endfor %}
            {% endif %}
          </tbody>
        </table>
      </div>
      <div>
        Name: <input type="text" name="rule" id="{{ zone }}_rule_add_name"/>
        Source: <input type="text" name="rule" id="{{ zone }}_rule_add_source"/>
        Port: <input type="text" name="rule" id="{{ zone }}_rule_add_port"/>
        Action: <input type="text" name="rule" id="{{ zone }}_rule_add_action"/>
        <button type="button" onclick="addValue('rule');" class="btn btn-default">add rule</button>
      </div>
    </div>


    <div class="col-lg-12">
      <h2>Include</h2>
      <h3>include data from other zones to avoid rewriting it</h3>
      <div class="table-responsive">
        <table class="table table-bordered table-hover tablesorter" id="maintainers">
          <thead>
            <tr>
              <th>Zone</th>
              <th>Remove</th>
            </tr>
          </thead>
          <tbody id="{{ zone }}_include_table_body">
            {% if firewalld["firewalld"][zone] is defined %}
            {% for include in firewalld["firewalld"][zone]["include"] %}
            <tr id="{{ zone }}_include_{{ include }}">
              <td>{{ include }}</td>
              <td><button type="button" onclick="remValue('include','{{ include }}');" class="btn btn-default">remove {{ include }}</button></td>
            </tr>
            {% endfor %}
            {% endif %}
          </tbody>
        </table>
      </div>
      <div>
        <input type="text" name="include" id="{{ zone }}_include_add"/>
        <button type="button" onclick="addValue('include');" class="btn btn-default">add include</button>
      </div>
    </div>
</div>
{% endfor %}
<button type="button" onclick="save();" class="btn btn-default">Save Firewalld for {{ role }}</button> 
</div><!-- /.row -->
{% endblock %}

{% block scripts %}
<script type="text/javascript">
//build javascipt data from jinja data
var data = {{ firewalld | safe }};
delete data["firewalld"]["base_zone"];
console.log(data);

function addZone(){
  var zone = document.getElementById("zone_add").value;
  data["firewalld"][zone]={};
  var zone_cmb = document.getElementById("select_zone");
  var option = document.createElement("option");
  option.text = zone;
  option.value = zone;
  option.id = "zone_"+zone;

  //clone base_zone into new zone div
  var main = document.getElementById("main");
  var zonediv = document.getElementById("base_zone").cloneNode(true);
  zonediv.setAttribute('id', zone);
  zonediv.querySelector("#base_zone_source_table_body").setAttribute('id',zone+"_source_table_body");
  zonediv.querySelector("#base_zone_source_add").setAttribute('id',zone+"_source_add");
  zonediv.querySelector("#base_zone_service_table_body").setAttribute('id',zone+"_service_table_body");
  zonediv.querySelector("#base_zone_service_add").setAttribute('id',zone+"_service_add");
  zonediv.querySelector("#base_zone_port_table_body").setAttribute('id',zone+"_port_table_body");
  zonediv.querySelector("#base_zone_port_add").setAttribute('id',zone+"_port_add");
  zonediv.querySelector("#base_zone_rule_table_body").setAttribute('id',zone+"_rule_table_body");
  zonediv.querySelector("#base_zone_rule_add_name").setAttribute('id',zone+"_rule_add_name");
  zonediv.querySelector("#base_zone_rule_add_source").setAttribute('id',zone+"_rule_add_source");
  zonediv.querySelector("#base_zone_rule_add_port").setAttribute('id',zone+"_rule_add_port");
  zonediv.querySelector("#base_zone_rule_add_action").setAttribute('id',zone+"_rule_add_action");
  zonediv.querySelector("#base_zone_include_table_body").setAttribute('id',zone+"_include_table_body");
  zonediv.querySelector("#base_zone_include_add").setAttribute('id',zone+"_include_add");
  try{
    zone_cmb.appendChild(option,null);//Standard
    main.appendChild(zonediv,null);
  }catch(error){
    zone_cmb.appendChild(option);//IE only
    main.appendChild(zonediv);
  }
  console.log(data);
}
function remZone(){
  var zone = document.getElementById("select_zone").value;
  delete data["firewalld"][zone];
  document.getElementById("zone_"+zone).remove();
  document.getElementById(zone).remove();
  show();
  console.log(data);
}

//add value to source, service, port or include
function addValue(type){
  var zone = document.getElementById("select_zone").value;
  var tbody = document.getElementById(zone+"_"+type+"_table_body");
  var tr = document.createElement('tr');
  if (type != "rule"){
    var value = document.getElementById(zone+"_"+type+"_add").value;
    tr.id=zone+"_"+type+"_"+value;
    var tdv = document.createElement('td');
    tdv.appendChild(document.createTextNode(value));
    var tdr = document.createElement('td');
    var btn = document.createElement('button');
    btn.setAttribute("class", "btn btn-default");
    btn.setAttribute("onclick", "remValue('"+type+"','"+value+"');");
    btn.setAttribute("type", "button");
    btn.appendChild(document.createTextNode("remove "+value));
    if(data["firewalld"][zone][type] == null)
      data["firewalld"][zone][type]=[];
    data["firewalld"][zone][type].push(value);
    try{
      tr.appendChild(tdv,null);//Standard
      tdr.appendChild(btn,null);//Standard
      tr.appendChild(tdr,null);//Standard
    }catch(error){
      tr.appendChild(tdv);//Standard
      tdr.appendChild(btn);//Standard
      tr.appendChild(tdr);//Standard
    }
  }else{
    var name = document.getElementById(zone+"_rule_add_name").value;
    var src = document.getElementById(zone+"_rule_add_source").value;
    var port = document.getElementById(zone+"_rule_add_port").value;
    var action = document.getElementById(zone+"_rule_add_action").value;

    tr.id=zone+"_"+type+"_"+name;
    var tdn = document.createElement('td');
    tdn.appendChild(document.createTextNode(name));
    var tds = document.createElement('td');
    tds.appendChild(document.createTextNode(src));
    var tdp = document.createElement('td');
    tdp.appendChild(document.createTextNode(port));
    var tda = document.createElement('td');
    tda.appendChild(document.createTextNode(action));
    var tdr = document.createElement('td');
    var btn = document.createElement('button');
    btn.setAttribute("class", "btn btn-default");
    btn.setAttribute("onclick", "remValue('"+type+"','"+name+"');");
    btn.setAttribute("type", "button");
    btn.appendChild(document.createTextNode("remove "+name));

    if(data["firewalld"][zone][type] == null)
      data["firewalld"][zone][type]={};
    data["firewalld"][zone][type][name]={};
    data["firewalld"][zone][type][name]["source"]=src;
    data["firewalld"][zone][type][name]["port"]=port;
    data["firewalld"][zone][type][name]["action"]=action;

    try{
      tr.appendChild(tdn,null);//Standard
      tr.appendChild(tds,null);
      tr.appendChild(tdp,null);
      tr.appendChild(tda,null);
      tdr.appendChild(btn,null);
      tr.appendChild(tdr,null);
    }catch(error){
      tr.appendChild(tdn);//IE Only
      tr.appendChild(tds);
      tr.appendChild(tdp);
      tr.appendChild(tda);
      tdr.appendChild(btn);
      tr.appendChild(tdr);
    }
  }
  try{
    tbody.appendChild(tr,null);//Standard
  }catch(error){
    tbody.appendChild(tr);//IE Only
  }
  console.log(data);
}
//add value from source, service, port, rule or include
function remValue(type,value){
  var zone = document.getElementById("select_zone").value;
  //remove from data
  if(type != "rule"){
    index = data["firewalld"][zone][type].indexOf(value)
    if(index != -1)
      data["firewalld"][zone][type].splice(index,1);
  }else{
    delete data["firewalld"][zone][type][value];
  }
  //remove from document
  console.log(zone+"_"+type+"_"+value);
  document.getElementById(zone+"_"+type+"_"+value).remove();
  console.log(data);
}

function save(){
  jstr = JSON.stringify(data);
  var request = new XMLHttpRequest();
  request.open('POST', '{{ url_for('firewalld_save',role=role) }}', true);
  request.setRequestHeader('Content-Type', 'application/json');
  request.send(jstr);
  //convert data to yaml w/ tabspace of 2 and depth of 20 (should be greater then max depth)
  console.log(jstr);
}

function show(){
  console.log("hiding");
  elements = document.getElementsByClassName("zone");
  for (var i = 0; i < elements.length; i++) {
     elements[i].style.display = "none";
  }
  console.log("showing");
  document.getElementById(document.getElementById("select_zone").value).style.display="block";
}
show();
</script>
{% endblock %}