Refactor a function for switching settings in setting.html

web/html/xui/setting.html

@@ -286,6 +286,73 @@ const app = new Vue({
                         await PromiseUtil.sleep(5000);
                         location.reload();
                     }
+                },
+                checkRequiredOutbounds() {
+                    const newTemplateSettings = this.templateSettings;
+                    const haveIPv4Outbounds = newTemplateSettings.outbounds.some((o) => o?.tag === "IPv4");
+                    const haveIPv4Rules = newTemplateSettings.routing.rules.some((r) => r?.outboundTag === "IPv4");
+                    const haveWARPOutbounds = newTemplateSettings.outbounds.some((o) => o?.tag === "WARP");
+                    const haveWARPRules = newTemplateSettings.routing.rules.some((r) => r?.outboundTag === "WARP");
+                    if (haveWARPRules && !haveWARPOutbounds) {
+                        newTemplateSettings.outbounds.push(this.warpSettings);
+                    }
+                    if (haveIPv4Rules && !haveIPv4Outbounds) {
+                        newTemplateSettings.outbounds.push(this.ipv4Settings);
+                    }
+                    this.templateSettings = newTemplateSettings;
+                },
+                templateRuleGetter(routeSettings) {
+                    const { data, property, outboundTag } = routeSettings;
+                    let result = false;
+                    if (this.templateSettings != null) {
+                        this.templateSettings.routing.rules.forEach(
+                            (routingRule) => {
+                                if (
+                                    routingRule.hasOwnProperty(property) &&
+                                    routingRule.hasOwnProperty("outboundTag") &&
+                                    routingRule.outboundTag === outboundTag
+                                ) {
+                                    if (data.includes(routingRule[property][0])) {
+                                        result = true;
+                                    }
+                                }
+                            }
+                        );
+                    }
+                    return result;
+                },
+                templateRuleSetter(routeSettings) {
+                    const { newValue, data, property, outboundTag } = routeSettings;
+                    const oldTemplateSettings = this.templateSettings;
+                    const newTemplateSettings = oldTemplateSettings;
+                    if (newValue) {
+                        const propertyRule = {
+                            type: "field",
+                            outboundTag,
+                            [property]: data
+                        };
+                        newTemplateSettings.routing.rules.push(propertyRule);
+                    }
+                    else {
+                        const newRules = [];
+                        newTemplateSettings.routing.rules.forEach(
+                            (routingRule) => {
+                                if (
+                                    routingRule.hasOwnProperty(property) &&
+                                    routingRule.hasOwnProperty("outboundTag") &&
+                                    routingRule.outboundTag === outboundTag
+                                ) {
+                                    if (data.includes(routingRule[property][0])) {
+                                        return;
+                                    }
+                                }
+                                newRules.push(routingRule);
+                            }
+                        );
+                        newTemplateSettings.routing.rules = newRules;
+                    }
+                    this.templateSettings = newTemplateSettings;
+                    this.checkRequiredOutbounds();
                 }
             },
         async mounted() {