Category: javascript

Am trying to implement a feature where an item is to be deleted from local storage when a user clicks a button. The item is part of an array stored in local storage. However am not able to
here is how the item is saved

const favBtns=meal.querySelectorAll(".fav-btn i")
    const images = document.querySelectorAll('.meal-header > img')
    favBtns.forEach((favBtn,i)=>{
      favBtn.addEventListener("click", ()=>{
        favBtn.classList.toggle("active")
        console.log(images[i].src, images[i].alt)     
        myFavMeals.push({src: images[i].src, alt: images[i].alt})
        localStorage.setItem("myFavMeals", JSON.stringify(myFavMeals))
        showMeal
    })     
})

here is how am trying to delete the item

   function clearfav(){
        const clears=document.querySelectorAll("i#clear.fa.fa-window-close")
      clears.forEach(clear=>{
        clear.addEventListener("click",()=>{
          let favmeals= JSON.parse(localStorage.getItem("myFavMeals"))
          favmeals.forEach((favmeals,i)=>{
            favmeals.splice(favmeals[i],1)
            showMeal()
           })
        })   
      })
      }

After selecting 5 and 2, does any solution for how could get a string output like: 5 greater than 2 ?

<p class="showTxt" id="showTxt">

  <select size="2">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  <p> greater than</p>
  <select size="1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</p>

i am using AG-Grid in react, I want to rename the row title count which appear automatically while using aggregation. the photo will help you to understand better.

look at the row which says “United States” and then (1109) which is count of matching pairs i want to remove that count from there. can anyone help me in this.

Here is my situation

1. In my web renderer, I send all api calls based on baseUrl: ‘/api’
   

2. In my electron main, I serve all my web static files based on ‘File://’ protocal
   

So the problem is

How do I proxy all 'file:///api/*' api calls to a specific url, like proxy to 'http://myapiserver.com/api/*'

I’m trying to update content in an active loaded page using webhook response.

Earlier, I used to trigger the function using setTimeout for every 5 secs but noticed its kind of increasing server load. So, now whenever there is a change on the database a webhook will be triggered through which I will update the content on the loaded page without refreshing it.

But how do I tell a webhook URL to change/update content on another page.?

so far code goes as :
PAGE#1:

<div id="loader_div">Some content</div>
<script>
function loadlink(){
    $('#loader_div').load('loading.php',function () {
         $(this).unwrap();
    });
}

loadlink(); // This will run on page load

setInterval(function(){
    loadlink() 
}, 5000); // this will run after every 5 seconds
</script>

loading.php

<p>some other content that i got from database</p>

Now the webhook URL is loading.php which gets the new update from the database, but how do I trigger the ‘loadlink();’ on the page1 without refreshing it and using set timeout..?

Please do not downvote the query, I’m trying my best to ask properly as per guidelines. You got to give time to rookies.

Any help is appreciated.

var provider = new Cesium.WebMapTileServiceImageryProvider({
    url: 'xxx.xx.xxx',
    layer: 'RESPL_2018',
    style: 'default',
    format: 'image/png',
    tileMatrixSetID: 'xxx',
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
});

This is how the map is loaded.I successfully loaded a map,but the latitude of the loaded map is offset by + 50 degrees. Is there any way to reset the starting point of the WMTS loading!

I managed to find a way to create a folder directory from reading a Google Sheet linked below.

https://docs.google.com/spreadsheets/d/1qgDd8PEmHSYz5IsN9banYBjbmAyoLLVe3WMnOvmHdlE/edit#gid=0

Now, my predicament is to transfer individual files into those newly created folders and the relevant search Depth. I thought this would be possible; however, I am now thinking it isn’t hence the limited code below.

This is because for each file (Column C), I would need to read the source parent folder ID (Column D) and then convert this to the destination folder equivalent recorded in Column F. I’m not sure how I can go about doing this? Moreover, should the Google Sheet be sorted into folders and files in a first instance (Column C), ideally the solution should still work when files and folders are out of order.

I know this is not the best solution; however, I am looking for a solution I can understand in order to advance my understanding.

function copyFiles() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const ws = ss.getSheetByName('Details');
  const range = ws.getDataRange();
  const values = range.getValues();
  values.forEach(function(row, index) {
    if (row[2] == 'File'){

    } else {

    }
    })
}

Thank you in advance

Unsubscribe header for mailgun not working.

I am making a web page with Angular for Frontend and Node.js for Backend, I am using MySql database with phpMyAdmin in Hostinger and I can’t found a datatype of MySql to save a base64 image long strings.

The problem is that this strings of base64 are too long to save in MySql database.

