lsky-pro/application/index/view/admin/images/index.html

{extend name="common:base" /}

{block name="title"}{:lang('Picture management')} - {$config.site_name}{/block}

{block name="css"}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/viewerjs@1.5.0/dist/viewer.min.css">
{/block}

{block name="main"}
<div class="mdui-container">
  <main>
    <div class="mdui-chip">
      <span class="mdui-chip-icon"><i class="mdui-icon material-icons">&#xe88e;</i></span>
      <span class="mdui-chip-title">{:lang('There are %s pictures in total', ['<small class="mdui-text-color-red">'.$images->total().'</small>'])}</span>
      <a href="" class="mdui-chip-delete" mdui-tooltip="{content: '{:lang('Refresh')}', position: 'right'}"><i class="mdui-icon material-icons">&#xe863;</i></a>
    </div>
    <div class="mdui-clearfix mdui-m-t-1"></div>
    <form action="" method="get" id="search-form">
      <select class="where mdui-select mdui-float-left" mdui-select>
        <option value="{}">{:lang('All')}</option>
        {foreach $strategyList as $key => $value}
        <option value='{"strategy": "{$key}"}' {if $key eq $strategy}selected{/if}>{:lang($value.name)}</option>
        {/foreach}
        <option value='{"user_id": "0"}' {eq name="user_id" value="0"} selected{/eq}>{:lang('Visitor picture')}</option>
        <option value='{"suspicious": "1"}' {eq name="suspicious" value="1"} selected{/eq}>{:lang('Suspicious picture')}</option>
      </select>
      <input type="hidden" name="" id="search-input">
      <input type="hidden" name="page" value="1">
      <input class="mdui-textfield-input search-input mdui-float-left" type="text" name="keyword" placeholder="{:lang('Enter search...')}" value="{$keyword}" autocomplete="off"/>
    </form>
    <div class="mdui-clearfix"></div>
    <div class="mdui-table-fluid mdui-m-t-2 mdui-m-b-2">
      <table class="mdui-table mdui-table-selectable">
        <thead>
        <tr>
          <th>{:lang('User')}</th>
          <th>{:lang('Storage strategy')}</th>
          <th>{:lang('Alias')}</th>
          <th>{:lang('Route')}</th>
          <th>{:lang('Size')}</th>
          <th>{:lang('Type')}</th>
          <th>{:lang('Upload IP')}</th>
          <th>{:lang('Upload time')}</th>
          <th>{:lang('Operation')}</th>
        </tr>
        </thead>
        <tbody>
        {foreach $images as $key => $value}
        <tr data-id="{$value.id}">
          <td>{$value.username}</td>
          <td>{:lang($value.strategyStr)}</td>
          <td>{$value.alias_name ?: '-'}</td>
          <td>{$value.pathname}</td>
          <td class="mdui-text-color-light-blue">{$value.size|format_size}</td>
          <td>{$value.mime}</td>
          <td class="get-city" style="cursor: pointer;">{$value.ip}</td>
          <td title="{$value.create_time}">{$value.date}</td>
          <td>
            <img class="none" data-original="{$value.url}" src="{$value.url}">
            <div class="mdui-btn-group">
              <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-btn-dense see" data-key="{$key}">{:lang('See')}</button>
              <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-red mdui-btn-dense del">{:lang('Delete')}</button>
            </div>
          </td>
        </tr>
        {/foreach}
        </tbody>
      </table>
    </div>
    <div class="page">
      {$images|raw}
    </div>
  </main>
</div>
<div class="mdui-fab-wrapper" id="fab-buttons">
  <button class="mdui-fab mdui-ripple mdui-color-red mdui-fab-hide" id="multi-delete" onclick="remove()">
    <i class="mdui-icon material-icons">&#xe872;</i>
  </button>
</div>
{/block}

{block name="js"}
<script src="https://cdn.jsdelivr.net/npm/viewerjs@1.5.0/dist/viewer.min.js"></script>
<script src="/static/jquery-viewer/1.2.0/js/jquery-viewer.js"></script>
<script>
  var methods = {
    delete: function (id, batch, callback) {
      var msg = lang('Are you sure to delete this picture?');
      if (batch) {
        msg = lang('Are you sure to delete the selected picture?');
      }
      mdui.confirm(msg, function () {
        app.request("{:url('admin/images/delete')}", {id: id}, function () {
          callback && callback();
        });
      }, function () {

      }, {confirmText: lang('Confirm'), cancelText: lang('Cancel')});
    }
  };

  function remove() {
    var selected = $('tr.mdui-table-row-selected');
    var array = [];
    if (selected.length) {
      selected.each(function (index, value) {
        array.push($(value).data('id'));
      });

      methods.delete(array, true, function () {
        selected.remove();
      });
    } else {
      mdui.snackbar({
        message: lang('Select at least one data!')
      });
    }
  }
  $(function () {
    var viewer = $('tbody').viewer({
      url: 'data-original',
      zIndex: 999999999
    });

    $('.mdui-select.where').on('close.mdui.select', function () {
      var params = JSON.parse($(this).find('option:selected').val());
      var name, value;
      for (var key in params) {
        name = key;
        value = params[name];
      }
      $('#search-input').attr('name', name).val(value)
      $('#search-form').submit();
    });
    // 多选操作
    $('.mdui-checkbox input').change(function () {
      var selected = $('tr.mdui-table-row-selected');
      $('#multi-delete')[selected.length > 0 ? 'removeClass' : 'addClass']('mdui-fab-hide');
    });
    // 查看图片
    $('td button.see').click(function () {
      viewer.data('viewer').view($(this).data('key'))
    });
    // 删除
    $('td button.del').click(function () {
      var tr = $(this).closest('tr');
      methods.delete(tr.data('id'), false, function () {
        tr.remove();
      });
    });
    // 根据ip获取城市
    $('td.get-city').click(function () {
      app.ajax("{:url('admin/images/getIpInfo')}", {ip: $(this).text()}, function (response) {
        if (response.code) {
          mdui.alert(
            lang('Country:') + response.data.country +
            '<br />' + lang('Region:') + response.data.area +
            '<br />' + lang('Area:') + response.data.region +
            '<br />' + lang('City:') + response.data.city +
            '<br />' + lang('County:') + response.data.county +
            '<br />ISP：' + response.data.isp
            , 'IP：' + response.data.ip
          );
        } else {
          mdui.snackbar({
            message: response.msg
          });
        }
      });
    });
  })
</script>
{/block}