{% extends FUNC_BASE_HTML %}
{% load i18n %}



{% block css %}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/jquery/ui/1.11.1/themes/smoothness/jquery-ui.min.css" />
{{ block.super }}
<style type="text/css">
<!--

.ui-widget-overlay {
        opacity:0;
        filter:Alpha(Opacity=0);
}

.my-table1 {
	width: 100%;
	margin: 0 auto;
}
.my-table1 {
	border-collapse: collapse;
	border: 1px solid #000000;
	table-layout: fixed;
}
.my-table1 thead th {
	color: #ffffff;
	text-align: left;
	padding: 2px 10px;
	background: #414141;
	font-weight: bold;
}
.my-table1 tbody th,
.my-table1 tbody td {
	padding: 2px 10px;
	border-bottom: 1px dotted #000000;
	overflow: hidden;
	text-overflow: ellipsis;
}

.my-dialog1 ul {
  list-style-type: none;
}

#id_create_dialog ol {
	margin-left: 2em;
}
-->
</style>
{% endblock css %}



{% block js %}
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery/1.10.2/jquery-1.10.2.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery/ui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript">
<!--
(function($) {
  $(function() {

    function _waiting (mode) {
      if (mode) {
        try {
          parent.wait.start();
        } catch (e) {
        }
      } else {
        try {
          parent.wait.stop();
        } catch (e) {
        }
      }
    }
    function _resize () {
      try {
        parent.iFrameResize();
      } catch (e) {
      }
    }

    function setItemVisibility(contractor_item, plan_item, authmethod_item,
      otherauthmethod_item) {

      var contractor = contractor_item.val();
      var plan = plan_item.val();
      var authmethod = authmethod_item.val();
      var otherauthmethod = otherauthmethod_item.val();

      if (contractor == "west") {
          $(".setting_plan").hide();
          $(".setting_authmethod").hide();
          $(".setting_otherauthmethod").hide();
          $(".setting_terminalkey").hide();
      }
      else if (contractor == "other") {
          $(".setting_plan").hide();
          $(".setting_authmethod").hide();
          $(".setting_otherauthmethod").show();
          if (otherauthmethod == "terminal_auth") {
            $(".setting_terminalkey").show();
          }
          else {
            $(".setting_terminalkey").hide();
          }
      }
      else {
          $(".setting_plan").show();
          if (plan == "azukeru_pro") {
            $(".setting_authmethod").show();
            $(".setting_otherauthmethod").hide();
            if (authmethod == "terminal_auth") {
                $(".setting_terminalkey").show();
            }
            else {
                $(".setting_terminalkey").hide();
            }
          }
          else if (plan == "azukeru_aio") {
            $(".setting_authmethod").hide();
            $(".setting_otherauthmethod").hide();
            $(".setting_terminalkey").show();
          }
          else {
            $(".setting_authmethod").hide();
            $(".setting_otherauthmethod").hide();
            $(".setting_terminalkey").hide();
          }
      }
    }

    function setCreateItemVisibility() {
      setItemVisibility($('#{{ create_form.contractor.auto_id }}'),
                        $('#{{ create_form.plan.auto_id }}'),
                        $('#{{ create_form.authmethod.auto_id }}'),
                        $('#{{ create_form.otherauthmethod.auto_id }}'));
    }

    function setUpdateItemVisibility() {
      setItemVisibility($('#{{ update_form.contractor.auto_id }}'),
                        $('#{{ update_form.plan.auto_id }}'),
                        $('#{{ update_form.authmethod.auto_id }}'),
                        $('#{{ update_form.otherauthmethod.auto_id }}'));
    }

    var _profiles = [
      {% for profile in profiles %}
        {
          password: '{{ profile.password }}',
          clientid: '{{ profile.clientid }}',
          contractor: '{{ profile.contractor }}',
          plan: '{{ profile.plan }}',
          authmethod: '{{ profile.authmethod }}',
          otherauthmethod: '{{ profile.otherauthmethod }}',
          terminalkey: '{{ profile.terminalkey }}',
          name: '{{ profile.name }}',
          pk: '{{ profile.pk }}'
        }{% if not forloop.last %},{% endif %}
      {% endfor %}
    ];
    function _get_profile (pk) {
      var _profile = null;
      $.each(_profiles, function(index, profile) {
        if (profile.pk == pk) {
          _profile = profile;
        }
      });
      return _profile;
    }

    $('[data-op="create"]').each(function(index, button) {
      var $button = $(button);
      var $dialog = $('#id_create_dialog');
      var $form = $('form', $dialog);
      var $createButton = $('input[type="submit"][name="create"]');
      $dialog.dialog({
        title: '作成',
        modal: true,
        draggable: false,
        resizable: false,
        width: 400,
        buttons: [
          {
            text: 'OK',
            click: function(e) {
              _waiting(true);
              $createButton.trigger('click');
            }
          },
          {
            text: 'Cancel',
            click: function(e) {
              $dialog.dialog('close');
              _resize();
            }
          }
        ],
        autoOpen: false
      });
      $button.on('click', function(e) {
        $form.get(0).reset();
	$dialog.dialog('open');
        setCreateItemVisibility();
        _resize();
      });
    });

    $('[data-op="update"]').each(function(index, button) {
      var $button = $(button);
      var $dialog = $('#id_update_dialog');
      var $form = $('form', $dialog);
      var $updateButton = $('input[type="submit"][name="update"]');
      var pk = $button.data('pk');
      $dialog.dialog({
        title: '変更',
        modal: true,
        draggable: false,
        resizable: false,
        width: 400,
        buttons: [
          {
            text: 'OK',
            click: function(e) {
              _waiting(true);
              $updateButton.trigger('click');
            }
          },
          {
            text: 'Cancel',
            click: function(e) {
              $dialog.dialog('close');
              _resize();
            }
          }
        ],
        autoOpen: false
      });
      $button.on('click', function(e) {
        var profile = _get_profile(pk);
        $('#{{ update_form.pk.auto_id }}').val(profile.pk);
        $('#{{ update_form.name.auto_id }}').val(profile.name);
        $('#{{ update_form.contractor.auto_id }}').val(profile.contractor);
        $('input[name="{{ update_form.contractor.html_name }}"]').val([profile.contractor]);
        $('#{{ update_form.plan.auto_id }}').val(profile.plan);
        $('input[name="{{ update_form.plan.html_name }}"]').val([profile.plan]);
        $('#{{ update_form.authmethod.auto_id }}').val(profile.authmethod);
        $('input[name="{{ update_form.authmethod.html_name }}"]').val([profile.authmethod]);
        $('#{{ update_form.otherauthmethod.auto_id }}').val(profile.otherauthmethod);
        $('input[name="{{ update_form.otherauthmethod.html_name }}"]').val([profile.otherauthmethod]);
        $('#{{ update_form.terminalkey.auto_id }}').val(profile.terminalkey);
        $('#{{ update_form.clientid.auto_id }}').val(profile.clientid);
        $('#{{ update_form.password.auto_id }}').val(profile.password);
        $dialog.dialog('open');
        setUpdateItemVisibility();
        _resize();
      });
    });

    $('[data-op="delete"]').each(function(index, button) {
      var $button = $(button);
      var $dialog = $('#id_delete_dialog');
      var $form = $('form', $dialog);
      var $deleteButton = $('input[type="submit"][name="delete"]');
      var pk = $button.data('pk');
      $dialog.dialog({
        title: '削除',
        modal: true,
        draggable: false,
        resizable: false,
        width: 400,
        buttons: [
          {
            text: 'OK',
            click: function(e) {
              _waiting(true);
              $deleteButton.trigger('click');
            }
          },
          {
            text: 'Cancel',
            click: function(e) {
              $dialog.dialog('close');
              _resize();
            }
          }
        ],
        autoOpen: false
      });
      $button.on('click', function(e) {
        var profile = _get_profile(pk);
        $('#{{ delete_form.pk.auto_id }}').val(profile.pk);
        $dialog.dialog('open');
        _resize();
      });
    });

    $('[data-op="test"]').each(function(index, button) {
      var $button = $(button);
      var pk = $button.data('pk');
      $button.on('click', function(e) {
        _waiting(true);
        $.ajax({
          url: './test:'+ pk,
          type: 'GET',
          cache: false,
          dataType: 'json',
          timeout: 300 * 1000
        })
          .done(function(data, textStatus, jqXHR) {
            var msg = data['success'] ? '接続テスト成功' : '接続テスト失敗';
            alert(msg);
          })
          .fail(function(jqXHR, textStatus, errorThrown) {
          })
          .always(function(data_or_jqXHR, textStatus, jqXHR_or_errorThrown) {
            _waiting(false);
          });
      });
    });

    $('#{{ create_form.contractor.auto_id }}').on('change', function(e) {
      setCreateItemVisibility();
    });

    $('#{{ create_form.plan.auto_id }}').on('change', function(e) {
      setCreateItemVisibility();
    });

    $('#{{ create_form.authmethod.auto_id }}').on('change', function(e) {
      setCreateItemVisibility();
    });

    $('#{{ create_form.otherauthmethod.auto_id }}').on('change', function(e) {
      setCreateItemVisibility();
    });

    $('#{{ update_form.contractor.auto_id }}').on('change', function(e) {
      setUpdateItemVisibility();
    });

    $('#{{ update_form.plan.auto_id }}').on('change', function(e) {
      setUpdateItemVisibility();
    });

    $('#{{ update_form.authmethod.auto_id }}').on('change', function(e) {
      setUpdateItemVisibility();
    });

    $('#{{ update_form.otherauthmethod.auto_id }}').on('change', function(e) {
      setUpdateItemVisibility();
    });
  });
})($.noConflict(true));
//-->
</script>
{{ block.super }}
{% endblock js %}


