controlador-descarga/views/site/asignar-descarga.php

<style>
  .site-card {
    min-height: 100vh;
    width: 100vw;
    padding: 20px;
    background: #ececec;
  }
  .content {
    width: 100%;
    height: 100%;
  }

  .full-width {
    width: 100%;
  }
</style>
<script type="text/babel">
  const url = "https://api.fourier.audio";
  const urlDescarga = "https://descarga.fourier.audio";
  const { LoadingOutlined } = window.icons;
  const { Card, Select, Spin, Row, Col, Form, Input, Button, Modal, DatePicker, Table, Popconfirm, Checkbox } = window.antd;
  const { Option } = Select;
  const { RangePicker } = DatePicker;

  const App = () => {
    const [loading, setLoading] = React.useState(true);
    const [estDisabled, setEstDisabled] = React.useState(false);
    const [grupos, setGrupos] = React.useState([]);
    const [estaciones, setEstaciones] = React.useState([]);
    const [estacion, setEstacion] = React.useState(null);
    const [modalVisible, setModalVisible] = React.useState(false);
    const [reiniciar, setReiniciar] = React.useState(false);
    const [data, setData] = React.useState([]);
    const [debug, setDebug] = React.useState(null);
    const [form] = Form.useForm();

    const loadingIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;

    let obtenerGrupos = async () => {
      const resp = await fetch(`${url}/na/grupo`)
      const json = await resp.json();
      setLoading(false);
      setGrupos(json.resultado);
    }

    React.useEffect(() => {
      obtenerGrupos();
    }, []);

    const onCityChange = async (id) => {
      setEstDisabled(true);
      const resp = await fetch(`${url}/na/grupo?id=${id}&expand=ciudades.monitoreable&ordenar=nombre`)
      const json = await resp.json();

      let ciudad = json.resultado[0].ciudades[0];
      let _estaciones = [];

      for(let estacion of ciudad.monitoreable) {
        _estaciones.push({
          "idCiudad": ciudad.id,
          "idEstacion": estacion.id,
          "clave": estacion.clave,
          "frecuencia": estacion.frecuencia,
          "siglas": estacion.siglas
        })
      }
 
      setEstaciones(_estaciones);
      setEstDisabled(false); 
    }

    const onStationChange = async (id) => {
      for(let est of estaciones) {
        if(est.idEstacion == id) {
          setEstacion(est);
          break;
        }
      }
    }

    const confirmar = (f) => {
      let body = {
        idPc: f.idPc,
        fi: f.fechas[0].format(),
        ff: f.fechas[1].format(),
        reiniciar: reiniciar,
        estaciones: data
      }

      const fi = f.fechas[0].format("DD/MM/YYYY");
      const ff = f.fechas[1].format("DD/MM/YYYY");

      Modal.confirm({
        title: `¿Guardar ${body.estaciones.length} estaciones en PC "${body.idPc}" desde ${fi} hasta ${ff}?`,
        // content: <pre>{JSON.stringify(data)}</pre>,
        onOk: () => { handleOk(body) } ,
      });
    }

    const handleOk = async (cuerpo) => {
      let resp = await fetch(`/descarga/guardar`, {
        method: "POST",
        body: JSON.stringify(cuerpo),
        headers: {
          "Content-Type": "application/json"
        }
      });

      setDebug(cuerpo);

      // form.setFieldsValue({ idPc: '' });
      // setData([]);
    }

    const agregarEstacion = () => {
      if(estacion === null) {
        Modal.warning({
          title: 'No eligió una estación',
          content: 'Por favor seleccione una estación'
        });
        return;
      }

      const found = data.find(e => e.idEstacion === estacion.idEstacion);
      if(found) {
        Modal.warning({
          title: `La Estación ${estacion.siglas} ya se encuentra en la lista`
        });
        return;
      }

      let _data = [...data];
      _data.push({
        key: `${estacion.idCiudad}-${estacion.idEstacion}`,
        ...estacion,
      });

      form.setFieldsValue({ idEstacion: null })
      setEstacion(null);
      setData(_data);

      return;
    }

    const obtenerEstacionDelPC = async () => {
      let idPc = form.getFieldValue('idPc');
      if(!idPc) {
        Modal.warning({
          title: 'No eligió un PC',
          content: 'Por favor seleccione un PC'
        });
        return;
      }

      let resp = await fetch(`/estacion/por-pc?pc=${idPc}`);
      let data = await resp.json();

      setData(data.resultado);

    }

    const eliminar = (key) => {
      const _data = [...data];
      setData(_data.filter(item => item.key !== key) );
    }

    const columnas = [
      {
        title: 'ID Ciudad',
        dataIndex: 'idCiudad',
        key: '1',
      },
      {
        title: 'Clave',
        dataIndex: 'clave',
        key: '2',
      },
      {
        title: 'Eliminar',
        key: '3',
        render(r) {
          return (
            <Popconfirm 
              title="¿Eliminar?" 
              okText="OK"
              cancelText="Cancelar"
              onConfirm={() => eliminar(r.key)}>
              <a>Eliminar</a>
            </Popconfirm>
          )
        }
      }
    ];

    return (
      <div className="site-card">
        { loading 
          ? <Spin indicator={loadingIcon} />
          : <Card className="content">
              <Form
                form={form}
                layout="vertical"
                onFinish={confirmar}
                >
                <Row gutter={8}>
                  <Col span={6}>
                    <Form.Item
                      label="ID PC"
                      name="idPc"
                      rules={[{ required: true, message: 'Ingresa el ID del PC' }]}
                    >
                      <Input size="large" />
                    </Form.Item>
                  </Col>
                  <Col span={6}>
                    <Form.Item
                      label="Rango de Fechas"
                      name="fechas"
                      rules={[{ required: true, message: 'Ingresa el Rango de Fechas' }]}
                    >
                      <RangePicker 
                        showTime={{
                          hideDisabledOptions: true,
                          defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                        }}
                        format="DD-MM-YYYY HH:mm:ss"
                        size="large"
                        />
                    </Form.Item>
                  </Col>
                  <Col span={6}>
                    <Form.Item
                      label="&nbsp;"
                      name="reiniciar"
                    >
                      <Checkbox size="large" checked={reiniciar} onChange={(e) => { setReiniciar(e.target.checked) }}>
                        ¿Reiniciar descargas?
                      </Checkbox>
                    </Form.Item>
                  </Col>
                </Row>
                <Row gutter={8}>
                  <Col span={6}>
                    <Form.Item
                      label="Ciudad"
                      name="idCiudad"
                      >
                      <Select
                        showSearch
                        size="large"
                        style={{ width: '100%' }}
                        placeholder="Elige un grupo"
                        optionFilterProp="children"
                        onChange={onCityChange}
                        filterOption={(input, option) =>
                          option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        >
                        { grupos && grupos.map((item) => { return <Option key={`grupo-${item.id}`} value={item.id}>{item.nombre}</Option> }) }
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col span={6}>
                    <Form.Item
                      label="Estación"
                      name="idEstacion"
                      >
                      <Select
                        disabled={estDisabled}
                        showSearch
                        size="large"
                        style={{ width: '100%' }}
                        placeholder="Elige una estación"
                        optionFilterProp="children"
                        onChange={onStationChange}
                        filterOption={(input, option) =>
                          option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        >
                        { estaciones && estaciones.map((item) => { return <Option key={`est-${item.idEstacion}`} value={item.idEstacion}>{item.frecuencia} - {item.siglas} - {item.clave}</Option> }) }
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col span={3}>
                    <Form.Item label="&nbsp;" >
                      <Button className="full-width" size="large" onClick={agregarEstacion}>Agregar</Button>
                    </Form.Item>
                  </Col>
                </Row>
                <Row gutter={8}>
                  <Col span={12}>
                    <Table className="full-width" dataSource={data} columns={columnas} />
                  </Col>
                  <Col span={3}>
                    <Button className="full-width" size="large" onClick={obtenerEstacionDelPC}>Estaciones del PC</Button>
                  </Col>
                </Row>
                <Row>
                  <Col span={6}>
                    <Form.Item label="&nbsp;" >
                      <Button type="primary" htmlType="submit" size="large" style={{width: '100%'}}>Guardar</Button>
                    </Form.Item>
                  </Col>
                </Row>
              </Form>
              <Row>
                <Col className="full-width">
                  {debug && <pre className="full-width">{JSON.stringify(debug)}</pre>}
                </Col>
              </Row>
            </Card>
        }
      </div>
    );
  }

  ReactDOM.render(<App />, document.getElementById('root'));
</script>