javascript – Page 5162 – Blancer.com Tutorials and projects

Run a script with no pre-installation

I need to write a script which would open website, enter the data for search, communicate with its UI and return the following data:

Search link of the page
Some saved images from this page.

All this should be presented in a readable format.
This script is considered to be used by non-technical folks so no technical preparation for running script is allowed (e.g.manually installing npm, necessary modules)
Is it possible to do with Cypress and/or Javascript?

Why is the doctorReport() function not working inside the caculateBMI() function?

I am learning JavaScript and I was given to create a BMI app. The function doctorReport is not working. This app supposed to give BMI result and a status update to the user.
See HTML and Js below:

<div class="box box1"><!--box1 starts-->
          <label for="height">Height (in meters):</label><br>
          <input type="number" id="height" class="bmi-input bmi-input1" placeholder="Enter your height in meters">
          <br><br>
          <label for="weight">Weight (in kilograms):</label><br>
          <input type="number" id="weight" class="bmi-input bmi-input2" placeholder="Enter your weight in kilograms">
          <br><br>
          <button onclick="calculateBMI()" class="bmi-button">Calculate BMI</button>
          <br><br>
          <div id="result" class="bmi-result">0.00</div>
          <span class="result-unit">kg/m<sup>2</sup></span>

          <div class="doctor"></div>

        </div><!--box1 ends-->


function calculateBMI() {
    const height = document.getElementById("height").value;
    const weight = document.getElementById("weight").value;
    
    const bmi = weight / (height * height);
    
    const resultElement = document.getElementById("result");
    errorNotice(bmi, resultElement);
    doctorReport(height, weight);

}
//To alert user who refue to place an input
function errorNotice(bmi, resultElement) {
    if (isNaN(bmi)) {
      alert('Enter an input');
    }  
    else { 
      resultElement.innerHTML = `Your BMI is ${bmi.toFixed(2)}`;
    }
  }

  function doctorReport(resultElement) {
    const report = resultElement.innerHTML;
    let myReport = 'Status: ';
    if (report <= 18.5) {
        myReport += 'Underweight';
    }
    else if (report > 18.5) {
        myReport += 'Healthy Weight';
    }
    else if (report > 24.9) {
        myReport += 'Over Weight';
    }
    else if (report > 30.0 || report <= 31.0) {
        myReport += 'Obesity';
    }

    else {
        myReport += 'Too Obesed, go and see a doctor';
    }
    document.getElementById('doctor').innerHTML = myReport;
  }

I want the status report to show in the last div with class = ‘doctor’ but nothing is showing. Please help.

Input of URL doesn’t seem to work in Javascript; returns question mark and input url, then runs indefintely

