luci-app-diskman/luasrc/view/diskman/partition_info.htm

<style type="text/css">
  #dialog_format {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 20000;
  }

  #dialog_format .dialog_box {
    position: relative;
    background: rgba(255, 255, 255);
    top: 35%;
    width: 40%;
    min-width: 20em;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    height:auto;
    align-items: center;
  }

  #dialog_format .dialog_line {
    margin-top: .5em;
    margin-bottom: .5em;
    margin-left: 2em;
    margin-right: 2em;
  }

  #dialog_format .dialog_box>h4,
  #dialog_format .dialog_box>p,
  #dialog_format .dialog_box>div {
    flex-basis: 100%;
  }

  #dialog_format .dialog_box>img {
    margin-right: 1em;
    flex-basis: 32px;
  }

  body.dialog-format-active {
    overflow: hidden;
    height: 100vh;
  }

  body.dialog-format-active #dialog_format {
    display: block;
  }
</style>
<script type="text/javascript">//<![CDATA[
  function show_detail(dev, e) {
    e.preventDefault()
    window.open('<%=luci.dispatcher.build_url("admin/system/diskman/smartdetail")%>/' + dev,
      'newwindow', 'height=480,width=800,top=100,left=200,toolbar=no,menubar=no,scrollbars=yes, resizable=no,location=no, status=no')
  }
  window.onload = function () {
    // handle partition table
    const init_pt_btn = function() {
      const btn_p_table = document.getElementById("widget.cbid.table.1.p_table") || document.getElementById("cbid.table.1.p_table")
      if (!btn_p_table) {
        setTimeout(init_pt_btn, 500);
        return;
      }
      if (btn_p_table.type == 'hidden')
        return;
      const btn_p_table_raw_index = btn_p_table.selectedIndex
      const val_name = document.getElementById("cbi-table-1-path").innerText.split('/').pop()
      btn_p_table.onchange = function () {
        let btn_p_table_index = btn_p_table.selectedIndex
        if (btn_p_table_index != btn_p_table_raw_index) {
          if (confirm("<%:Warnning !! \nTHIS WILL OVERWRITE EXISTING PARTITIONS!! \nModify the partition table?%>")) {
            let p_table = btn_p_table.options[btn_p_table_index].value
            XHR.get('<%=luci.dispatcher.build_url("admin/system/diskman/mk_p_table")%>', { dev: val_name, p_table: p_table }, (x, res) => {
              if (res.code == 0) {
                location.reload();
              }
            }
            );
          }
          else {
          }
        }
      }
    };
    init_pt_btn();
    // handle smartinfo
    const url = location.href.split('/')
    const dev = url[url.length - 1]
    const btn_smart_detail = document.getElementById("cbi-table-1-health")
    btn_smart_detail.children[0].onclick = show_detail.bind(this, dev)
  }
  function close_dialog() {
    document.body.classList.remove('dialog-format-active')
    document.documentElement.style.overflowY = 'scroll'
  }
  function do_format(partation_name){
    let fs = document.getElementById("filesystem_list").value
    let status = document.getElementById("format-status")
    if(!fs) {
      status.innerHTML = "<%:Please select file system!%>"
      return
    }
    status.innerHTML = "<%:Formatting..%>"
    let b = document.getElementById('btn_format')
    b.disabled = true
    let xhr = new XHR()
    xhr.post('<%=luci.dispatcher.build_url("admin/system/diskman/format_partition")%>', { partation_name: partation_name, file_system: fs }, (x, res) => {
      if (x.status == 200) {
        status.innerHTML = x.statusText
        location.reload();
      }else{
        status.innerHTML = x.statusText
      }
    })
  }

  function clear_text(){
    let s = document.getElementById('format-status')
    s.innerHTML = ""
    let b = document.getElementById('btn_format')
    b.disabled = false
  }

  function partition_format(partition_name, format_cmd, current_fs){
    let list = ''
    format_cmd.split(",").forEach(e => {
      list = list + '<option value="'+e+'">'+e+'</option>'
    });
    document.getElementById('dialog_format') || document.body.insertAdjacentHTML("beforeend", '<div id="dialog_format"><div class="dialog_box"><div class="dialog_line"></div><div class="dialog_line"><span><%:Format partation:%> <b>'+partition_name+'</b></span><br><span id="format-status" style="color: red;"></span></div><div class="dialog_line"><select id="filesystem_list" class="cbi-input-select" onchange="clear_text()">'+list+'</select></div><div class="dialog_line" style="text-align: right;"><input type="button" class="cbi-button cbi-button-apply" id="btn_format" type="submit" value="<%:Format%>" onclick="do_format(`'+partition_name+'`)" /> <input type="button"class="cbi-button cbi-button-reset" type="reset" value="<%:Cancel%>" onclick="close_dialog()" /></div><div class="dialog_line"></div></div></div>>')
    document.body.classList.add('dialog-format-active')
    document.documentElement.style.overflowY = 'hidden'
    let fs_list = document.getElementById("filesystem_list")
    fs_list.value = current_fs
  }
</script>