Category: javascript

I have a Next 13 project using the app directory and MUI 5. The structure of the project is as follows:

./src
./src/app
./src/app/dc
./src/app/dc/admin
./src/app/dc/admin/dc_types.jsx

Given the structure above, when I attempt to programmatically navigate to the following url, I am getting a 404 error:

http://localhost:3000/dc/admin/dc_types

The component that is performing the router.push() is as follows:

"use client"

import { Box, Card, CardActionArea, CardContent, Typography } from "@mui/material"
import theme from "@/theme/theme"
import { usePathname, useRouter } from "next/navigation"

const ItemCard = (props) => {
    
    const defaultTitle = "Card Title"
    const defaultText = "Card Body"
    const defualtURL = "#"
    
    const { title, text, other } = props
    
    const cardTitle = title !== undefined ? title : defaultTitle
    const cardText = text !== undefined ? text : defaultText

    const router = useRouter()
    const pathname = usePathname()

    const cardId = cardTitle.replace(/s/g, "_").toLowerCase()

    const handleClick = (e) => {
        console.log(`${pathname}/${cardId}`)
        router.push(`${pathname}/${cardId}`)
    }

    return (
        <Box>
            
            <Card elevation={2}>

                    <CardContent>
                    
                        <CardActionArea onClick={handleClick}>
                        
                            <Box sx={{ 
                                bgcolor: theme.palette.secondary.main,
                                color: theme.palette.common.white,
                                p: 1,
                                width: "100%",
                                "&:hover": {
                                    bgcolor: theme.palette.primary.main,
                                },
                            }}>

                            <Typography
                                id={cardId}
                                component={"typography"}
                                variant="h6"
                                sx={{
                                    color: theme.palette.common.white,
                                    display: "flex",
                                    justifyContent: "center",
                                    textDecoration: "none", 
                                }}
                            >
                                {cardTitle}
                            </Typography>

                            
                            </Box>

                        </CardActionArea>

                        <Typography component={"div"} variant="body2" sx={{ pt: 1 }}>
                            
                            { cardText }

                        </Typography>

                    </CardContent>

            </Card>

        </Box>
    )
}

export default ItemCard

When I look at the value of the value for ${pathname}/${cardId} it is /dc/admin/dc_types.

I am unable to type the url in manually either.

I am not sure what I am missing? I obviously have something misconfigured? Or more likely a misunderstanding of how the app router works? I’m relatively new to Next.js.

I appreciate the help in advance.

I’m going mad cause I’m not able to achieve my target.

I need to dynamically crop the level of the tank (silo) that is pointed by the dasched line rectangle in the image attached.
According to the real percentage level I want to use Javascript to crop the portion of the image managed by a specific PATH of the G element.

I’m able to point via JS to that element without any issue, but how to crop it?

I used this portion of code:

path.style.fill = "#feca00";
path.style.height = 10;
path.setAttribute("height", perc_value);

all rows are working because I can see that the value are changed in DOM element accordingly but only the color fill style takes effect, nothing happened to the other two.

Please can someone help me, lighting my steps?

thank you

I built Request Management Page. We have two fields Start Date and End Date, but I faced Error Error: Element type is invalid: expected a string (for built-in components) or a class/function
(for composite components) but got: undefined. You likely forgot to export your component from the file
it’s defined in, or you might have mixed up default
and named imports.