My understanding of revealing module pattern is as follows:

CODE #1

const iifeModulePattern = (function () {
  const secretSeed = 999; // ← private
  const logSecretCode = function(){console.log(secretSeed+1)};
  return {methodForPublic : logSecretCode};
})();

iifeModulePattern.methodForPublic();

So far I hope I’m not wrong. My question is:

1. Won’t the following Code #2 serve same purpose?
2. If it does, why is Code #1 popular than Code #2?
3. If it doesn’t, what’s the difference?

CODE #2

const modulePattern = () => {
  const secretSeed = 999; // ← private
  const logSecretCode = function(){console.log(secretSeed+1)};
  return {methodForPublic : logSecretCode};
};

modulePattern().methodForPublic();

I won’t store “secret” codes (like passwords) in this way. The above codes are just examples.

Just trying to run through the basic Hacker Rank practice tests.

They often give you an array of integers (arr) as input. Supposedly. However, using their “JavaScript(Node.js),” attempting to console.log(arr) at the outset of the function to verify the data type simply returns undefined.

Any array methods I use, whether syntactically correct or not, return undefined. Trying to console.log(“hello”) returns undefined. Its pretty infuriating that the solution is some basic difference. Lil help?

Thanks.

I have JSON given below. Using this JSON need to create the 3D Box inside the 3D outline cube as shown in given image.

{
  "request_id": "614bd0e3de7f3745708a9fa4",
  "completed_time_UTC": "2022-02-06T20:56:19Z",
  "tracks": [
    {[![enter image description here][1]][1]
      "purchase_orders": ["1153511"],
      "vehicle_id": "be8c578a-c59c-4348-8148-50cfbeb5a6cd",
      "vehicle_type": "TRAILER_48T",
      "number_of_pallets": 14,
      "pallets": [
        {
          "purchase_orders": ["1153511"],
          "pallet_id": "fe76b310-d751-48eb-84f8-3ea47c7a94bd",
          "pallet_type": "BLANCA",
          "number_of_skus": 65,
          "skus": [
            {
              "sku": "17503006575454",
              "length": 32,
              "width": 27,
              "height": 26,
              "position": [0, 54, 26]
            },
            {
              "sku": "17503006575454",
              "length": 32,
              "width": 27,
              "height": 26,
              "position": [0, 0, 26]
            },
            {
              "sku": "17503006575454",
              "length": 26,
              "width": 27,
              "height": 26,
              "position": [64, 59, 78]
            },
            {},
            {
              "sku": "17503006575454",
              "length": 32,
              "width": 27,
              "height": 26,
              "position": [59, 54, 80]
            }
          ]
        },
        {
          "purchase_orders": ["1153511"],
          "pallet_id": "e693e8bd-e841-4a05-8912-aa0e837ba256",
          "pallet_type": "BLANCA",
          "number_of_skus": 65,
          "skus": [
            {
              "sku": "17503006575454",
              "length": 32,
              "width": 27,
              "height": 26,
              "position": [0, 0, 0]
            },
            {
              "sku": "17503006575454",
              "length": 32,
              "width": 27,
              "height": 26,
              "position": [0, 0, 26]
            },
            {},
            {
              "sku": "17503006575454",
              "length": 32,
              "width": 27,
              "height": 26,
              "position": [58, 54, 78]
            }
          ]
        }
      ]
    }
  ],
  "schemaName": "http://www.schema.org/logistics/1"
}

In my angular project, I have placed few static html files(sampleText.html in this case) in src/assets/html folder. and in one of my component im trying to fetch and show it. Im using below code to do it. It works perfectly fine when im running npm start and im able to see the html part in localhost as desired. but when i build the same and host using aws amplify and it says “Please enable JavaScript to continue using this application.”
here is the frontend code:
ts file:

fetch(`../../assets/html/sampleText.html`).then(res => res.text()).then(data => {
  this.content =data;
})

in html im rendering as: <div [innerHTML]=”content”>

I want to put data from HTML to data in chart.js. Could you show me the way to do that? Thank you very much.

This is my query code in HomeController.cs :

public JsonResult Get()
        {
            using (var connection = new SqlConnection(ConfigurationManager.ConnectionStrings["ValueConnection"].ConnectionString))
            {
                connection.Open();
                using (SqlCommand command = new SqlCommand(@"SELECT [DeviceID],[Value] FROM [dbo].[Device1] WHERE [DeviceID]='PM1'", connection))
                {
                    command.Notification = null;

                    SqlDependency dependency = new SqlDependency(command);
                    dependency.OnChange += new OnChangeEventHandler(dependency_OnChange);

                    if (connection.State == ConnectionState.Closed)
                        connection.Open();

                    SqlDataReader reader = command.ExecuteReader();

                    var listCus = reader.Cast<IDataRecord>()
                        .Select(x => new
                        {
                            DeviceID = (string)x["DeviceID"],
                            Value = (double)x["Value"],
                        }).ToList();
                    return Json(new { listCus = listCus }, JsonRequestBehavior.AllowGet);
                }
            }
        }

