hestiacp/web/templates/admin/edit_firewall.html

<div class="l-center edit">
        <div class="l-sort clearfix">
          <div class="l-unit-toolbar__buttonstrip">
            <a class="ui-button cancel" id="btn-back" href="/list/firewall/"><i class="fas fa-arrow-left status-icon blue"></i> <?=__('Back')?></a>
          </div>
          <div class="l-unit-toolbar__buttonstrip float-right">
            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
          </div>
        </div>
      </div>

    <div class="l-separator"></div>
    <!-- /.l-separator -->

    <div class="l-center animated fadeIn">
      <?php
        $back = $_SESSION['back'];
        if (empty($back)) {
          $back = "location.href='/list/firewall/'";
        } else {
          $back = "location.href='".$back."'";
        }
      ?>
        <form id="vstobjects" name="v_edit_firewall" method="post"  class="<?=$v_status?>">
            <input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
            <input type="hidden" name="save" value="save" />

            <table class='data'>
                <tr class="data-add">
                    <td class="data-dotted">
                        <table class="data-col1">
                            <tr>
                                <td>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td class="data-dotted">
                        <table class="data-col2" width="600px">
                            <tr>
                                <td class="step-top">
                                    <span class="page-title"><?=__('Editing Firewall Rule')?></span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <?php
                                        if (!empty($_SESSION['error_msg'])) {
                                            echo "<span class=\"vst-error\"> <i class=\"fas fa-exclamation-circle status-icon red\"></i> ".htmlentities($_SESSION['error_msg'])."</span>";
                                        } else {
                                            if (!empty($_SESSION['ok_msg'])) {
                                                echo "<span class=\"vst-ok\"> <i class=\"fas fa-check-circle status-icon green\"></i> ".$_SESSION['ok_msg']."</span>";
                                            }
                                        }
                                    ?>
                                </td>
                            </tr>
                            <tr>
                                <td class="vst-text step-top">
                                    <?php print __('Action'); ?>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <select class="vst-list" name="v_action">
                                        <option value="DROP" <?php if ((!empty($v_action)) && ( $v_action == "DROP" )) echo 'selected'?>><?=__('DROP')?></option>
                                        <option value="ACCEPT" <?php if ((!empty($v_action)) && ( $v_action == "ACCEPT" )) echo 'selected'?>><?=__('ACCEPT')?></option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="vst-text input-label">
                                    <?php print __('Protocol') ?>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <select class="vst-list" name="v_protocol">
                                        <option value="TCP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "TCP" )) echo 'selected'?>><?=__('TCP')?></option>
                                        <option value="UDP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "UDP" )) echo 'selected'?>><?=__('UDP')?></option>
                                        <option value="ICMP" <?php if ((!empty($v_protocol)) && ( $v_protocol == "ICMP" )) echo 'selected'?>><?=__('ICMP')?></option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="vst-text input-label">
                                    <?php print __('Port');?> <span class="optional">(<?php print __('ranges are acceptable');?>)</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" size="20" class="vst-input" name="v_port" value="<?=htmlentities(trim($v_port, "'"))?>">
                                </td>
                            </tr>
                            <tr>
                                <td class="vst-text input-label">
                                    <?php print __('IP address');?> <span class="optional">(<?php print __('CIDR format is supported');?>)</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <select class="vst-list" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
                                        <option value="">clear</option>
                                    </select>
                                    <input type="text" size="20" class="vst-input vst-list-editor" name="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
                                </td>
                            </tr>
                            <tr>
                                <td class="vst-text input-label">
                                    <?php print __('Comment');?> <span class="optional">(<?php print __('optional');?>)</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" size="20" class="vst-input" name="v_comment" maxlength="255" value="<?=htmlentities(trim($v_comment, "'"))?>">
                                </td>
                            </tr>
                        </table>
                        <table class="data-col2">
                        </table>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <script>
        var iplists = JSON.parse('<?=$ipset_lists_json?>');
        iplists.sort(function (a, b) {
            return a.name > b.name;
        });

        $(function() {
            var targetelement = document.getElementById('quickips_list');

            var newEl = document.createElement("option");
            newEl.text = "Ipset Lists";
            newEl.disabled = true;
            targetelement.appendChild(newEl);

            iplists.forEach(iplist => {
                var newEl = document.createElement("option");
                newEl.text = iplist.name;
                newEl.value = "ipset:" + iplist.name;
                targetelement.appendChild(newEl);
            });
        });
    </script>