`<pre><code>
import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  CalendarPicker,
} from "react-native";

const Leave_Request = () => {
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");

  const onStartDateChange = (date) => {
    setStartDate(date);`your text`
  };

  const onEndDateChange = (date) => {
    setEndDate(date);
  };

  const onSubmit = () => {
    alert(`Apply leave for ${startDate} - ${endDate}`);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Leave Request Form</Text>
      <TextInput
        placeholder="Start Date"
        style={styles.input}
        onChange={onStartDateChange}
      />
      <CalendarPicker
        value={startDate}
        onChange={onStartDateChange}
        style={styles.calendar}
      />
      <TextInput
        placeholder="End Date"
        style={styles.input}
        onChange={onEndDateChange}
      />
      <CalendarPicker
        value={endDate}
        onChange={onEndDateChange}
        style={styles.calendar}
      />
      <Button
        title="Submit"
        onPress={onSubmit}
        style={styles.button}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  header: {
    fontSize: 20,
    fontWeight: "bold",
  },
  input: {
    width: 200,
    height: 40,
    borderColor: "gray",
    borderRadius: 5,
  },
  calendar: {
    width: 200,
    height: 200,
    borderColor: "gray",
    borderRadius: 5,
  },
  button: {
    backgroundColor: "blue",
    color: "white",
    width: 100,
    height: 40,
    borderRadius: 5,
  },
});
</code></pre>

export default Leave_Request;


* Error: Error: Element type is invalid: expected a string (for built-in components) or a class/function 
(for composite components) but got: undefined. You likely forgot to export your component from the file 
it's defined in, or you might have mixed up default 
and named imports.

-Check the render method of `Leave_Request`.

-I tried several times but received the same error. My default Leave_Request component export is correct.`

Currently my website displays plots with info using reactstrap cards. Recently, I found out that instead of saving plotly graphs to png/pdf, saving as html is much faster to process, so I wanted to move to html instead. The old version of the card looks like this:

const Plot = ({name, pngUri, pdfUri, search, display, onHover}) => {
  return (
    <Card className={cx(plotSty, display ? null : hidden)} onMouseEnter={onHover}>
      <a href={pdfUri} target="_blank">
        <CardHeader>{hlSearch(name, search)}</CardHeader>
        <CardImg src={pngUri} />
      </a>
    </Card>
  );
};

I was able to get it to display if I get rid of <Card> and instead use <iframe> but that means I lose the ability to search through plots and set some of them to not display on the page.

Is there a way to display the html plots while still keeping the card functionalities? Is there perhaps a different library I can use for this?

The plotly graphs are made with plotly in python backend.

example of plotly html files can be found here: https://plotly.com/python/interactive-html-export/

I have a monorepo using npm workspaces, the structure is as follows:

web
  -package.json

api
  -package.json

common
  -package.json

package.json

I have some utility functions and types in “common” package which I use in my web and api packages. Do I need to install typescript as a dev dependency in each package or installing it at the root folder is enough (my current setup) what are the cons/pros? One more question if I have some utility that is in the api package and want to use it in the web package do I need to move it to “common” package and import from there or I can directly import from the api package? Thanks

I set 3 languages on Google Chrome as shown below:

Then, I tried to get only the 2nd language English used to display the Google Chrome UI but I got the 1st language French as shown below:

<script>
console.log(navigator.language); // fr
console.log(navigator.browserLanguage); // undefined
console.log(navigator.systemLanguage); // undefined
console.log(navigator.userLanguage); // undefined
</script>

So, how can I get only the 2nd language English used to display the Google Chrome UI?

Im running into an issue where I need to build a custom dropdown component. Im trying to get this select element to ignore the browsers functionality and replace it with a more modern dropdown, but this is becoming challenging.

I would rather just build a custom dropdown in React without the html select element, but im worried that there are reasons that I should use the select element that im unaware about

I tried following guides to make my select element completely ignore the browsers functionality and it has been a grind. That is why im looking into other options before I sink too much time into this

I need to create dynamic word document template with meta data , the meta data are drag and drop into container, meta data are place holder
eg

Hello {{name }} , How are you ?

This is for creating word templates which can reuse future . This is need to done in react js
Thank you

I am building a bar race chart using this ECharts example: https://echarts.apache.org/examples/en/editor.html?c=bar-race-country

I’d like to add buttons for pause/play and reset, but I am not sure if pausing animation is possible.