This is my text function to get data with signal :

<script type="text/javascript">
    $(function () {
        //Proxy created on the fly
        var cus = $.connection.cusHub;

        //Declare a function on the job hub so the server can invoke
        cus.client.displayValue = function () {
            getData();
        };

        //Start the connection
        $.connection.hub.start();
        getData();
    });

    function getData() {
        var $tbl = $('#tblValue');
        $.ajax({
            url: $("#Get").val(),
            type: 'GET',
            datatype: 'json',
            success: function (data) {
                $tbl.empty();
                $.each(data.listCus, function (i, model) {
                    $tbl.append
                        (
                            '<h2>' + model.Value + '</h2>'
                        );
                });
            }
        });
    }
</script>

And how I display data in HTML :

<h2 id="tblValue"></h2>

And now how can I put data from HTML to data in Chart.js code. Anyone can instruct me the way pls :

<script>
        var ctx = document.getElementById("percent-chart2");
        if (ctx) {
            ctx.height = 209;
            var myChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    datasets: [
                        {
                            label: "My First dataset",
                            data: [ *, *, * ],
                            backgroundColor: [
                                '#00b5e9',
                                '#fa4251',
                                '#006400'
                            ],
                            hoverBackgroundColor: [
                                '#00b5e9',
                                '#fa4251',
                                '#006400'
                            ],
                            borderWidth: [
                                0, 0, 0
                            ],
                            hoverBorderColor: [
                                'transparent',
                                'transparent',
                                'transparent'
                            ]
                        }
                    ],
                    labels: [
                        'STATION 1',
                        'STATION 2',
                        'STATION 3'
                    ]
                },
                options: {
                    maintainAspectRatio: false,
                    responsive: true,
                    cutoutPercentage: 87,
                    animation: {
                        animateScale: true,
                        animateRotate: true
                    },
                    legend: {
                        display: false,
                        position: 'bottom',
                        labels: {
                            fontSize: 14,
                            fontFamily: "Poppins,sans-serif"
                        }

                    },
                    tooltips: {
                        titleFontFamily: "Poppins",
                        xPadding: 15,
                        yPadding: 10,
                        caretPadding: 0,
                        bodyFontSize: 16,
                    }
                }
            });
        }
</script>

I just made a multi-select box. Selecting one of the upper categories changes the lower category and table. I have made changes, but they should not be changed immediately, but should be modified to change when the search button is pressed. I’m attaching the code below. I wonder where to add the code. Please Help me. ….

import ~

const cx = className.bind(style);

const TableCard = styled(Card)`
  padding: 0;
  border-radius: 6px;

  table {
    border-radius: 6px;

    tr {
      border-radius: 6px;
    }
  }
`;

