Ventoy/Plugson/www/plugson_image_list.html

<div class="box box-primary" id="control">
    <div class="box-header">
        <div class="col-sm-9" style="padding-top:8px;">
            <i class="fa fa-list-alt">&nbsp;&nbsp;</i>
            <h1 class="box-title" style="font-weight:bold;" id="id_h1_page_title"></h1>
        </div>
        <div class="col-sm-1" style="padding-top:2px;">
          <button id="id_btn_reset" class="btn btn-sm btn-danger btn-del"><i class="fa fa-trash"></i><span id="id_btn_span_reset">Reset</span></button>
        </div>
        <div class="col-sm-2" style="font-size:16px;padding-top:8px;">
            <a id="id_a_official_doc" target="_blank" href="https://www.ventoy.net/en/plugin_imagelist.html"><span class="fa fa-link"></span><span id="id_span_official_doc">官网文档</span></a>
        </div>
    </div>
    <legend></legend>
    
    <div class="box-body">
      <div class="nav-tabs-custom">
        <ul class="nav nav-tabs" id="id_tab_image_list">
            <li class=""><a href="#tab_0" data-toggle="tab" aria-expanded="false" style="font-weight:bold" >image_list</a></li>
            <li class=""><a href="#tab_1" data-toggle="tab" aria-expanded="false"  style="font-weight:bold">image_list_legacy</a></li>
            <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false"  style="font-weight:bold">image_list_uefi</a></li>
            <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false"  style="font-weight:bold">image_list_ia32</a></li>
            <li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false"  style="font-weight:bold">image_list_aa64</a></li>
            <li class=""><a href="#tab_5" data-toggle="tab" aria-expanded="false"  style="font-weight:bold">image_list_mips</a></li>
        </ul>
      </div>


      <div class="box box-primary box-solid">
        <div class="box-header with-border">
          <h3 id="id_image_list_mode" class="box-title" style="font-size: 14px;font-weight: bold;">Mode</h3>
          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body no-padding">
            <table class="table table-bordered  no-padding">
                <tr style="font-weight:bold;">
                  <td class="td_ctrl_col" id="td_title_setting">选项设置</td>
                  <td>
                    <label class="radio-inline">
                        <input type="radio" id="id_image_list_type0" name="id_image_list_type" data-type="0" value="0"> 
                        <span id="id_span_image_list_permit" style="font-weight:bold;">0</span>
                    </label>
                    <label class="radio-inline">
                        <input type="radio" id="id_image_list_type1" name="id_image_list_type" data-type="1" value="1"> 
                        <span id="id_span_image_list_deny" style="font-weight:bold;">1</span>
                    </label>
                  </td>
                </tr>
                <tr id="tr_title_desc_cn">
                  <td class="td_ctrl_col" id="td_title_desc">选项说明</td>
                  <td>
                    <span style="font-weight: bold;">白名单模式</span><br/>
                    由用户自己列出文件列表，Ventoy 不再搜索而是直接使用你给出的文件列表。 同时 Ventoy 也不再对文件进行排序，而是直接按照列表给出的文件顺序来显示启动菜单。<br/>
                    <span style="font-weight: bold;">黑名单模式</span><br/>
                    Ventoy 首先还是像原来一样搜索，最后再从搜索结果中剔除这个列表中的文件。<br/>
                  </td>
                </tr>
                <tr id="tr_title_desc_en">
                  <td class="td_ctrl_col">Option Description</td>
                  <td>
                    <span style="font-weight: bold;">Permit Mode</span><br/>
                    Ventoy will no longer search for the files but just use your file list. Also, Ventoy will NOT sort these files anymore, but directly display the boot menu according to the order given in the list.<br/>
                    <span style="font-weight: bold;">Deny Mode</span><br/>
                    Firstly, Ventoy will search as normal. And then remove the files in the blacklist from the search result.<br/>
                  </td>
                </tr>
            </table>
        </div><!-- /.box-body -->
      </div><!-- /.box -->


    <div class="box box-primary box-solid">
      <div class="box-header with-border">
        <h3 id="id_image_list_list" class="box-title" style="font-size: 14px;font-weight: bold;">List</h3>
        <div class="box-tools pull-right">
          <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div><!-- /.box-tools -->
      </div><!-- /.box-header -->
      <div class="box-body no-padding">
        <table id="id_image_list_tbl" class="table table-bordered">
          <thead>
            <tr>
              <th style="width: 5%;">#</th>
              <th id="id_th_imglist_path" style="width: 60%;"></th>
              <th id="id_th_status" style="width: 10%;"></th>
              <th id="id_th_operation" style="width: 10%;"></th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div><!-- /.box-body -->
    </div><!-- /.box -->
      

  </div>