For reset, I should be able to figure out how to re-trigger loading of the chart, so I’m not too worried about that one.

Is it possible to pause and resume animation in ECharts?

Attached is the screenshot of the logs,

I ran eas build -p android with no lucky, but I have been uploading many apps with that plugin before. This has never happened before, please help me to resolve this, I want to upload my app today.
I upgraded my eas-cli but nothing worked

Thank you

This is a shortened version of the code I’m working on, but the same error occurs, or rather, not necessarily an error because I managed to solve it, but I would like to understand the logic behind this error. Basically, we have the autosave function that takes a form and a name to identify the item in sessionStorage (id). The function iterates through the inputs of the form and adds events to them so that their values are updated in real time. However, I noticed that when the select element has the ‘change’ event added to it, I can’t select a new value in the select after creating a session. The value remains fixed. But when I change ‘change’ to ‘input’, the values are updated normally and I can change the select. I would like to know why this happens. I found little information that could clarify this issue for me. Sorry if the question seemed silly, but I’m a beginner and I really want to understand these details.

<body>
    <form class="form user">
        <label for="role">Select your role</label>
        <select id="role" name="role">
            <option value="teacher" name="teacher">Teacher</option>
            <option value="student" name="student" selected>Student</option>
            <option value="adm" name="adm">Collaborator</option>
        </select>
        <button type="submit">Cadastrar</button>
    </form>
    <script>

        function autosave(form, id) {
            let fields = sessionStorage.getItem(`fields_${id}`);
            fields ? fields = JSON.parse(fields) : fields = {};

            Array.from(form.elements).forEach(input => {
                if (input.tagName === 'INPUT') {
                    input.addEventListener('input', () => {
                        fields[input.name] = input.value;
                        sessionStorage.setItem(`fields_${id}`, JSON.stringify(fields));
                    });
                }
                if (input.tagName === 'SELECT') {
//Function works as expected when changing the event listener to 'input' 
                    input.addEventListener('change', (e) => {
                        console.log(e)
                        console.log(input.value)
                        fields[input.name] = input.value;
                        sessionStorage.setItem(`fields_${id}`, JSON.stringify(fields));
                    })
                }
            });

            Object.keys(fields).forEach(key => {
                const input = document.querySelector(`input[name="${key}"], select[name="${key}"]`);
                if (input) {
                    input.value = fields[key];
                }
            });
        }
        const form = document.querySelector(".form.user");

        function roleOptions() {
            role.value.toUpperCase() == "STUDENT" ? studentFormulary() : null;
            role.value.toUpperCase() == "TEACHER" ? teacherFormulary() : null;
            role.value.toUpperCase() == "ADM" ? admFormulary() : null;

        };
        role.addEventListener("change", roleOptions);

        function studentFormulary() {
            autosave(form, "entity");
        }
        function teacherFormulary() {

            autosave(form, "entity");
        }
        function admFormulary() {

            autosave(form, "entity");
        }

        const savedRole = sessionStorage.getItem("fields_entity");
        if (savedRole) {
            const parsedRole = JSON.parse(savedRole);
            if (parsedRole.role) {
                role.value = parsedRole.role;
            }
        }
        roleOptions();
        autosave(form, "entity");

    </script>
</body>

How do I change this structure so that I can get the values of this object like a map
this is my const object

const dependencyMetrics : {[dependancyName : string] :  {[name : string] : MetricInfo }[]} = {
    MyService : [{
        failure : {
            metric: new Metric({
                namespace: 'namespace',
                metricName: 'ABC'
            }),
            metricProperties: {
                period: Duration.seconds(60),
                statistic: 'Average'
            }
        },
        time : {
            metric: new Metric({
                namespace: 'namespace',
                metricName: 'age'
            }),
            metricProperties: {
                period: Duration.seconds(60),
                statistic: 'Average'
            }
        }
    }]};