I’m working with a script from GitHub (https://github.com/Lorenzik/TMRB), testing out a Tiktok report bot. I’ve no literacy at all in Javascript, I’m a Python programmer.

I’ve run the script through a WebStorm to check for syntax errors and get some debugging feedback, but so far, no luck in getting it to work.

I can’t figure out whether the syntax of my url input is wrong, or wheter there’s another problem occuring. Swapping out comma’s, brackets & quotation marks don’t seem to help after many try-outs, so turning to the community for the (probably very obvious) answer that I can’t seem to figure out. All help is appreciated!

Code snippet of url input:

rl.question(`${chalk.gray(`${new Date().toLocaleTimeString()} `) + chalk.grey(`[`) + chalk.cyan.bold(`?`) + chalk.grey(`]`)} "www.example.com/reportnumber" `  , async function (answer) {
  ascii()

whitespace:nowrap has some kind of min-width and won’t resize further than its initial width

<div className="right row align-center justify-center gap-1">
<button>hello world</button>
<p>{timeSince(conversation.chats?.[0].created_at)}</p>
</div>

This is my css:


        .chat {
          font-weight: 400;
          white-space: nowrap;
          //   text-overflow: ellipsis;
          //   overflow: hidden;
          //   max-width: 100%;
          //   display: block;
          //   line-break: loose;
          //   overflow-wrap: break-word;
          background-color: orange;
          color: var($colors, onBackground);
        }

This is the result:

The wrapper div has this as styling:

    flex: 1;

Div above that:

 display: flex;
    position: relative;
    flex-direction: column;
    overflow: hidden;

I know that nowrap makes the line not wrap, but it should then ellipse and resize right? If not, do i need to do this in javascript then?

How to do line animation under a navbar on scroll?

When we scroll in some websites there is a line animation under the navigation bar how to make it?

I search it many times on youtube and google but didn’t find anything.

Firebase Function onRequest – Check HTTP method is GET

I am implementing the following cloud function

exports.getRandomInteger = functions
  .region(process.env.REGION)
  .runWith({ memory: "2GB", timeoutSeconds: 120 })
  .https.onRequest((req, res) => {
    return cors(req, res, async () => {
      try {
        validateHttpMethod(req, "GET");

        const authToken = getIdTokenFromRequest(req);

        await verifyIdToken(authToken);

        const {
          lowerLimit,
          upperLimit,
        } = validateGetRandomIntegerParams(req.query);

        const randomInteger = Math.floor(
          Math.random() * (upperLimit - lowerLimit + 1)
        ) + lowerLimit;

        res.status(200).send(randomInteger.toString());
      } catch (err) {
        if (err instanceof functions.https.HttpsError) {
          throw err;
        }

        // An unknown error has occurred
        functions.logger.error(err);

        res.status(400).send(err);
      }
    });
  });

Inside my validateHttpMethod(req, "GET") function I am throwing a functions.HttpsError if the request method is not equal to “GET”, like this:

throw functions.https.HttpsError(
  "invalid-argument",
  "Invalid HTTP method.",
  {
    status: "error",
    code: "http/invalid-method",
    message: "The provided HTTP method is not valid.",
  }
);

Is this OK? Should I use “invalid-argument”? Or should I throw the error like this?

res.status(400).send("HTTP method must be GET");

How to create Object in Object using fromEntries

I have the code below tmp_ff is an object and choosen_products is pre-exist object,

let tmp_ff = Object.fromEntries(
    this.choosen_products.flatMap((element, index) => [
       [q_p_fullname, element.p_fullname],                    
     ]),      
);

I want to make a object of object start from

tmp_ff [1: [this.choosen_products.flatMap]
        2: [this.choosen_products.flatMap] ...]

[] is choosen_product elements, I try ${index + 1} but it does not working. Any help would be appricated. How to create 1 & 2 as an index number and each index has this.choosen_products.flatMap element The hard code would be.
but I still cannot able to be index as object inside object, any wrong with my code?

Unable to unfill the favourite icon on the click of the image.React js

I am trying to save the favorites and deselect the favorites of list of hotels from favorites tab. The service is working fine in the backend. In the Front end when i deselect the favorites onClick() of the image, the delete request is sent but the icon is not getting deselected.

export const SaleCard: React.FC<ISaleCardProps> = ({ sale, isFavourite }) => {
  const { userId } = React.useContext(UserContext);
  const OnFavouriteClick = async () => {
    let rquest = {
      userID: userId,
      saleID: sale.id
    }
    if (!isFavourite) {
      debugger;
      SalesService.setFavourites(rquest);
    } else {
      debugger;
      SalesService.deleteFavourtes(rquest);
    }

  }
  return (
    <div>
      {/* {isfav.toString()} */}
      
      <FavouriteIcon onClick={() => OnFavouriteClick()} style={{ fill:  isFavourite ? 'gold' : 'white', position: "absolute", zIndex: 100 }} />

Close TalkJs chat Session before Logout Laravel

how to close TalkJs Session Before logout of current user ?
the next function is

public function auth_logout(Request $request) {
    //i need to put close session commands here!
    Auth::logout();

    return redirect()->route('/');
}

How do I sort items in a 2-line horizontal flatlist?

I want to sort the clocks in the application as in the picture. But I can’t do this correctly.

I wrote as below. But I could not do the operation correctly as in the picture below. What do I need to do to sort these clocks exactly as above?

import React from "react"
import { FlatList, ScrollView, Text, View } from "react-native"

const ScreenA = () => {

    const time = ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"]

    const renderItem = ({ item }) => {
        return (
            <View style={{ borderWidth: 1, width: 100 }}>
                <Text>{item}</Text>
            </View>
        )
    }

    return (

        <ScrollView
            horizontal={true}
        >
            <FlatList
                data={time}
                renderItem={renderItem}
                keyExtractor={(item, index) => index.toString()}
                numColumns={Math.ceil(time.length / 2)}
                scrollEnabled={false}
            />
        </ScrollView>
    )
}

export default ScreenA

Add animated interval slide to carousel

I have this carousel that slides on clicking the ‘Next’ & ‘Previous’ buttons but when I try to add an auto slide on intervals it’s not working.
I tried to do it with bootstrap, Tailwind & swiper too, But it wasn’t working for me.
If there are any suggestions it will be helpful.

$(function(){
    $('.carousel-item').eq(0).addClass('active');
    var total = $('.carousel-item').length;
    var current = 0;
    $('#moveRight').on('click', function(){
      var next=current;
      current= current+1;
      setSlide(next, current);
    });
    $('#moveLeft').on('click', function(){
      var prev=current;
      current = current- 1;
      setSlide(prev, current);
    });
    function setSlide(prev, next){
      var slide= current;
      if(next>total-1){
       slide=0;
        current=0;
      }
      if(next<0){
        slide=total - 1;
        current=total - 1;
      }
             $('.carousel-item').eq(prev).removeClass('active');
             $('.carousel-item').eq(slide).addClass('active');
        setTimeout(function(){
  
        },800);
      
  
      
      console.log('current '+current);
      console.log('prev '+prev);
    }
  });

.carousel {
    border-radius: 15px;
    width: 100%;
    height: 100%;
    display: flex;
 
    overflow: hidden;
  position: relative;
}

.carousel-item {
  visibility:visible;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
      -webkit-align-items: center;
    -webkit-justify-content: flex-end;
    position: relative;
    background-color: #fff;
    flex-shrink: 0;
   -webkit-flex-shrink: 0;
    position: absolute;
    z-index: 0;
  transition: 0.6s all linear;
}

.carousel-item__info {
  position: absolute;  
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  
    display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-flex-direction: column;
  
  order: 1;
  left: 0;
  margin: auto;
  padding: 0 40px;
  width: 40%;

}

.carousel-item__image {
    width: 100%;
    height: 100%;
    order: 2;
    align-self: flex-end;
 
  
      -webkit-order: 2;
    -webkit-align-self: flex-end;

  
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   position:relative;
  transform: translateX(200%);
  transition: 0.6s all ease-in-out;
}

.carousel-item__subtitle {
    letter-spacing: 3px;
    font-size: 10px;
    text-transform: uppercase;
    margin: 0;
    color: #7E7E7E;    
    font-weight: 700;
    transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.4s all ease-in-out;
}

.carousel-item__title {
    margin: 15px 0 0 0;
    font-size: 44px;
    line-height: 45px;
    letter-spacing: 3px;
    font-weight: 700;
    color: #2C2C2C;
    transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.6s all ease-in-out;
}

.carousel-item__description {
    transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.6s all ease-in-out;
    margin-top: 35px;
    font-size: 13px;
    color: #7e7e7e;
    line-height: 22px;
    margin-bottom: 35px;
}

.carousel-item--1 .carousel-item__image{
  background-image: url('https://images.pexels.com/photos/991012/pexels-photo-991012.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
}


.carousel-item--2 .carousel-item__image{
  background-image: url('https://images.pexels.com/photos/921294/pexels-photo-921294.png?auto=compress&cs=tinysrgb&h=750&w=1260');
}

.carousel-item--3 .carousel-item__image{
  background-image: url('https://images.pexels.com/photos/92733/pexels-photo-92733.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260');
}

.carousel-item--4 .carousel-item__image{
  background-image: url('https://images.pexels.com/photos/1008732/pexels-photo-1008732.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260');
}

.carousel-item--5 .carousel-item__image{
  background-image: url('https://images.pexels.com/photos/1029614/pexels-photo-1029614.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
}




.carousel-item__container{

}

.carousel-item__btn {
    width: 35%;
    color: #2C2C2C;
    letter-spacing: 3px;
    font-size: 11px;
    text-transform: uppercase;
    margin: 0;
    width: 35%;
    font-weight: 700;
  text-decoration: none;
      transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.6s all ease-in-out;
}

.carousel__nav {
    position: absolute;
    display: flex;
    justify-content: space-around;
    width: 100%;
    z-index: 2;
    margin: 15px 15px;

 
}

.carousel__nav span{
  

}

.carousel__icon {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
  fill: #5d5d5d;
}

.carousel__arrow {
    cursor: pointer;
    display: inline-block;
    padding: 5px 15px;
    position: relative;
    border: 1px solid #282828;
    color: #282828;
    border-radius: 20px;
}

/* .carousel__arrow:nth-child(1):after {
    content:'';
    right: -3px;
    position: absolute;
    width: 1px;
    background-color: #b0b0b0;
    height: 14px;
    top: 50%;
    margin-top: -7px;
} */

.active{
   z-index: 1;
  display: flex;
  visibility:visible;
}

.active .carousel-item__subtitle, .active .carousel-item__title, .active .carousel-item__description,.active .carousel-item__btn{
    transform: translateY(0);
    opacity: 1;
  transition: 0.6s all ease-in-out;
    visibility: visible;
}



.active .carousel-item__image{ 
transition: 0.6s all ease-in-out;
transform: translateX(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel__nav">
                     <span id="moveLeft" class="carousel__arrow">
                        <svg class="carousel__icon" width="24" height="24" viewBox="0 0 24 24">
                            <path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path>
                        </svg>
                       Previous
                      </span>
                      <span id="moveRight" class="carousel__arrow" >
                        Next 
                        <svg class="carousel__icon"  width="24" height="24" viewBox="0 0 24 24">
                            <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
                          </svg>       
                      </span>
                    </div>
                    <div class="carousel-item carousel-item--1">
                      <div class="carousel-item__image"></div>
                      <div class="carousel-item__info">
                        <div class="carousel-item__container">
                        <h2 class="carousel-item__subtitle">The grand moment </h2>
                        <h1 class="carousel-item__title">Le tour</h1>
                        <p class="carousel-item__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                        <a href="#" class="carousel-item__btn">Explore the tour</a>
                          </div>
                      </div>
                    </div>
                    <div class="carousel-item carousel-item--2">
                      <div class="carousel-item__image"></div>
                      <div class="carousel-item__info">
                        <div class="carousel-item__container">
                        <h2 class="carousel-item__subtitle">The big window </h2>
                        <h1 class="carousel-item__title">Minimal window</h1>
                        <p class="carousel-item__description">Clear Glass Window With Brown and White Wooden Frame iste natus error sit voluptatem accusantium doloremque laudantium.</p>
                        <a href="#" class="carousel-item__btn">Read the article</a>
                          </div>
                      </div>
                    </div>
                      <div class="carousel-item carousel-item--3">
                      <div class="carousel-item__image"></div>
                      <div class="carousel-item__info">
                        <div class="carousel-item__container">
                        <h2 class="carousel-item__subtitle">Tropical palms </h2>
                        <h1 class="carousel-item__title">Palms</h1>
                        <p class="carousel-item__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                        <a href="#" class="carousel-item__btn">Explore the palms</a>
                          </div>
                      </div>
                    </div>
                    
                     <div class="carousel-item carousel-item--4">
                      <div class="carousel-item__image"></div>
                      <div class="carousel-item__info">
                        <div class="carousel-item__container">
                        <h2 class="carousel-item__subtitle">Beach </h2>
                        <h1 class="carousel-item__title">The beach </h1>
                        <p class="carousel-item__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                        <a href="#" class="carousel-item__btn">Explore the beach</a>
                          </div>
                      </div>
                    </div>
                    
                   <div class="carousel-item carousel-item--5">
                      <div class="carousel-item__image"></div>
                      <div class="carousel-item__info">
                        <div class="carousel-item__container">
                        <h2 class="carousel-item__subtitle">The white building </h2>
                        <h1 class="carousel-item__title">White building</h1>
                        <p class="carousel-item__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                        <a href="#" class="carousel-item__btn">Read the article</a>
                          </div>
                      </div>
                    </div>
                    
                  </div>
            </div>

Hello everyone, I have this carousel that slides on clicking the ‘Next’ & ‘Previous’ buttons but when I try to add an auto slide on intervals it’s not working.
I tried to do it with bootstrap, Tailwind & swiper too, But it wasn’t working for me.
If there are any suggestions it will be helpful.

react hook causes infinite loop

I am new in react and I don’t know what happens when i try fetch cause infinite loop

const useDadosSolicitacao = (idSolicitacao: number) => {
  const [dadosSolicitacaoDevolucaoAmostra, setDadosSolicitacaoDevolucaoAmostra] = useState<IDadosSolicitacaoAmostra>();
  console.log('test');

  const obterDadosSolicitacao = async () => {
    return await DadosSolicitacaoService.obterDadosSolicitacaoDevolucao(1)
      .then((resposta) => {
        setDadosSolicitacaoDevolucaoAmostra(resposta.data);
      })
      .catch((error) => {
        if (error.response) {
          if (error.response.status === 404) {
            return null;
          }
          return { mensagem: error.response.message };
        }
      });
  };
  obterDadosSolicitacao();

this function (obterDadosSolicitacao) generates an infinite loop. But when I don’t use response, nothing happens… like it:

const obterDadosSolicitacao = async () => {
    return await DadosSolicitacaoService.obterDadosSolicitacaoDevolucao(1);
}
obterDadosSolicitacao()

How to sum up rows (that are not blank) from input values in a table using javascript

I’ve added input fields into a table. What I’m looking to do is to count all of the rows and add them into a table row total. Ideally I want these to have a value of 0.5 for each row that has an input value. I’m trying to do this with javascript but I don’t know where to start.

On the total column, I’m trying to get the total count value within the rows.
So for example row 1 to count the number of non-blank input values I want this total to appear where the current value is Total1. and the same iteration for the other rows for Total2, Total3 etc.

HTML Code:

<!DOCTYPE html>
<link rel="stylesheet" href="table-styling.css">
<head>
<p>This is my awesome rota</p>
</head>
<Body>

    <table>
        <thead>
        <tr>
            <th class="date">Day</th>
            <th>Staff Name</th>
            <th>08:30</th>
            <th>09:00</th>
            <th>09:30</th>
            <th>10:00</th>
            <th>10:30</th>
            <th>11:00</th>
            <th>11:30</th>
            <th>12:00</th>
            <th>12:30</th>
            <th>13:00</th>
            <th>13:30</th>
            <th>14:00</th>
            <th>14:30</th>
            <th>15:00</th>
            <th>15:30</th>
            <th>16:00</th>
            <th>16:30</th>
            <th>17:00</th>
            <th>17:30</th>
            <th>18:00</th>
            <th>Total</th>
            <th>Activities</th>
        </tr>
    </thead>
    <tbody>
<tr class="staff-name">
<td rowspan="0" class="dow">Mon 20 Mar 2023</td>
<td>Marion</td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td>Total1</td>
<td class="activities"><input type="text"></td>
</tr>
<tr class="staff-name">
<td>Nicola</td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td>Total2</td>
<td class="activities"><input type="text"></td>
</tr>

<tr class="staff-name">
 <td>Fiona</td> 
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
 <td>Total3</td>
 <td class="activities"><input type="text"></td>
</tr>
<tr class="staff-name">
<td>Teresa</td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td>Total4</td>
<td class="activities"><input type="text"></td>
</tr>
<tr class="staff-name">
<td>Lilly</td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td>Total5</td>
<td class="activities"><input type="text"></td>
</tr>
<tr class="staff-name">
<td>Jemma</td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td>Total6</td>
<td class="activities"><input type="text"></td>
</tr>
<tr class="staff-name">
<td>Rachel</td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
<td>Total7</td>
<td class="activities"><input type="text"></td>
</tr>
<tr class="staff-name">
    <tr class="staff-name">
        <td>Gemma</td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td class="staff-input"><input maxlength="3" type="text" style="text-transform:uppercase" required></td>
        <td>Total8</td>
        <td class="activities"><input type="text"></td>
    </tr>
</tbody>
    </table>
</Body>

CSS Code:

table{
    border: 1px solid;
    font-size: 20px;
    width: 1620px;
}

td.staff-input{
    max-width: 30px;
    background-color: white;

}

input:invalid{
    background-color: white;
    border-color: #efefef;
}

input:valid{
    
    font-weight:bold;
    border-color: orange;
}

input.staff-input{
    max-width: 30px;

}

table {
    empty-cells: hide;
    background: white;
}

td.dow{
    font-weight: 700;
    color: #34a853;
}

th{
    background-color: #34a853;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    width: 30px;
}

th.total,th.additional-notes {
    width: 50px;
}

tr.staff-name:nth-child(odd) input:invalid{
    background-color: #efefef;
}
tr.staff-name:nth-child(odd){
    background-color: #efefef;
}

td.dow{
    background-color: white;
}

td{
    overflow: hidden;
}
input{
    width: 30px;
}

th.date{
    width: 4000px;
}

.staff-input input{
    width:30px;
}

.activities input{
    width: 200px;
    border-color:#efefef;
}

tr.staff-name td.dow{
    width:50px;
}```


I've tried to find some examples of code for this but all I've found is JavaScript for summing numerical values not non-empty values.

Console error models.load_fields is not a function while I try to load custom field into POS odoo16

See Console errorthis console error faced me when I try to use models.load_fields to load custom field to POS orderline
my code as follow :

odoo.define('serial_attributes.pos_attributes', function (require) {
    "use strict";
    console.log("Iam HEreeeeeeeeeeeeeee!!!!!!!!!!!!!!!")

    var models = require("point_of_sale.models");
    var _super_orderline = models.Orderline.prototype;
    console.log("models", models);
    models.load_fields("product.product", "test")
    models.Orderline = models.Orderline.extend({
        initialize: function (attr, options) {
            var line = _super_orderline.initialize.apply(this, session, arguments);
            this.test = this.product.test;
            console.log("test", this.test)
        }
    })


})

I try to load custom field to porduct.product to show it with POS order

Traslate leaflet map center

Is there any possibility to traslate the center of a leaflet map?

I’ll try to explain my problem in a better way:
The map you see in the below image occupies 100vw, and it’s how I need it, because the left pane won’t occupy the 100vh, so a part of the map will be visible below.

Now, when the left pane is opened, and I navigate to a certain marker in the map, it centres it perfectly, but in the center of the screen as shown here below:

But I’d need to center it in the visible part of the map, like here:

I hope I explained my problem, and hope someone of you can help me.

I’ve tried to add some margins and reduce the size of the map, but it’s not what I really need. Moreover, I’ve tried to use the method map.invalidateSize() pero no me funciona.