Software: Apache/2.4.41 (Ubuntu). PHP/8.0.30 

uname -a: Linux apirnd 5.4.0-204-generic #224-Ubuntu SMP Thu Dec 5 13:38:28 UTC 2024 x86_64 

uid=33(www-data) gid=33(www-data) groups=33(www-data) 

Safe-mode: OFF (not secure)

/var/www/html/beximco/mrp_process/src/pages/   drwxr-xr-x
Free 13.09 GB of 57.97 GB (22.58%)
                            Encoder    Tools    Proc.    FTP brute    Sec.    SQL    PHP-code    Update    Self remove    Logout    

Viewing file:     Home.js (16.38 KB)      -rw-r--r--

import "../index.css";
import { useState, useEffect } from "react";
import axios from "axios";
import { v4 as uuidv4 } from "uuid";
import swal from "sweetalert";

const token =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NCwiaWF0IjoxNjYyNTQ1NjY3LCJleHAiOjE5NzgxMjE2Njd9.5lVlCpiqLqBmdASH-06JubosdJ4jmHwqkepXIkaGr3E";

const initialState = {
  initialized: true,
  start: false,
  stop: false,
  initializedDate: "",
  startDate: "",
  stopDate: "",
};

function Home() {
  const [initialize, setInitialize] = useState(true);
  const [start, setStart] = useState(true);
  const [stop, setStop] = useState(true);
  const [machine, setMachine] = useState(null);
  const [machineStatus, setMachineStatus] = useState(0);
  const [queue, setQueue] = useState(null);
  const [beam, setBeam] = useState("");
  const [data, setData] = useState(initialState);
  const [order, setOrder] = useState(null);
  const [selectedOrder, setSelectedOrder] = useState("");

  useEffect(() => {
    try {
      axios
        .get(
          "http://127.0.0.1:1337/machines?machine_id=200001&_sort=id:DESC&_limit=1",
          {
            headers: {
              Authorization: "Bearer " + token,
            },
          }
        )
        .then((response) => {
          // console.log(response.data[0].id);
          setMachine(response.data[0]);
          setMachineStatus(response.data[0].status);
        });

      axios
        .get("http://127.0.0.1:1337/orders", {
          headers: {
            Authorization: "Bearer " + token,
          },
        })
        .then((response) => {
          console.log(response.data);
          setOrder(response.data);
        });
    } catch (error) {
      console.log(error.message);
    }
  }, []);

  const handleInitialize = async (event) => {
    const time = new Date().toLocaleDateString("en-us", {
      weekday: "long",
      year: "numeric",
      month: "numeric",
      hour: "numeric",
      minute: "numeric",
      second: "numeric",
    });
    const newState = {
      ...data,
      initialized: false,
      start: true,
      initializedDate: time,
    };

    if (machine.status == 0) {
      setInitialize(true);
      const updateMachine = await axios.put(
        "http://127.0.0.1:1337/machines/" + machine.id,
        {
          status: 1,
          order_id: selectedOrder,
          factory_id: "Factory101",
        },
        {
          headers: {
            Authorization: "Bearer " + token,
          },
        }
      );
      if (updateMachine.data) {
        setMachineStatus(1);

        setTimeout(async () => {
          var queueProcess = await axios.get(
            `http://127.0.0.1:1337/queue?machine_id=${machine.machine_id}&stage=stage 1&status=1&process_name=creeling&_sort=id:DESC&_limit=1`,
            {
              headers: {
                Authorization: "Bearer " + token,
              },
            }
          );
          if (queueProcess.data.length > 0) {
            setData(newState);
            setInitialize(true);
            console.log(queueProcess.data[0].id);
            setQueue(queueProcess.data[0]);
            setBeam(queueProcess.data[0].equipment_id);
            setStart(false);
          } else {
            const updateMachine = await axios.put(
              "http://127.0.0.1:1337/machines/" + machine.id,
              {
                status: 0,
              },
              {
                headers: {
                  Authorization: "Bearer " + token,
                },
              }
            );
            if (updateMachine.data) {
              setMachineStatus(0);
              setInitialize(false);
            }
            swal({
              icon: "info",
              text: "Make Sure Equipments are Scanned and Updated in Queue!",
            });
          }
        }, 30000);
      }
    }
  };

  const handleStart = async (event) => {
    const time = new Date().toLocaleDateString("en-us", {
      weekday: "long",
      year: "numeric",
      month: "numeric",
      hour: "numeric",
      minute: "numeric",
      second: "numeric",
    });
    event.currentTarget.disabled = true;
    setStop(false);
    const newState = {
      ...data,
      stop: true,
      start: false,
      startDate: time,
    };
    setData(newState);

    if (machineStatus == 1) {
      const updateMachine = await axios.put(
        "http://127.0.0.1:1337/machines/" + machine.id,
        {
          status: 2,
        },
        {
          headers: {
            Authorization: "Bearer " + token,
          },
        }
      );
      if (updateMachine.data) {
        setMachineStatus(2);

        const updateQueue = await axios.put(
          `http://127.0.0.1:1337/queue/${queue.id}`,
          {
            status: 2,
          },
          {
            headers: {
              Authorization: "Bearer " + token,
            },
          }
        );
      }
    }
  };

  const handleStop = async (event) => {
    const time = new Date().toLocaleDateString("en-us", {
      weekday: "long",
      year: "numeric",
      month: "numeric",
      hour: "numeric",
      minute: "numeric",
      second: "numeric",
    });
    event.currentTarget.disabled = true;
    const newState = {
      ...data,
      stop: false,
      initialized: true,
      stopDate: time,
    };
    setData(newState);

    if (machineStatus == 2) {
      const updateMachine = await axios.put(
        "http://127.0.0.1:1337/machines/" + machine.id,
        {
          status: 0,
        },
        {
          headers: {
            Authorization: "Bearer " + token,
          },
        }
      );
      if (updateMachine.data) {
        setMachineStatus(0);
        setInitialize(false);

        // var digits = Math.floor(Math.random() * 9000000000) + 1000000000;
        const process_id = uuidv4();
        const logsBody = {
          process_id: process_id,
          machine_id: machine.machine_id,
          machine_type: "creel",
          items_id: queue.equipment_id,
          equipment_type: "warped_beam",
          order_id: queue.order_id,
          process_stage: queue.stage,
          factory_id: queue.factory_id,
          start_time: queue.created_at,
          end_time: new Date(),
          process_name: "creeling",
          input: "yarn_bags",
          output: "warped_beam",
          status: 1,
          output_id: beam,
        };

        await axios.post("http://127.0.0.1:1337/finished_process", logsBody, {
          headers: {
            Authorization: "Bearer " + token,
          },
        });
        setBeam(null);

        const queueBody = {
          // machine_type: "creel",
          // machine_id: "200001",
          equipment_id: String(queue.equipment_id),
          equipment_type: "warped_beam",
          order_id: queue.order_id,
          factory_id: queue.factory_id,
          stage: "stage 2",
          status: 0,
          process_name: "slasher_dying",
          input: "warped_beam",
          output: "sizing_beam",
        };

        await axios.post("http://127.0.0.1:1337/queue", queueBody, {
          headers: {
            Authorization: "Bearer " + token,
          },
        });

        axios
          .delete(`http://127.0.0.1:1337/queue/${queue.id}`, {
            headers: {
              Authorization: "Bearer " + token,
            },
          })
          .then(() => {
            setQueue(null);
          });
      }
    }
  };

  const handleChange = async (event) => {
    setInitialize(false);
    setSelectedOrder(event.target.value);
    setOrder(null);
  };

  const style = {
    withTitle2: {
      fontSize: "15px",
      fontWeight: 700,
      lineHeight: "1em",
      color: "#FFFFFF",
      paddingLeft: "20px",
    },
  };
  return (
    <>
      <header
        id="topnav"
        className="defaultscroll sticky"
        style={{ backgroundColor: "#3b4da7d1" }}
      >
        <div className="container">
          <div>
            <a className="logo" href="#">
              <img src="images/favicon.ico" height="24" alt="" />
              <span style={style.withTitle2}>CLOUDMRP-BEXIMCO DENIMS </span>
            </a>
          </div>
        </div>
      </header>

      <section className="section mt-40">
        <div className="container">
          <div className="row align-items-center">
            {order && (
              <div className="col mt-4 pt-2" id="select-box">
                <div className="component-wrapper rounded shadow">
                  <div className="p-4 border-bottom">
                    <h4 className="title mb-0"> Select Order ID </h4>
                  </div>

                  <div className="p-4">
                    <div className="form-group mb-0">
                      <select
                        className="form-control custom-select"
                        onChange={handleChange}
                      >
                        {order.map((order) => (
                          <option value={order.order_id} key={order.id}>
                            {order.order_id}
                          </option>
                        ))}
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            )}

            <div className="col-lg-12 mt-4 pt-2">
              <div className="card work-details rounded bg-light border-0">
                <div className="card-body">
                  <h5 className="card-title text-white border-bottom pb-3 mb-3">
                    Machine Type : Warping Creel
                  </h5>
                  <dl className="row mb-0">
                    <dt className="col-md-4 col-5 text-white">Machine ID :</dt>
                    <dd className="col-md-8 col-7 text-white">
                      {machine ? machine.machine_id : ""}
                    </dd>

                    <dt className="col-md-4 col-5 text-white">Factory ID :</dt>
                    <dd className="col-md-8 col-7 text-white">Factory101</dd>

                    <dt className="col-md-4 col-5 text-white">Order ID :</dt>
                    <dd className="col-md-8 col-7 text-white">
                      {selectedOrder}
                    </dd>

                    <dt className="col-md-4 col-5 text-white">Location :</dt>
                    <dd className="col-md-8 col-7 text-white">Beximco, BD</dd>

                    <dt className="col-md-4 col-5 text-white">Status :</dt>
                    <dd className="col-md-8 col-7 text-white">
                      {machineStatus == 1
                        ? "INITIALIZED"
                        : machineStatus == 2
                        ? "PROCESSING"
                        : "IDLE"}
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div className="row">
            <div
              className="col-lg-4 col-md-6 col-12 mt-4 "
              style={{ display: data.initialized ? "block" : "none" }}
            >
              <div className="media align-items-center shadow rounded p-4 features event-schedule rounded border">
                <div className="icons m-0 rounded h2 text-primary text-center px-3">
                  <i className="uil uil-envelope-check"></i>
                </div>
                <div className="content ml-4">
                  <h5 className="mb-1">
                    <a href="#" className="text-dark">
                      Initialize the Machine
                    </a>
                  </h5>
                  {/* <p className="text-muted mb-0">
                    This is required when, for text is not yet available.
                  </p> */}
                  <div className="mt-2">
                    <button
                      className="btn btn-sm btn-primary"
                      onClick={handleInitialize}
                      disabled={initialize}
                    >
                      Initialize
                    </button>
                    {/* <p className="text-muted mb-0 mt-2">
                      This is required when, for text is not yet available.
                    </p> */}
                  </div>
                </div>
              </div>
            </div>

            <div
              className="col-lg-4 col-md-6 col-12 mt-4"
              style={{ display: data.start ? "block" : "none" }}
            >
              <div className="media align-items-center shadow rounded p-4 features">
                <div className="icons m-0 rounded h2 text-primary text-center px-3">
                  <i className="uil uil-envelope-check"></i>
                </div>
                <div className="content ml-4">
                  <h5 className="mb-1">
                    <a href="#" className="text-dark">
                      Start the Machine
                    </a>
                  </h5>
                  {/* <p className="text-muted mb-0">
                    This is required when, for text is not yet available.
                  </p> */}
                  <div className="mt-2">
                    <button
                      className="btn btn-sm btn-primary"
                      // disabled={isAnonymous ? true : false}
                      disabled={start}
                      onClick={handleStart}
                    >
                      Start
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div
              className="col-lg-4 col-md-6 col-12 mt-4 pt-2 pt-sm-0"
              style={{ display: data.stop ? "block" : "none" }}
            >
              <div className="media align-items-center shadow rounded p-4 features">
                <div className="icons m-0 rounded h2 text-primary text-center px-3">
                  <i className="uil uil-webcam"></i>
                </div>
                <div className="content ml-4">
                  <h5 className="mb-1">
                    <a href="#" className="text-dark">
                      Stop the Machine
                    </a>
                  </h5>
                  {/* <p className="text-muted mb-0">
                    This is required when, for text is not yet available.
                  </p> */}
                  <div className="mt-2">
                    <button
                      className="btn btn-sm btn-primary"
                      disabled={stop}
                      onClick={handleStop}
                    >
                      Stop
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div className="col-lg-6 mt-4">
              <div className="media  align-items-center shadow rounded event-schedule rounded border">
                <div className="card-body">
                  <div className="media">
                    {/* <img
                      src="images/06.jpg"
                      className="avatar avatar-medium rounded-circle img-thumbnail"
                      alt=""
                    /> */}
                    <div className="media-body content ml-3">
                      <h4>
                        <a href="#" className="text-dark title">
                          BEAM ID: {beam}
                        </a>
                      </h4>
                      <br />
                      <p
                        className="text-muted location-time"
                        // style={{ textAlign: "justify" }}
                      >
                        <span className="text-dark h6 ">INITIALIZED:</span>{" "}
                        {data.initializedDate ? data.initializedDate : ""}
                        <br /> <br />
                        <span className="text-dark h6">START:</span>{" "}
                        {data.startDate} <br /> <br />
                        <span className="text-dark h6">STOP:</span>{" "}
                        {data.stopDate}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default Home;