3x-ui/web/html/modals/node_modal.html

{{define "modals/nodeModal"}}
<a-modal id="node-modal" v-model="nodeModal.visible" :title="nodeModal.title" 
  @ok="nodeModal.ok" @cancel="nodeModal.cancel" :ok-text="nodeModal.okText" :width="600">
  <a-form layout="vertical">
    <a-form-item label='{{ i18n "pages.nodes.nodeName" }}'>
      <a-input v-model.trim="nodeModal.formData.name" placeholder="e.g., Node-1"></a-input>
    </a-form-item>
    <a-form-item label='{{ i18n "pages.nodes.nodeAddress" }}'>
      <a-input v-model.trim="nodeModal.formData.address" placeholder='{{ i18n "pages.nodes.fullUrlHint" }}'></a-input>
    </a-form-item>
    <a-form-item label='{{ i18n "pages.nodes.nodePort" }}'>
      <a-input-number v-model.number="nodeModal.formData.port" :min="1" :max="65535" :style="{ width: '100%' }"></a-input-number>
    </a-form-item>
    <a-form-item label='{{ i18n "pages.nodes.nodeApiKey" }}'>
      <a-input-password v-model.trim="nodeModal.formData.apiKey" placeholder='{{ i18n "pages.nodes.enterApiKey" }}'></a-input-password>
    </a-form-item>
  </a-form>
</a-modal>
<script>
  const nodeModal = window.nodeModal = {
    visible: false,
    title: '',
    okText: 'OK',
    formData: {
      name: '',
      address: '',
      port: 8080,
      apiKey: ''
    },
    ok() {
      // Валидация полей - используем nodeModal напрямую для правильного контекста
      if (!nodeModal.formData.name || !nodeModal.formData.name.trim()) {
        if (typeof app !== 'undefined' && app.$message) {
          app.$message.error('{{ i18n "pages.nodes.enterNodeName" }}');
        } else if (typeof Vue !== 'undefined' && Vue.prototype && Vue.prototype.$message) {
          Vue.prototype.$message.error('{{ i18n "pages.nodes.enterNodeName" }}');
        }
        return;
      }
      
      if (!nodeModal.formData.address || !nodeModal.formData.address.trim()) {
        if (typeof app !== 'undefined' && app.$message) {
          app.$message.error('{{ i18n "pages.nodes.enterNodeAddress" }}');
        } else if (typeof Vue !== 'undefined' && Vue.prototype && Vue.prototype.$message) {
          Vue.prototype.$message.error('{{ i18n "pages.nodes.enterNodeAddress" }}');
        }
        return;
      }
      
      if (!nodeModal.formData.apiKey || !nodeModal.formData.apiKey.trim()) {
        if (typeof app !== 'undefined' && app.$message) {
          app.$message.error('{{ i18n "pages.nodes.enterApiKey" }}');
        } else if (typeof Vue !== 'undefined' && Vue.prototype && Vue.prototype.$message) {
          Vue.prototype.$message.error('{{ i18n "pages.nodes.enterApiKey" }}');
        }
        return;
      }
      
      // Если все поля заполнены, формируем полный адрес с портом
      const dataToSend = { ...nodeModal.formData };
      
      // Всегда добавляем порт к адресу
      let fullAddress = dataToSend.address.trim();
      const port = dataToSend.port && dataToSend.port > 0 ? dataToSend.port : 8080;
      
      // Правильно добавляем порт к URL
      // Парсим URL: http://192.168.0.7 -> http://192.168.0.7:8080
      const urlMatch = fullAddress.match(/^(https?:\/\/)([^\/:]+)(\/.*)?$/);
      if (urlMatch) {
        const protocol = urlMatch[1]; // http:// или https://
        const host = urlMatch[2];     // 192.168.0.7
        const path = urlMatch[3] || ''; // /path или ''
        fullAddress = `${protocol}${host}:${port}${path}`;
      } else {
        // Если не удалось распарсить, просто добавляем порт
        fullAddress = `${fullAddress}:${port}`;
      }
      
      // Удаляем порт из данных, так как он теперь в адресе
      delete dataToSend.port;
      dataToSend.address = fullAddress;
      
      // Вызываем confirm с объединенным адресом
      if (nodeModal.confirm) {
        nodeModal.confirm(dataToSend);
      }
      nodeModal.visible = false;
    },
    cancel() {
      this.visible = false;
    },
    show({ title = '', okText = 'OK', node = null, confirm = (data) => { }, isEdit = false }) {
      this.title = title;
      this.okText = okText;
      this.confirm = confirm;
      
      if (node) {
        // Извлекаем адрес и порт из полного URL
        let address = node.address || '';
        let port = 8080;
        
        // Всегда извлекаем порт из адреса, если он там есть
        if (address) {
          const urlMatch = address.match(/^(https?:\/\/[^\/:]+)(:(\d+))?(\/.*)?$/);
          if (urlMatch) {
            // Убираем порт из адреса для отображения
            const protocol = urlMatch[1].match(/^(https?:\/\/)/)[1];
            const host = urlMatch[1].replace(/^https?:\/\//, '');
            const path = urlMatch[4] || '';
            address = `${protocol}${host}${path}`;
            
            // Если порт был в адресе, извлекаем его
            if (urlMatch[3]) {
              port = parseInt(urlMatch[3], 10);
            }
          }
        }
        
        this.formData = {
          name: node.name || '',
          address: address,
          port: port,
          apiKey: node.apiKey || ''
        };
      } else {
        this.formData = {
          name: '',
          address: '',
          port: 8080,
          apiKey: ''
        };
      }
      
      this.visible = true;
    },
    close() {
      this.visible = false;
    }
  };

  const nodeModalVueInstance = new Vue({
    delimiters: ['[[', ']]'],
    el: '#node-modal',
    data: {
      nodeModal: nodeModal
    }
  });
</script>
{{end}}