- import React, { useEffect, useState } from "react";
- import "../DataTable/Table.css";
- import { FaCircle } from "react-icons/fa";
- import Header from "./TableHeader";
- import axios from "axios";
- import { Buffer } from 'buffer';
- import { BsFillCircleFill, BsArrowLeftRight } from "react-icons/bs";
- const TableCheck = props => {
- const [comments, setdata] = useState([]);
- const headers = [
- { name: "", field: "thumbnail", sortable: true },
- { name: "Clip", field: "name", sortable: true },
- { name: "Slug Name", field: "creator", sortable: true },
- { name: "Channel", field: "Duration", sortable: false },
- { name: "Status", field: "End Time", sortable: true },
- { name: "Mode", field: "Loaded Clip", sortable: true },
- { name: "Start Time", field: "Start Time", sortable: true },
- { name: "Duration", field: "Object_id", sortable: true },
- ];
- useEffect(() => {
- getData1();
- }, [props.val, props.NextVal]);
- async function getData1() {
- console.log("Ssending Props In table", props.val, props.NextVal);
- var data = {
- CURRENTRDL: props.val,
- NEXTRDL: props.NextVal
- }
- axios({
- method: 'POST',
- url: `http://localhost:9763/api/setRundown`,
- data,
- headers: {
- 'Accept': 'application/json',
- 'Content-Type': 'application/json',
- 'Access-control-allow-origin': '*'
- },
- auth: {
- username: 'admin',
- password: 'password'
- }
- }).then(response => {
- setdata([...Object.values(response.data).flat()]);
- console.log("table_check", [response.data]);
- }).catch(error => {
- console.log("Error In Post Data", error);
- });
- }
- const handleKeyDown = (event) => {
- event.preventDefault();
- //up and Down key
- const active = document.activeElement;
- active.addEventListener('keydown', function (event) {
- switch (event.key) {
- case "ArrowUp":
- active?.previousElementSibling?.focus();
- event.stopPropagation(0);
- break;
- case "ArrowDown":
- active?.nextElementSibling?.focus();
- break;
- default: break;
- }
- });
- }
- return (
- <div className="mainContent">
- <div className="tableHeaderBody">
- <div className="TableText">{props.val}</div> <div className="ClossIcon"><FaCircle style={{ color: "#FC0000", width: "10px", height: "10px", alignItems: "right" }} /></div>
- </div>
- <div className="tableBody">
- <table className="table" >
- <Header
- headers={headers}
- />
- <tbody >
- {comments.map((comment) => {
- //Display Hex to base64 image format
- const base64 = Buffer.from(comment.Thumbnail, 'hex').toString('base64');
- //console.log(base64);
- if (comment.Status === 1 || comment.Mode === false) {
- return (
- <tr key={comment.SlugName} tabIndex={0} className="border_bottom" onKeyDown={handleKeyDown}>
- <td style={{ color: "white", width: "200px" }}>
- <img src={`data:image/jpeg;base64,${base64}`} alt="Clip Thumbnail" width="100%" />
- </td>
- <td style={{ color: "white", width: "440px" }}>{comment.ClipName}</td>
- <td style={{ color: "white", width: "250px" }}>{comment.SlugName}</td>
- <td style={{ color: "white", width: "250px" }}>{comment.ChannelName}</td>
- <td style={{ color: "white", width: "140px" }}><div className="bordercolor"><BsFillCircleFill style={{ color: "#41fc00", width: "20px" }} /> Ready</div> </td>
- <td style={{ color: "white" }}><BsArrowLeftRight style={{ color: "rgb(145, 143, 143)" }} /></td>
- <td style={{ color: "white" }}>{comment.StartTime}</td>
- <td style={{ color: "white" }}>{comment.Duration}</td>
- </tr>)
- }
- else if (comment.Status === 0 || comment.Mode === true) {
- return (
- <tr key={comment.SlugName} tabIndex={0} className="border_bottom" onKeyDown={handleKeyDown}>
- <td style={{ color: "white", width: "200px" }}>
- <img src={`data:image/jpeg;base64,${base64}`} alt="Clip Thumbnail" width="100%" />
- </td>
- <td style={{ color: "white", width: "440px" }}>{comment.ClipName}</td>
- <td style={{ color: "white", width: "250px" }}>{comment.SlugName}</td>
- <td style={{ color: "white", width: "250px" }}>{comment.ChannelName}</td>
- <td style={{ color: "white", width: "140px" }}><div className="bordercolor"><BsFillCircleFill style={{ color: "red", width: "20px" }} /> Not Ready</div> </td>
- <td style={{ color: "white" }}><BsArrowLeftRight style={{ color: "#41fc00" }} /></td>
- <td style={{ color: "white" }}>{comment.StartTime}</td>
- <td style={{ color: "white" }}>{comment.Duration}</td>
- </tr>)
- }
- }
- )
- }
- </tbody>
- </table>
- </div>
- </div>
- )
- }
- export default TableCheck;
[text] Code
Viewer
*** This page was generated with the meta tag "noindex, nofollow". This happened because you selected this option before saving or the system detected it as spam. This means that this page will never get into the search engines and the search bot will not crawl it. There is nothing to worry about, you can still share it with anyone.
Editor
You can edit this paste and save as new: