controlador-descarga/views/site/consulta.php

<script type="text/javascript" src="https://unpkg.com/@ant-design/graphs@latest/dist/graphs.min.js"></script>

<style>
  .site-card {
    height: 100vh;
    width: 100vw;
    padding: 20px;
    background: #ececec;
  }
  .content {
    width: 100%;
    height: 100%;
  }
  .grid {
    width: 25%;
    text-align: center;
  }
  .full-width {
    width: 100%;
  }
</style>
<script type="text/babel">
  const url = "https://descarga.fourier.audio";
  const { LoadingOutlined } = window.icons;
  const { Card, Form, Input, Row, Col, Button, DatePicker, Spin, Table } = window.antd;
  const { RangePicker } = DatePicker;

  const App = () => {

    const [cargando, setCargando] = React.useState(false);
    const [descargas, setDescargas] = React.useState([]);
    const [inicio, setInicio] = React.useState(null);
    const [form]  = Form.useForm();

    const onFinish = async (data) => {
      setCargando(true);
      const idPc = data.idPc;
      const fi = data.fechas[0].format("YYYY-MM-DD HH:mm:ss");
      const ff = data.fechas[1].format("YYYY-MM-DD HH:mm:ss");

      const resp = await fetch(`${url}/descarga/por-pc?pc=${idPc}&fi=${fi}&ff=${ff}`);
      const res = await resp.json();

      setDescargas(res.resultado);
      setCargando(false);
    }

    let onCalendarChange = (mf, f, r) => {
      if(r.range === "start") {
        setInicio(mf[0]);
      }
    }

    let disabledDate = (current) => {
      if(inicio === null) {
        return false;
      } else {
        let disabled = current < inicio.add(7, 'days')
        console.log(!disabled, current, inicio.add(7, 'days'))
        return !disabled;
      }
    }

    const columnas = [
      {
        title: 'Estación',
        dataIndex: 'clave',
        key: '1',
      },
      {
        title: 'Fecha',
        dataIndex: 'fecha',
        key: '2',
      },
      {
        title: 'Descargas',
        key: '3',
        render(r) {
          return (<div>{r.descargados}/{r.pendientes + r.descargados}</div>)
        }
      }
    ];

    return (
      <div className="site-card">
        <Card className="content">
          <Form
            form={form}
            layout="vertical"
            onFinish={onFinish}
            >
            <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="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;" >
                  <Button type="primary" htmlType="submit" size="large">Consultar</Button>
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <Row>
            { cargando && <LoadingOutlined style={{ fontSize: 24 }} spin />}
            <Col span={16}>
              <Table className="full-width" dataSource={descargas} columns={columnas} />
            </Col>
          </Row>
        </Card>
      </div>
    );
  }

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