//I am using this  also as a type : 
type MetricInfo = {
    metric  : Metric;
    metricProperties : MetricOptions;
}

What I want is this code to behave smoothly when I try some thing like : dependencyMetric.MyService.failure
or dependencyMetric.MyService.time

currently getting a lot of Objects and stuff don’t know how to make this a hierarchy map

I have a date range picker, and the problem is when I change the month right calendar always month + 1.

<DatePicker renderCustomHeader={(headerProps) => <DatePickerHeader {...headerProps} />} disabledKeyboardNavigation onChange={onChange} startDate={startDate} endDate={endDate} maxDate={new Date()} selectsRange inline monthsShown={2} calendarClassName="custom-datepicker" renderDayContents={renderDayContents} />

Is there any way to separate them?
eg left(Dec 2022) – right (Feb 2023). But if left month & year === right month & year, the right month should be left month + 1.

i have a website in html and php where i have used slick slider for the main slider, my code is like below:

$(document).ready(function() {
  $('.customer-logos1').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 4500,
    arrows: false,
    dots: false,
    slidesToScroll: 1,
    autoplay: true,
    pauseOnHover: true,
    cssEase: 'linear',


  });
});

<section>
  <div class="customer-logos1 slider" style="color:white;font-weight:400">


    <?php
$sliderbanner=$this->product->selectsliderbanner();

?>
    <?php foreach($sliderbanner as $slide){?>
    <div class="slide" style="width:100%">

      <div class="row">
        <div class="col-lg-4 col-12" style="width: 100%;margin: 0;padding: 0;">
          <div style="background:#f7f7f7;height:100%;">
            <div class="tm-offer-content skewp1" style="text-align:center;padding-top:25%" id="siggl">

              <h4>
                <?=$slide->title?>
                  </h1>
                  <h6>
                    <?=$slide->description?>
              </h4>
              <span class="badge badge-warning" style="background:#A07F3D;color:white;font-size: inherit;
    padding: 0.55em 0.8em;"> <?=$slide->offer?></span>

            </div>
          </div>
        </div>
        <div class="col-lg-4 col-12" style="width: 100%;margin: 0;padding: 0;">
          <img src="<?php echo base_url()?>admin/uploads/about/<?=$slide->pimage1?>">
        </div>


        <div class="col-lg-4 col-12" style="width: 100%;margin: 0;padding: 0;">

          <img src="<?php echo base_url()?>admin/uploads/about/<?=$slide->pimage2?>">

        </div>
      </div>


    </div>

    <?php } ?>


  </div>


</section>

even though i havent set any width to the slides, the slides are showing misaligned in mostly mobile devices, in desktop devices the width issue is not much, in mobile the next slide images are overlapping in current slide, my live url is: live
can anyone please tell me what is wrong in here, thanks in advance

The page returns several records within a div tag. I am trying to fetch the line that contains the name Kiyara.Hu and click on the respective edit button of that name.
I tried the command below but it didn’t work.

cy.contains('div','Kiyara.Hu').find('button').click()

Below is the HTML code and screenshots of the site.

                <div class="oxd-table-cell oxd-padding-cell" role="cell">
                    <div class="oxd-table-card-cell-checkbox">
                        <div class="oxd-checkbox-wrapper" data-v-6179b72a=""><label class=""
                                data-v-6179b72a=""><!----><input type="checkbox" value="22" data-v-6179b72a=""><span
                                    class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"
                                    data-v-6179b72a=""><i class="oxd-icon bi-check oxd-checkbox-input-icon"
                                        data-v-bddebfba="" data-v-6179b72a=""></i></span></label></div>
                    </div>
                </div>
                <div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">
                    <div data-v-6c07a142="">Kiyara.Hu</div>
                </div>
                <div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">
                    <div data-v-6c07a142="">ESS</div>
                </div>
                <div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">
                    <div data-v-6c07a142="">Kiyara Hu</div>
                </div>
                <div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">