op-packages/luci-app-openclash/luasrc/view/openclash/switch_dashboard.htm

<%+cbi/valueheader%>
<div class="oc-flex-center" style="flex-wrap: wrap; gap: 6px;">
    <div class="cbi-value-field" id="switch_dashboard_<%=self.option%>"><%:Collecting data...%></div>
    <div class="cbi-value-field" id="delete_dashboard_<%=self.option%>">
        <input type="button" class="btn cbi-button cbi-button-reset" value="<%:Delete%>" onclick="return delete_dashboard(this, '<%=self.option%>')"/>
    </div>
    <div class="cbi-value-field" id="default_dashboard_<%=self.option%>">
        <input type="button" class="btn cbi-button cbi-button-apply" value="<%:Set to Default%>" onclick="return default_dashboard(this, '<%=self.option%>')"/>
    </div>
</div>

<script type="text/javascript">//<![CDATA[
(function() {
    var name = "<%=self.option%>";

    function makeBtn(label, fn, args) {
        var argStr = args.map(function(a){ return "'" + a + "'"; }).join(', ');
        return '<input type="button" class="btn cbi-button cbi-button-apply" value="' + label + '" onclick="return ' + fn + '(this, ' + argStr + ')"/>';
    }

    var switchEl   = document.getElementById('switch_dashboard_'   + name);
    var defaultEl  = document.getElementById('default_dashboard_'  + name);
    var deleteEl   = document.getElementById('delete_dashboard_'   + name);

    XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "dashboard_type")%>', null, function(x, status) {
        if (!x || x.status != 200) return;

        var switchLabel;
        if (name == "Metacubexd") {
            switchLabel = ['<%:Update Metacubexd Version%>', 'Official'];
        } else if (name == "Zashboard") {
            switchLabel = ['<%:Update Zashboard Version%>', 'Official'];
        } else {
            var isMeta = (name == "Dashboard" ? status.dashboard_type : status.yacd_type) == "Meta";
            switchLabel = isMeta
                ? ['<%:Switch To Official Version%>', 'Official']
                : ['<%:Switch To Meta Version%>',    'Meta'];
        }
        switchEl.innerHTML = makeBtn(switchLabel[0], 'switch_dashboard', [name, switchLabel[1]]);

        if (status.default_dashboard == name.toLowerCase()) {
            defaultEl.innerHTML = makeBtn('<%:Default%>', 'default_dashboard', [name]);
            defaultEl.firstElementChild.disabled = true;
        }
        if (!status[name.toLowerCase()]) {
            defaultEl.firstElementChild.disabled = true;
            deleteEl.firstElementChild.disabled  = true;
        }
    });

    window.switch_dashboard = window.switch_dashboard || function(btn, n, type) {
        btn.disabled = true;
        btn.value = '<%:Downloading File...%>';
        XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "switch_dashboard")%>', {name: n, type: type}, function(x, status) {
            if (!x || x.status != 200) return;
            if (status.download_state == "0") {
                var isUpdate = (n == "Metacubexd" || n == "Zashboard");
                var nextLabel, nextType;
                if (isUpdate) {
                    nextLabel = '<%:Update Successful%> - ' + (n == "Metacubexd" ? '<%:Update Metacubexd Version%>' : '<%:Update Zashboard Version%>');
                    nextType  = 'Official';
                } else {
                    nextLabel = '<%:Switch Successful%> - ' + (type == "Meta" ? '<%:Switch To Official Version%>' : '<%:Switch To Meta Version%>');
                    nextType  = type == "Meta" ? 'Official' : 'Meta';
                }
                document.getElementById('switch_dashboard_'  + n).innerHTML = makeBtn(nextLabel, 'switch_dashboard', [n, nextType]);
                document.getElementById('default_dashboard_' + n).firstElementChild.disabled = false;
                document.getElementById('delete_dashboard_'  + n).firstElementChild.disabled = false;
            } else {
                btn.value = status.download_state == "2" ? '<%:Unzip Error%>'
                          : (n == "Metacubexd" || n == "Zashboard") ? '<%:Update Failed%>' : '<%:Switch Failed%>';
            }
            btn.disabled = false;
        });
        return false;
    };

    window.delete_dashboard = window.delete_dashboard || function(btn, n) {
        if (!confirm("<%:Are you sure you want to delete this panel?%>")) return false;
        btn.disabled = true;
        XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "delete_dashboard")%>', {name: n}, function(x, status) {
            if (!x || x.status != 200) { btn.disabled = false; return; }
            if (status.delete_state == "1") {
                var defBtn = document.getElementById('default_dashboard_' + n).firstElementChild;
                if (defBtn.disabled) defBtn.value = '<%:Set to Default%>';
                defBtn.disabled = true;
            } else btn.disabled = false;
        });
        return false;
    };

    window.default_dashboard = window.default_dashboard || function(btn, n) {
        btn.disabled = true;
        XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "default_dashboard")%>', {name: n}, function(x, status) {
            if (!x || x.status != 200) { btn.disabled = false; return; }
            btn.value = '<%:Default%>';
            document.querySelectorAll('[id^="default_dashboard_"]').forEach(function(el) {
                var b = el.firstElementChild;
                if (b && b !== btn && b.value === '<%:Default%>') {
                    b.disabled = false;
                    b.value = '<%:Set to Default%>';
                }
            });
        });
        return false;
    };
})();
//]]></script>

<%+cbi/valuefooter%>