</div>
<script type="text/javascript">
    
  function VtoyPageLanguageChange(newlang) {
    VtoyCommonChangeLanguage(newlang);
    $('h1[id=id_h1_page_title]').text(g_vtoy_cur_language.STR_PLUG_IMAGELIST);

    $("span[id=id_span_file_exist]").each(function(){
        $(this).text(g_vtoy_cur_language.STR_FILE_EXIST);
    });
    $("span[id=id_span_file_nonexist]").each(function(){
        $(this).text(g_vtoy_cur_language.STR_FILE_NONEXIST);
    });
    $("span[id=id_span_file_fuzzy]").each(function(){
        $(this).text(g_vtoy_cur_language.STR_FILE_FUZZY);
    });

    if (newlang === 'en') {
      $('h3[id=id_image_list_mode]').text('Mode');
      $('h3[id=id_image_list_list]').text('List');
      $('#id_th_imglist_path').text('Absolute Path');
      $('span[id=id_span_image_list_permit]').text('Permit');
      $('span[id=id_span_image_list_deny]').text('Deny');
    } else {
      $('h3[id=id_image_list_mode]').text('模式');
      $('h3[id=id_image_list_list]').text('列表');
      $('#id_th_imglist_path').text('绝对路径');
      $('span[id=id_span_image_list_permit]').text('白名单模式');
      $('span[id=id_span_image_list_deny]').text('黑名单模式');
    }
  }
  
  function FillImageListTable(data) {
    var fileexist = ventoy_get_status_line(0, 1);
    var filenonexist = ventoy_get_status_line(0, 0);
    var filenfuzzy = ventoy_get_status_line(0, -1);

    var addbtn = ventoy_get_xslg_addbtn('ImageListAddBtn');
    var delbtn = ventoy_get_xslg_delbtn('ImageListDelBtn');

    var td1, td2, td3, td4;
    var $tbl = $("#id_image_list_tbl tbody");
    $tbl.empty();

    for (var i = 0; i < data.length; i++) {
      var $tr;
      td1 = '<td>' + (i + 1) + '</td>';
      td2 = '<td>' + data[i].path + '</td>';
      td3 = '<td>' + ventoy_get_status_line(0, data[i].valid) + '</td>';
      td4 = '<td>' + delbtn + '</td>';

      $tr = $('<tr>' + td1 + td2 + td3 + td4 + '</tr>');

      $tr.data('path', data[i].path);
      $tr.data('index', i);
      $tbl.append($tr);
    }

    $tbl.append('<tr><td></td><td></td><td></td><td>' + addbtn + '</td></tr>');
  }

  function VtoyFillCurrentPageItem(data) {
    $('input:radio[name=id_image_list_type]')[data.type].checked = true;
    FillImageListTable(data.list);
  }

  function VtoySaveCurrentPage() {
    var data = m_data_imagelist[current_tab_index];

    data.type = parseInt($('input:radio[name=id_image_list_type]:checked').val());

    callVtoy({
      method : 'save_image_list',
      index: current_tab_index,
      type: data.type
    }, function(e) {
      Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
    });
  }

  $('input[type=radio]').each(function(){
    var id = $(this).attr('id');
    if (typeof(id) != 'undefined' && id.startsWith('id_image_list_type')) {
      $(this).change(VtoySaveCurrentPage);
    }
  });

  function OnClickMultiModeTab() {
    var href = $(this).attr('href');
    var index = parseInt(href.substr(5, 1));

    if (index < 0 || index >= g_vtoy_data_default_index || current_tab_index === index) {
      return;
    }
    
    current_tab_index = index;
    VtoyFillCurrentPageItem(m_data_imagelist[index]);
  }

  //Main process
  var m_data_imagelist;
  var current_tab_index = 0;
  callVtoySync({method : 'get_image_list'}, function(data) {
    m_data_imagelist = data;
  });
  
  function OnAddImageList(root, valid, extra) {
    var list = m_data_imagelist[current_tab_index].list;
    var data = {
      "path": root.substr(g_current_dir.length),
      "valid": valid
    };

    for (var i = 0; i < list.length; i++) {
      if (list[i].path === data.path) {
        Message.error(g_vtoy_cur_language.STR_DUPLICATE_PATH);
        return;
      }
    }

    callVtoy({
      method : 'image_list_add',
      index: current_tab_index,
      path: data.path,
    }, function(e) {
      if (e.result === 'success') {
        list.push(data);
        FillImageListTable(list);
        Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
      } else if (e.result === 'duplicate') {
        Message.error(g_vtoy_cur_language.STR_DUPLICATE_PATH);
      }
    });
  }

  $("#id_image_list_tbl").on('click', '.ImageListAddBtn', function() {
    var tip1 = (g_current_os === 'windows') ? '\\ISO\\Windows11.iso' : "/ISO/Ubuntu-20.04-desktop-amd64.iso";
    var tip2 = (g_current_os === 'windows') ? '\\ISO\\Windows**.iso' : "/ISO/Ubuntu-*****-desktop-amd64.iso";
    var para = {
        "title": g_vtoy_cur_language.STR_ADD_FILE_TO_LIST,
        "fuzzy": 1,
        "tip1": g_current_dir + tip1,
        "tip2": g_current_dir + tip2,
        "tip3": '',
        "extra": false,
        "extra_title": ''
    };
    VtoySelectFilePath(OnAddImageList, para);
  });

  $("#id_image_list_tbl").on('click', '.ImageListDelBtn', function() {
    var $tr = $(this).closest('tr');
		var path = $tr.data('path');
    var index = $tr.data('index');

    callVtoySync({
        method : 'image_list_del',
        index: current_tab_index,
        path: path
    }, function(data) {
      m_data_imagelist[current_tab_index].list.splice(index, 1);
      FillImageListTable(m_data_imagelist[current_tab_index].list);
      Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
    });
  });

  $('#id_tab_image_list a[href="#tab_0"]').click(OnClickMultiModeTab);
  $('#id_tab_image_list a[href="#tab_1"]').click(OnClickMultiModeTab);
  $('#id_tab_image_list a[href="#tab_2"]').click(OnClickMultiModeTab);
  $('#id_tab_image_list a[href="#tab_3"]').click(OnClickMultiModeTab);
  $('#id_tab_image_list a[href="#tab_4"]').click(OnClickMultiModeTab);
  $('#id_tab_image_list a[href="#tab_5"]').click(OnClickMultiModeTab);
  function UpdateTabTitleIcon(data) {
    CommonUpdateTabTitleIcon(data.exist_image_list, '#id_tab_image_list a[href="#tab_', 'image_list');
  }
  $('#id_btn_reset').click(function() { 
    Modal.confirm({msg:GetResetTabConfigTipMsg(current_tab_index, 'image_list')}).on(function(e) {
        if (e) {            
            callVtoySync({
                method : 'image_list_del',
                index: current_tab_index,
                path: g_del_all_path
            }, function(data) {
                
            });
            
            m_data_imagelist[current_tab_index].list.length = 0;
            VtoyFillCurrentPageItem(m_data_imagelist[g_vtoy_data_default_index]);
            VtoySaveCurrentPage();
        }
    });
  });
  
  $('#id_tab_image_list a[href="#tab_0"]').tab('show');
  VtoyFillCurrentPageItem(m_data_imagelist[0]);
  VtoyPageLanguageChange(g_current_language);

</script>