export default function ManageLog() {
    const [userInfo] = useUserInfo();

    const [userInfoLog, setUserInfoLog] = useState({
        name: "User Info",
        userSeq: 0
    });

    const [memberType, setMemberType] = useState({ 
        name: "Member Type", 
        memberSeq: 0
    });

    const [connectType, setConnectType] = useState({
        name: "Connect Type",
        connectSeq: 0
    });

    const [errorLog, setErrorLog] = useState({
        name: "Error Log",
        errorSeq: 0
    });
    
    const userInfoLogDefaultValue = useMemo(() => {
        return {
          name: "User Info",
          userSeq: 0
        };
      }, []);

      const memberTypeDefaultValue = useMemo(() => {
        return {
          name: "Member Type",
          memberSeq: 0
        };
      }, [userInfoLog.userSeq]);

      const connectTypeDefaultValue = useMemo(() => {
        return {
          name: "Connect Type",
          connectSeq: 0
        };
      }, [userInfoLog.userSeq]);

      const errorLogDefaultValue = useMemo(() => {
          return {
              name: "Error Log",
              errorSeq: 0
          };
      }, [userInfoLog.userSeq]);

    const col: ICol[] = [
        {
            title: "NO",
            dataIndex: 'no',
            width: "80px"
        },{
            title: "User ID",
            dataIndex: 'userId'
        },{
            title: "Member Type",
            dataIndex: 'memberType'
        },{
            title: "Company Name",
            dataIndex: 'companyName'
        },{
            title: "Change Type",
            dataIndex: 'changeForm',
            width: "148px"
        },{
            title: "Change Time",
            dataIndex: 'changeTime'
        }
    ];

    const loginCol: ICol[] = [
        {
            width: "80px",
            title: "NO",
            dataIndex: "no"
        }, {
            title: "User ID",
            dataIndex: "userId"
        }, {
            title: "Company Name",
            dataIndex: "companyName"
        }, {
            title: "IP Address",
            dataIndex: "ipAddress"
        }, {
            title: "Connect Time",
            dataIndex: "connectTime"
        }, {
            title: "Connect Type",
            dataIndex: "connectType",
            render: value => {
            if (value === "Login")
                return <span className={cx('loginText')}>{"Login"}</span>;
            else if (value === "Logout")
                return <span className={cx('logoutText')}>{"Logout"}</span>;
            else if (value === "LoginFail")
                return <span className={cx('loginFail')}>{"LoginFail"}</span>;
            else if (value === "session")
                return <span className={cx('sessionText')}>{"session"}</span>;
            else
                return
        }
        }
    ];

    const errorCol: ICol[] = [
        {
            width: "80px",
            title: "NO",
            dataIndex: "no"
        }, {
            title: "Error Time",
            dataIndex: "errorTime"
        }, {
            title: "Error Page",
            dataIndex: "errorPage"
        }, {
            title: "Error Type",
            dataIndex: "errorType"
        }
    ];

    const [searchValue, setSearchValue] = useState("");
    const [filterDate, setFilterDate] = useState([new Date(), new Date()]);
    const [searchOptions, setSearchOptions] = useState(null);
    const { isLoading, list, pagination } = useCondDate(searchOptions);
    const { page, setPage, setSize, total } = pagination;

    const handleSearchData = () => {
        console.log(userInfoLog, memberType, connectType, errorLog, filterDate, searchValue)
        setSearchOptions({
            userInfoLog: userInfoLog.userSeq,
            memberType: memberType.memberSeq,
            connectType: connectType.connectSeq,
            errorKind: errorLog.errorSeq,
            startDate: dateFormat(filterDate[0], "yyyy.MM.dd  HH:mm:ss"),
            endDate: dateFormat(filterDate[1], "yyyy.MM.dd  HH:mm:ss")
        })
    }

    return (
        <div>
            <Row justifyContent="flex-start">
                {(userInfo?.type === "aggregator_member" || userInfo?.type === "aggregator") &&
                <Col width={180} mr={10}>
                    <Select   
                        onSelect={v => setUserInfoLog(v)}
                        options={[
                            { name: "User Info", userSeq: 0},
                            { name: "Login Log", userSeq: 1},
                            { name: "Error Log", userSeq: 2}
                        ]}
                        defaultValue={userInfoLogDefaultValue}
                        selectKey="userSeq"
                        labelKey='name'                 
                    /> 
                </Col>
                } 

                <Col width={105} mr={10}>
                    {userInfoLog.userSeq === 0 ?
                    <>
                    <Select
                        onSelect={v => setMemberType(v)}
                        options={[
                            { name: "Member Type", memberSeq: 0},
                            { name: "Member", memberSeq: 1},
                            { name: "Manager", memberSeq: 2}
                        ]}
                        defaultValue={memberTypeDefaultValue}
                        selectKey="memberSeq"
                        labelKey='name'     
                    />
                    </>: null}

                    {userInfoLog.userSeq ===  1 ?
                    <>
                        <Select
                        onSelect={v => setConnectType(v)}
                        options={[
                            { name: "User ID", connectSeq: 0},
                            { name: "Connect Time", connectSeq: 1},
                            { name: "Connect Type", connectSeq: 2}
                        ]}
                        defaultValue={connectTypeDefaultValue}
                        selectKey="connectSeq"
                        labelKey='name'
                    /> 
                    </> : null}  

                    {userInfoLog.userSeq === 2 ?
                    <>
                        <Select 
                        onSelect={v => setErrorLog(v)}
                        options={[
                            { name: "Error Type", errorSeq: 0},
                            { name: "404", errorSeq: 1},
                            { name: "500", errorSeq: 2}
                        ]}
                        defaultValue={errorLogDefaultValue}
                        selectKey="errorSeq"
                        labelKey='name'
                        />
                    </> : null}
                </Col>

                <Col width={333} mr={10}>
                    <DatePicker onChangeDate={date => setFilterDate(date as [Date, Date])} 
                    disabled={false}
                    isRange={true}
                    format={"yyyy.MM.dd HH:mm:ss"} />
                </Col>
                <Col width={150} mr={5}>
                    <BorderedMiniInput
                        value={searchValue}
                        onChange={setSearchValue}
                        placeholder=" ID"
                    />
                </Col>
                <Col>
                    <Button
                        primary={true}
                        label={""}
                        size="large"
                        icon={"icon_input_search2"}
                        iconSize={18}
                        bgColor={"#98A3C7"}
                        hoverColor={"#C7C7E8"}
                        onClick={() => handleSearchData()}
                    />
                </Col>
                <Col style={{marginLeft: 'auto'}}>
                    <Button
                        label={"excel"}
                        size="large"
                        icon={"icon_xls"}
                        iconSize={18}
                        bgColor={'#fff'}
                        borderColor={"#24D0AF"}
                    />
                </Col>
                </Row>
                {!isLoading && <>
                    {userInfoLog.userSeq === 0 ?
                    <>
                        <Row>
                            <Col width={'100%'}>
                                <TableCard>
                                    <Table 
                                    data={[
                                        {
                                            no : 1,
                                            userId : "admin001",
                                            memberType : "ann",
                                            companyName : "ann",
                                            changeForm : "ann",
                                            changeTime : "2021.11.06 17:30:00"
                                        },{
                                            no : 2,
                                            userId : "admin002",
                                            memberType : "ann",
                                            companyName : "ann",
                                            changeForm : "ann",
                                            changeTime : "2021.01.06 17:30:00"
                                        },{
                                            no : 3,
                                            userId : "admin003",
                                            memberType : "ann",
                                            companyName : "ann(ann,
                                            changeForm : "ann",
                                            changeTime : "2021.01.31 17:30:00"
                                        },{
                                            no : 4,
                                            userId : "admin004",
                                            memberType : "ann",
                                            companyName : "ann)",
                                            changeForm : "ann",
                                            changeTime : "2021.02.06 17:30:00"
                                        },{
                                            no : 5,
                                            userId : "admin005",
                                            memberType : "ann",
                                            companyName : "ann",
                                            changeForm : "ann",
                                            changeTime : "2021.02.09 17:30:00"
                                        }
                                    ]} 
                                    col={col} 
                                    keyItem="no" 
                                    pagination />
                                </TableCard>
                            </Col>
                        </Row>
                    </> 
                    : null }
                    
                    {userInfoLog.userSeq === 1 ?
                    <>
                        <Row>
                            <Col width={'100%'}>
                            <TableCard>
                                    <Table 
                                    data={[
                                        {
                                            no : 1,
                                            userId : "admin001",
                                            companyName : "ann",
                                            ipAddress : "123.12.1.0",
                                            connectType : "ann",
                                            connectTime : "2021.11.06 17:30:00"
                                        }
                                    ]} 
                                    col={loginCol} 
                                    keyItem="no" 
                                    onPageChange={(page, perPage) => {
                                    setPage(page - 1);
                                    setSize(perPage);
                                    }
                                }
                                totalCount={total}
                                />
                            </TableCard>
                            </Col>
                        </Row>
                    </> : null}

                    {userInfoLog.userSeq === 2 ?
                    <>
                        <Row>
                            <Col width={"100%"}>
                                <TableCard>
                                    <Table 
                                        data={[
                                            {
                                                no : 1,
                                                errorTime : "2022.01.31 17:30:00",
                                                errorPage : "http://localhost8081/order/ordPwTrdList.do",
                                                errorType : "500"
                                            }, {
                                                no : 2,
                                                errorTime : "2022.02.06 17:30:00",
                                                errorPage : "http://localhost8081/order/ordPwTrdList.do",
                                                errorType : "404"
                                            }, {
                                                no : 3,
                                                errorTime : "2022.02.11 17:30:00",
                                                errorPage : "http://localhost8081/order/ordPwTrdList.do",
                                                errorType : "500"
                                            }, {
                                                no : 4,
                                                errorTime : "2022.02.13 17:30:00",
                                                errorPage : "http://localhost8081/order/ordPwTrdList.do",
                                                errorType : "500"
                                            }, {
                                                no : 5,
                                                errorTime : "2022.02.14 17:30:00",
                                                errorPage : "http://localhost8081/order/ordPwTrdList.do",
                                                errorType : "404"
                                            }
                                        ]}
                                        col={errorCol}
                                        keyItem="no"
                                        onPageChange={(page, perPage) => {
                                            setPage(page - 1);
                                            setSize(perPage);
                                        }}
                                        totalCount={total}
                                    />
                                </TableCard>
                            </Col>
                        </Row>
                    </> : null}
                </>}
        </div>
    )
}