1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
{{define "modals/outModal"}}
<a-modal id="out-modal" v-model="outModal.visible" :title="outModal.title" @ok="outModal.ok"
:confirm-loading="outModal.confirmLoading" :closable="true" :mask-closable="false"
:ok-button-props="{ props: { disabled: !outModal.isValid } }" :style="{ overflow: 'hidden' }"
:ok-text="outModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
{{template "form/outbound" .}}
</a-modal>
<script>
const outModal = {
title: '',
visible: false,
confirmLoading: false,
okText: '{{ i18n "sure" }}',
isEdit: false,
confirm: null,
outbound: new Outbound(),
jsonMode: false,
link: '',
cm: null,
duplicateTag: false,
isValid: true,
activeKey: '1',
tags: [],
ok() {
ObjectUtil.execute(outModal.confirm, outModal.outbound.toJson());
},
show({
title = '',
okText = '{{ i18n "sure" }}',
outbound,
confirm = (outbound) => {},
isEdit = false,
tags = []
}) {
this.title = title;
this.okText = okText;
this.confirm = confirm;
this.jsonMode = false;
this.link = '';
this.activeKey = '1';
this.visible = true;
this.outbound = isEdit ? Outbound.fromJson(outbound) : new Outbound();
this.isEdit = isEdit;
this.tags = tags;
this.check()
},
close() {
outModal.visible = false;
outModal.loading(false);
},
loading(loading = true) {
outModal.confirmLoading = loading;
},
check() {
if (outModal.outbound.tag == '' || outModal.tags.includes(outModal.outbound.tag)) {
this.duplicateTag = true;
this.isValid = false;
} else {
this.duplicateTag = false;
this.isValid = true;
}
},
toggleJson(jsonTab) {
textAreaObj = document.getElementById('outboundJson');
if (jsonTab) {
if (this.cm != null) {
this.cm.toTextArea();
this.cm = null;
}
textAreaObj.value = JSON.stringify(this.outbound.toJson(), null, 2);
this.cm = CodeMirror.fromTextArea(textAreaObj, app.cmOptions);
this.cm.on('change', editor => {
value = editor.getValue();
if (this.isJsonString(value)) {
this.outbound = Outbound.fromJson(JSON.parse(value));
this.check();
}
});
this.activeKey = '2';
} else {
if (this.cm != null) {
this.cm.toTextArea();
this.cm = null;
}
this.activeKey = '1';
}
},
isJsonString(str) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
},
};
new Vue({
delimiters: ['[[', ']]'],
el: '#out-modal',
data: {
outModal: outModal,
get outbound() {
return outModal.outbound;
},
},
methods: {
streamNetworkChange() {
if (this.outModal.outbound.protocol == Protocols.VLESS && !outModal.outbound
.canEnableTlsFlow()) {
delete this.outModal.outbound.settings.flow;
}
},
canEnableTls() {
return this.outModal.outbound.canEnableTls();
},
convertLink() {
newOutbound = Outbound.fromLink(outModal.link);
if (newOutbound) {
this.outModal.outbound = newOutbound;
this.outModal.toggleJson(true);
this.outModal.check();
this.$message.success('Link imported successfully...');
outModal.link = '';
} else {
this.$message.error('Wrong Link!');
outModal.link = '';
}
},
},
});
</script>
{{end}}
|
