{% 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) {
      }
    }

    var _profiles = [
      {% for profile in profiles %}
        {
	  multipartupload: {{ profile.multipartupload|yesno:"true,false" }},
          portnumber: '{{ profile.portnumber }}',
          endpoint: '{{ profile.endpoint }}',
          storageclass: '{{ profile.storageclass }}',
          protocol: '{{ profile.protocol }}',
          secretkey: '{{ profile.secretkey }}',
          accesskey: '{{ profile.accesskey }}',
          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');
            }
          }
        ],
        close: function(e, ui) {
          _resize();
        },
        autoOpen: false
      });
      $button.on('click', function(e) {
        $form.get(0).reset();
        $dialog.dialog('open');
        _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');
            }
          }
        ],
        close: function(e, ui) {
          _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.accesskey.auto_id }}').val(profile.accesskey);
        $('#{{ update_form.secretkey.auto_id }}').val(profile.secretkey);
        $('input[name="{{ update_form.protocol.html_name }}"]').val([profile.protocol]);
        $('input[name="{{ update_form.storageclass.html_name }}"]').val([profile.storageclass]);
        $('#{{ update_form.endpoint.auto_id }}').val(profile.endpoint);
        $('#{{ update_form.portnumber.auto_id }}').val(profile.portnumber);
        $('#{{ update_form.multipartupload.auto_id }}').prop('checked', profile.multipartupload);
        $dialog.dialog('open');
        _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');
            }
          }
        ],
        close: function(e, ui) {
          _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) {
            var msg = '接続テスト失敗';
            alert(msg);
          })
          .always(function(data_or_jqXHR, textStatus, jqXHR_or_errorThrown) {
            _waiting(false);
          });
      });
    });

  });
})($.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>
      {% empty %}
        <tr>
          <td></td>
          <td></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.accesskey.label_tag }}</th>
          <td>{{ create_form.accesskey }}</td>
        </tr>
        <tr>
          <th>{{ create_form.secretkey.label_tag }}</th>
          <td>{{ create_form.secretkey }}</td>
        </tr>
        <tr>
          <th>{{ create_form.protocol.label_tag }}</th>
          <td>{{ create_form.protocol }}</td>
        </tr>
        <tr>
          <th>{{ create_form.storageclass.label_tag }}</th>
          <td>{{ create_form.storageclass }}</td>
        </tr>
        <tr>
          <th>{{ create_form.endpoint.label_tag }}</th>
          <td>{{ create_form.endpoint }}</td>
        </tr>
        <tr>
          <th>{{ create_form.portnumber.label_tag }}</th>
          <td>{{ create_form.portnumber }}</td>
        </tr>
        <tr>
          <th>マルチパートアップロード</th>
          <td><label>{{ create_form.multipartupload }}有効にする</label></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.accesskey.label_tag }}</th>
          <td>{{ update_form.accesskey }}</td>
        </tr>
        <tr>
          <th>{{ update_form.secretkey.label_tag }}</th>
          <td>{{ update_form.secretkey }}</td>
        </tr>
        <tr>
          <th>{{ update_form.protocol.label_tag }}</th>
          <td>{{ update_form.protocol }}</td>
        </tr>
        <tr>
          <th>{{ update_form.storageclass.label_tag }}</th>
          <td>{{ update_form.storageclass }}</td>
        </tr>
        <tr>
          <th>{{ update_form.endpoint.label_tag }}</th>
          <td>{{ update_form.endpoint }}</td>
        </tr>
        <tr>
          <th>{{ update_form.portnumber.label_tag }}</th>
          <td>{{ update_form.portnumber }}</td>
        </tr>
        <tr>
          <th>マルチパートアップロード</th>
          <td><label>{{ update_form.multipartupload }}有効にする</label></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 %}