{% block form %}{% endblock form %}{% block endform %}{% endblock endform %}
{% block to_ajaxform %}{% endblock to_ajaxform %}
{% block ajaxform_modified %}{{ block.super }}{% endblock ajaxform_modified %}


{% block function %}
<div class="basic_function"><div style="padding:0 5%;">
  <div style="width:100%;margin-bottom:4px;text-align:right;">
    <button
      class="button_1"
      data-op="create"
      type="button"
    >追加</button>
  </div>
  <table class="my-table1">
    <thead>
      <tr>
        <th>接続名</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      {% for profile in profiles %}
        <tr>
          <td>
            {{ profile.name }}
          </td>
          <td>
            <button
              class="button_1"
              data-op="update"
              data-pk="{{ profile.pk }}"
              type="button"
            >変更</button>
            <button
              class="button_1"
              data-op="delete"
              data-pk="{{ profile.pk }}"
              type="button"
            >削除</button>
            <button
              class="button_1"
              data-op="test"
              data-pk="{{ profile.pk }}"
              type="button"
            >接続テスト</button>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div></div>

<div style="display:none;">

  <div id="id_create_dialog" class="my-dialog1">
    <form action="" method="post" autocomplete="off" onkeypress="if(event.keyCode==13)return false;else return true;">{% csrf_token %}
      <table>
        <tr>
          <th>{{ create_form.name.label_tag }}</th>
          <td>{{ create_form.name }}</td>
        </tr>
        <tr>
          <th>{{ create_form.contractor.label_tag }}</th>
          <td>{{ create_form.contractor }}</td>
        </tr>
        <tr class ="setting_plan">
          <th>{{ create_form.plan.label_tag }}</th>
          <td>{{ create_form.plan }}</td>
        </tr>
        <tr class ="setting_authmethod">
          <th>{{ create_form.authmethod.label_tag }}</th>
          <td>{{ create_form.authmethod }}</td>
        </tr>
        <tr class ="setting_otherauthmethod">
          <th>{{ create_form.otherauthmethod.label_tag }}</th>
          <td>{{ create_form.otherauthmethod }}</td>
        </tr>
        <tr class ="setting_terminalkey">
          <th>{{ create_form.terminalkey.label_tag }}</th>
          <td>{{ create_form.terminalkey }}</td>
        </tr>
        <tr>
          <th>{{ create_form.clientid.label_tag }}</th>
          <td>{{ create_form.clientid }}</td>
        </tr>
        <tr>
          <th>{{ create_form.password.label_tag }}</th>
          <td>{{ create_form.password }}</td>
        </tr>
      </table>
      <input type="submit" name="create" style="display:none;" />
    </form>
  </div>

  <div id="id_update_dialog" class="my-dialog1">
    <form action="" method="post" autocomplete="off" onkeypress="if(event.keyCode==13)return false;else return true;">{% csrf_token %}
      {{ update_form.pk }}
      <table>
        <tr>
          <th>{{ update_form.name.label_tag }}</th>
          <td>{{ update_form.name }}</td>
        </tr>
        <tr>
          <th>{{ update_form.contractor.label_tag }}</th>
          <td>{{ update_form.contractor }}</td>
        </tr>
        <tr class ="setting_plan">
          <th>{{ update_form.plan.label_tag }}</th>
          <td>{{ update_form.plan }}</td>
        </tr>
        <tr class ="setting_authmethod">
          <th>{{ update_form.authmethod.label_tag }}</th>
          <td>{{ update_form.authmethod }}</td>
        </tr>
        <tr class ="setting_otherauthmethod">
          <th>{{ update_form.otherauthmethod.label_tag }}</th>
          <td>{{ update_form.otherauthmethod }}</td>
        </tr>
        <tr class ="setting_terminalkey">
          <th>{{ update_form.terminalkey.label_tag }}</th>
          <td>{{ update_form.terminalkey }}</td>
        </tr>
        <tr>
          <th>{{ update_form.clientid.label_tag }}</th>
          <td>{{ update_form.clientid }}</td>
        </tr>
        <tr>
          <th>{{ update_form.password.label_tag }}</th>
          <td>{{ update_form.password }}</td>
        </tr>
      </table>
      <input type="submit" name="update" style="display:none;" />
    </form>
  </div>

  <div id="id_delete_dialog">
    <form action="" method="post" autocomplete="off" onkeypress="if(event.keyCode==13)return false;else return true;">{% csrf_token %}
      {{ delete_form.pk }}
      認証情報を削除してもよろしいですか?
      <input type="submit" name="delete" style="display:none;" />
    </form>
  </div>

</div>

{% endblock function %}