in odoo How to add product in POS programmatically

I want to add a product line in POS but I face some errors

this my code

                const productId = 293;
                const sel_product = await this.rpc({
                    model: "product.product",
                    method: "read",
                    args: [[productId]],
                });

                console.log("sel_product :", sel_product[0]);
                const newItem = {
                    id: productId,
                    product: sel_product[0],
                    qty: 1,
                    price: -300,
                };

                var Orderline = models.Orderline;
                var line = new Orderline({}, {
                      pos: this.env.pos,
                      order: this.env.pos.get_order(),
                      product: newItem.product});

                line.set_quantity(newItem.qty);
                this.env.pos.get_order().add_product(line);

and I face some error

error fetching promotions: TypeError: this.product.get_unit is not a function
    at Orderline.get_unit 
    at Orderline.set_quantity

can any one help me on this

filepond reorder does not work on mobile phones

Why is it impossible to work with the reorder function with the mobile version of the site? It is inconvenient to move image files on the mobile version, how can this functionality be improved for the mobile phone or there is some solution to improve the reordering on the mobile version.

I have read the documentation but have not found a solution to this problem.

node js prompt method that’d accept, hold bunch of characters including newline

Which node js input/prompt method (help point out what library and function) that accept, hold bunch of characters including newline ones if, only if, clipboard is being pasted into it, not being cut out by that or any characters. else, while still regards newline characters as the end of user entry if it’s being typed manually

Found common ones process.stdin.on() process.stdin.once() readline.question() cannot do so

Main factor is as a noob level in coding in node js environment so please help out guide to the correct, working one sincerely

How do I put an (x, y) on a cartesian plane in javascript where 0,0 is the middle? (Beginner)

So I have essentially no experience in HTML or JS and need to learn how to plot an x and y (each a float from -10.0 to 10.0) on a political-compass-styled plane. I get this isn’t a place for a beginner to start but I don’t need to hear that lol. I tried getting an image of the graph and plotting a dot at the x and y but the image was too big so I turned the size down and the dot wouldn’t go in the right spot. I also tried using some online things like

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Questionnaire</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

but I couldn’t make it work. How can I plot an x, y on a simple cartesian plane/image of a cartesian plane?

ExtJs grouped-header-grid – how to use it to group headers?

I have tables in ExtJs and I would like to use the grouped-header-grid option. https://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#grouped-header-grid
I have files from which data is downloaded. It looks like this:

columns: [
{
  name: 'parent_column',
  title: 'Parent',
  columns: [
    {
      name: 'test_colum',
      title: 'Test',
      type: 'number',
    },
    {
      name: 'test_colum2',
      title: 'Test 2',
      type: 'number',
      formSortOrder: 2,
    },
  ]
}, ....

and where I use it:

columns.forEach(column => {
  const columElement = {
    id: idGen(),
    dataIndex: column.name,
    text: column.title,
    groupable: true,
    hidden: !!column.hidden,
    hideable: false,
    columns: /* child elements i think */,
    field: {
      ...column,
      selectOnFocus: true,
      xtype: 'textfield',
    },
    beforeEdit: () => true,
  }

I want to create logic that when a given header contains child elements, I display them below them, and if they do not, I display an empty space. Each element can have 0, 1 or many child elements. The logic should be reusable, because there will also be tables that have no child elements at all, and then it should be a regular table without grouped-header-grid.

Another thing is that I have a button with a sliding list of headers and the ability to show and hide them by checking the checkbox. Now, when I added grouping options, this mechanism stopped working. I normally pull out a list of columns by:

this.getColumnManager().getColumns();

but now instead of a list of all elements or parent elements as before, I have a list containing only child elements without the parent element.

I created a website menu and I tried to create a carousel when I did style the carousel with CSS the menu disappeared? I need some help Thanks

`So I tried to create two CSS files but it doesn’t work. I have joined below my code, HTML, header CSS and Carousel CSS and javascript to create a responsive header.

From the screenshot I have sent can you see what’s wrong?
Thanks a lot.
enter image description here
I wanted to create a reponsive header with a burger menu and a slideshow carousel below the website header.
There is also another problem, when I remove one of the two CSS file, the menu appears but the links have disapeared and there is only a burger menu. I really need some help to sort this out.
Thank you very much for your help.

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home page</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style2.css">
   <script src="script.js"></script>
</head>

<body>
    <header> 
        <nav class="navbar"> 
            <div class="navbar-container container">
            <div class="logo-img">  
                <img src="image/logo.jpg" width="200px" height="200px" alt="logo"> 
            </div>
        <a href="#" class="toggle-button">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </a>
        <div class="navbar-links">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About us </a></li>
            <li><a href="#">Accordion menu</a></li>
            <li><a href="#">Tab gallery</a></li>
            <li><a href="#">Quiz</a></li>
            <li><a href="#">Contact us</a></li>
          </ul>
        </div>
        </div>
        </div>
      </nav>
    </header>  
    <section aria-label="Newest Photos">
        <div class="carousel"></div>
        <button class ="carousel-button-prev">&#8656;</button>
        <button class ="carousel-button-next">&#8658;</button>
        <ul>
        <li class= "slide"data-active>
          <img src="image/woman-3597095_1280.jpg" alt="woman developer">
        </li>
        <li class= "slide">
          <img src="image/web-design-3411373_1280.jpg" alt="web design">
        </li>
        <li class= "slide">
          <img src="image/workspace-2443050_1280.jpg" alt="workspace">
        </li>
        <li class= "slide">
          <img src="image/code-1076536_1280.jpg" alt="coding">
        </li>
    </ul>
    </section
</body>
</html>`
```

``
.logo-img {
    float: right;
    margin-right: 100px;
}


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

.navbar {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: #f6f6f6;
    color: black;

}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}



.navbar-links {
    display: flex;
    margin-left: auto;
    padding-right: 50px;

}

.navbar-links ul {
    display: flex;
    margin: 0;
    padding: 0;
}

.navbar-links li {
    list-style: none;
    margin-left: 50px;
}

.navbar-links li a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 10px;
    white-space: nowrap;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.navbar-links li:hover {
    background-color: #8379ff;
    border-radius: 15px;

}

.toggle-button {
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: black;
    border-radius: 10px;
}

@media (max-width: 800px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

.toggle-button {
    display: flex;
}

.navbar-links {
    display: none;
    width: 100%;
}

.navbar-links ul {
    width: 100%;
    flex-direction: column;
}

.navbar-links ul li {
    text-align: center;
}

.navbar-links ul li a {
    padding: .5rem 1rem;
}

.navbar-links.active {
    display: flex;
}
``
`
```
`body {
    margin: 0;
    padding: 0;
}

*,
*::before *::after {
    box-sizing: border-box;
}

.carousel {
    width: 100vw;
    height: 100vh;
    position: relative;
}

.carousel>ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.slide>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

}

.slide[data-active] {
    opacity: 1;
}

.carousel-button {
    position: absolute;
    z-index: 2;
    background: none;
    border: none;
    font-size: 4rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    border-radius: .25rem;
    padding: 0 .5rem;
    background-color: rgba(0, 0, 0, .1);
}

.carousel-button:hover,
.carousel-button:focus {
    color: white;
    background-color: rgba(0, 0, 0, .2);
}

.carousel-button:focus {
    outline: 1px solid black;
}

.carousel-button.prev {
    left: 1rem;
}

.carousel-button.next {
    right: 1rem;
}
`const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})`

how to fix the data is empty due to asynchronous?

There is a page that displays No user when there is no data in the database. When there is data in the database, the real data is displayed. The code is as follows

const [users, setUsers] = useState([]);
const [isLoading, setIsLoading] = useState(false)

useEffect(() => {
  const fetchData = async () => {
    try {
      setIsLoading(true);
      const response = await fetch(`/users`, {
        method: 'GET',
        headers: {
          Authorization: `Bearer ${token}`,
        }
      });

      if (response.ok) {
        const data = await response.json();

        if (data.success) {
          setUsers(data.users);
        }

      } else {
        console.log('Other HTTP Error:', response.status);
      }

    } catch (error) {
      console.error('Error fetching users:', error);
    } finally {
      setIsLoading(false);
    }
  };

  fetchData();
}, [token]);


const userList = () => {

  if (isLoading) {
    return <div>Loading...</div>;
  }

  const activedUsers = users
  .filter((user) => user.status === 1);

  if (activedUsers.length === 0) {
    return(
      <>
      {activedUsers.length === 0 &&
        <div>No user</div>
      }
      </>
    )
  }

  return (
    <>
      {activedUsers.map((user) => (
        <div key={user.userID}>
          <Link to={`/user/${user.userID}`}>{user.Name}</Link>
        </div>
      ))}
    </>
  )
}

In the situation I am encountering now, when entering the page for the first time, ‘No user’ will always flash quickly, then Loading will appear, and then the real data will appear. Every time I refresh the page, this problem occurs.

The correct situation should be to display loading first, then if there is a user, display the user, if there is no user, display no user.

Any ideas?

E-Store Argument of type ‘string’ is not assignable to parameter of type ‘number’

This is what I get I don’t understand where I’m going wrong and the fix for this is in the ProductDetails part.

I’ve also attached my updated Git-Repo: https://github.com/pyjpg/Personal-Projects – the class is productDetails and it is using the redux catalogSlice.ts
(https://i.stack.imgur.com/MvipX.png)

Tried overriding but I don’t that is sensible.

Vite bundles `@firebase` peer dependency for library

I’ve been writing a hook+component library for React and Firebase, the source of which can be seen here.

It reached to a certain stability. My current goal is to reduce the size as much as possible. I’ve checked documents and stuff and this is the vite.config.ts that I have:

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import { defineConfig } from "vite";
import dts from "vite-plugin-dts";
import { peerDependencies } from "./package.json";

export default defineConfig({
  build: {
    lib: {
      entry: "./src/index.ts", // Specifies the entry point for building the library.
      name: "firereact", // Sets the name of the generated library.
      fileName: (format) => `index.${format}.js`, // Generates the output file name based on the format.
      formats: ["cjs", "es"], // Specifies the output formats (CommonJS and ES modules).
    },
    rollupOptions: {
      external: [...Object.keys(peerDependencies)], // Defines external dependencies for Rollup bundling.
    },
    sourcemap: true, // Generates source maps for debugging.
    emptyOutDir: true, // Clears the output directory before building.
  },
  plugins: [dts(), peerDepsExternal()], // Uses the 'vite-plugin-dts' plugin for generating TypeScript declaration files (d.ts).
});

build.lib.rollupOptions.external is to be expected: It gets peer dependencies from package.json. peerDepsExternal helps to not bundle the dependencies of peer dependencies.

Still, I’ve thought the final size is not that reasonable compared to some similar libraries.

That’s why I’ve checked what’s being included with npx vite-bundle-visualizer.

vite-bundle-visualizer report

Seems like @firebase is being included to the final library. I can also confirm it with less dist/index.es.js and see @firebase being mangled.

Firebase is a peer dependency so it shouldn’t be bundled to the final library (or maybe I misunderstand something cruicial about peerDependencies).

How do I exclude @firebase from the library?


Troubleshooting

Here are some ways that I’ve tried to remove @firebase from the final library:

  • Tried to manually add it into build.lib.rollupOptions.external in vite.config.ts.
  • Played with some settings in tsconfig.json.

getting error from convert ts class to dart

I’m trying to convert this javascript class interpolation to dart but im keep getting RangeErrors in Dart. everything works fine except this Interpolation class. its throws range errors.

Js code

// @ts-nocheck
class interpolate {
  constructor(e, t) {
    var s, i, n, a, r, o, h, c, l, d, u, p, g;
    if (null != e && null != t) {
      for (
        c = e.length - 1,
        a = [],
        u = [],
        h = [],
        d = [],
        p = [],
        i = [],
        s = [],
        n = [],
        o = [],
        l = [],
        r = 0; 0 <= c ? r < c : r > c; 0 <= c ? (r += 1) : (r -= 1)
      )
        (a[r] = e[r + 1] - e[r]),
        (o[r] = t[r + 1] - t[r]),
        (l[r] = o[r] / a[r]);

      for (r = 1; 1 <= c ? r < c : r > c; 1 <= c ? (r += 1) : (r -= 1))
        u[r] =
        (3 / a[r]) * (t[r + 1] - t[r]) - (3 / a[r - 1]) * (t[r] - t[r - 1]);

      for (
        h[0] = 1, d[0] = 0, p[0] = 0, r = 1; 1 <= c ? r < c : r > c; 1 <= c ? (r += 1) : (r -= 1)
      )
        (h[r] = 2 * (e[r + 1] - e[r - 1]) - a[r - 1] * d[r - 1]),
        (d[r] = a[r] / h[r]),
        (p[r] = (u[r] - a[r - 1] * p[r - 1]) / h[r]);
      for (
        h[c] = 1, p[c] = 0, i[c] = 0, r = g = c - 1; g <= 0 ? r <= 0 : r >= 0; g <= 0 ? (r += 1) : (r -= 1)
      )
        (i[r] = p[r] - d[r] * i[r + 1]),
        (s[r] =
          (t[r + 1] - t[r]) / a[r] - (a[r] * (i[r + 1] + 2 * i[r])) / 3),
        (n[r] = (i[r + 1] - i[r]) / (3 * a[r]));
      (this.x = e.slice(0, c + 1)),
      (this.a1 = t.slice(0, c)),
      (this.b1 = s),
      (this.c1 = i.slice(0, c)),
      (this.d1 = n);
    }
  }
  interpolate(e) {
    var t, s, i;
    for (
      s = i = this.x.length - 1;
      (i <= 0 ? s <= 0 : s >= 0) && !(this.x[s] <= e); i <= 0 ? (s += 1) : (s -= 1)
    );
    return (
      (t = e - this.x[s]),
      this.a1[s] +
      this.b1[s] * t +
      this.c1[s] * Math.pow(t, 2) +
      this.d1[s] * Math.pow(t, 3)
    );
  }
}

class CanvasSQ {
  constructor(e = 0, t = 0) {
    (this.x = e), (this.y = t);
  }
  distanceTo(e) {
    return Math.sqrt(Math.pow(this.x - e.x, 2) + Math.pow(this.y - e.y, 2));
  }
  angleTo(e) {
    let t = -(this.x - e.x),
      s = this.y - e.y,
      i = 360 - Math.atan2(s, t) * (180 / Math.PI);
    return i < 0 && (i += 360), i > 360 && (i -= 360), i;
  }
  dot(e) {
    return this.x * e.x + this.y * e.y;
  }
  lengthSQ() {
    return this.dot(this);
  }
  length() {
    return Math.sqrt(this.lengthSQ());
  }
  hypot2() {
    return this.dot(this);
  }
  hypot() {
    return Math.hypot(this.x, this.y);
  }
  add(e) {
    return e ?
      e instanceof CanvasSQ ?
      new CanvasSQ(this.x + e.x, this.y + e.y) :
      new CanvasSQ(this.x + e, this.y + e) :
      this;
  }
  neg(e) {
    return e instanceof CanvasSQ ?
      new CanvasSQ(this.x - e.x, this.y - e.y) :
      new CanvasSQ(this.x - e, this.y - e);
  }
  mul(e) {
    return e instanceof CanvasSQ ?
      new CanvasSQ(this.x * e.x, this.y * e.y) :
      new CanvasSQ(this.x * e, this.y * e);
  }
  rotateAround(e, t) {
    let s = Math.sin(t),
      n = Math.cos(t),
      a = this.x - e.x,
      r = this.y - e.y,
      o = a * s + r * n;
    return new CanvasSQ(a * n - r * s + e.x, o + e.y);
  }
  equalTo(e) {
    return this.x === e.x && this.y === e.y;
  }
  clone() {
    return new CanvasSQ(this.x, this.y);
  }
}

class interpolateCanvas {
  constructor(e = 255, t = [], s = [], i = [], n = []) {
    (this.scale = e),
    (this.rgb = t),
    (this.red = s),
    (this.green = i),
    (this.blue = n),
    (this.percent = 1);
  }
  static getInterpolation(e, t) {
    let s = [],
      i = [],
      a = new Float32Array(256);
    for (var r = 0; r < t.length; r++) s.push(t[r].x * e), i.push(t[r].y * e);

    console.log(s, i);
    let o = new interpolate(s, i);
    for (var h = 0; h < Math.ceil(s[0]); h++) a[h] = i[0];
    for (h = Math.ceil(s[0]); h < Math.ceil(s[s.length - 1]); h++)
      a[h] = o.interpolate(h);
    for (h = Math.ceil(s[s.length - 1]); h < 256; h++) a[h] = i[i.length - 1];
    return a;
  }
  static fillPaletteMap(e, t) {
    let s = interpolateCanvas.getInterpolation(e.scale, e.rgb),
      i = interpolateCanvas.getInterpolation(e.scale, e.red),
      n = interpolateCanvas.getInterpolation(e.scale, e.green),
      a = interpolateCanvas.getInterpolation(e.scale, e.blue);
    for (let r = 0; r < 256; ++r) {
      let o = r - s[r];
      (t.data[4 * r] = r - Math.round((r - (i[r] - o)) * e.percent)),
      (t.data[4 * r + 1] = r - Math.round((r - (n[r] - o)) * e.percent)),
      (t.data[4 * r + 2] = r - Math.round((r - (a[r] - o)) * e.percent));
    }
  }
}

function createCurveSet(e) {
  const t = new Array(),
    s = new Array(),
    n = new Array(),
    a = new Array();
  for (let r = 0; r < e[0].length; r += 2)
    t.push(new CanvasSQ(e[0][r], e[0][r + 1]));
  for (let r = 0; r < e[1].length; r += 2)
    s.push(new CanvasSQ(e[1][r], e[1][r + 1]));
  for (let r = 0; r < e[2].length; r += 2)
    n.push(new CanvasSQ(e[2][r], e[2][r + 1]));
  for (let r = 0; r < e[3].length; r += 2)
    a.push(new CanvasSQ(e[3][r], e[3][r + 1]));
  return new interpolateCanvas(1, t, s, n, a);
}

const canvas = createCurveSet([
  [62, 64, 190, 191],
  [0, 0, 133, 125, 255, 255],
  [0, 0, 54, 65, 209, 208, 255, 255],
  [60, 62, 96, 99, 240, 230, 255, 255],
]);

const value = interpolateCanvas.getInterpolation(canvas.scale, canvas.rgb);

// console.log(value);

my dart code

import 'dart:typed_data';

void main() {
  Uint8List list = Uint8List(1024);
  final canvas = createCurveSet([
    [62, 64, 190, 191],
    [0, 0, 133, 125, 255, 255],
    [0, 0, 54, 65, 209, 208, 255, 255],
    [60, 62, 96, 99, 240, 230, 255, 255],
  ]);
  var s = InterpolateCanvas.getInterpolation(canvas.scale, canvas.rgb);
  print(s);
}

class Interpolate {
  late final List<num> x;
  late final List<num> a1;
  late final List<num> b1;
  late final List<num> c1;
  late final List<num> d1;

  Interpolate(List<num> e, List<num> t) {
    final c = e.length - 1;

    List<num> a = [],
        u = [],
        h = [],
        d = [],
        p = [],
        i = [],
        s = [],
        n = [],
        o = [],
        l = [];

    // Use for-in loops for conciseness and readability
    for (var r = 0; r < c; r++) {
      a.add(e[r + 1] - e[r]);
      o.add(t[r + 1] - t[r]);
      l.add(o[r] / a[r]);
    }

    for (var r = 1; r < c; r++) {
      u.add(
          (3 / a[r]) * (t[r + 1] - t[r]) - (3 / a[r - 1]) * (t[r] - t[r - 1]));
    }

    // Use log() for output in Dart
    print(u);
    print(a);
    print(o);
    print(l);

    h.add(1);
    d.add(0);
    p.add(0);

    for (var r = 1; r < c; r++) {
      h[r] = 2 * (e[r + 1] - e[r - 1]) - a[r - 1] * d[r - 1];
      d[r] = a[r] / h[r];
      p[r] = (u[r] - a[r - 1] * p[r - 1]) / h[r];
    }
    print(h);
    print(d);
    print(p);

    print(c);

    h[c] = 1;
    p[c] = 0;
    i[c] = 0;

    for (var r = c - 1; r >= 0; r--) {
      i[r] = p[r] - d[r] * i[r + 1];
      s[r] = (t[r + 1] - t[r]) / a[r] - (a[r] * (i[r + 1] + 2 * i[r])) / 3;
      n[r] = (i[r + 1] - i[r]) / (3 * a[r]);
    }

    this.x = e.sublist(0, c + 1);
    this.a1 = t.sublist(0, c);
    this.b1 = s;
    this.c1 = i.sublist(0, c);
    this.d1 = n;
  }

  num interpolate(num e) {
    var s = this.x.length - 1;

    while (s >= 0 && this.x[s] > e) {
      s--;
    }

    final t = e - this.x[s];
    return this.a[s] +
        this.b[s] * t +
        this.c[s] * t * t +
        this.d[s] * t * t * t;
  }
}

class InterpolateCanvas {
  int scale;
  List<Point> rgb;
  List<Point> red;
  List<Point> green;
  List<Point> blue;
  double percent;

  InterpolateCanvas(this.scale, this.rgb, this.red, this.green, this.blue)
      : percent = 1.0;

  static Float32List getInterpolation(int e, List<Point> t) {
    List<num> s = [];
    List<num> i = [];
    Float32List a = Float32List(256);

    for (var r = 0; r < t.length; r++) {
      s.add(t[r].x * e);
      i.add(t[r].y * e);
    }

    var o = Interpolate(s, i);

    for (var h = 0; h < s[0].ceil(); h++) {
      a[h] = i[0].toDouble();

      for (h = s[0].ceil(); h < s[s.length - 1].ceil(); h++) {
        a[h] = o.interpolate(h).toDouble();
      }

      for (h = s[s.length - 1].ceil(); h < 256; h++) {
        a[h] = i[i.length - 1].toDouble();
      }
    }

    return a;
  }

  static Uint8List fillPaletteMap(InterpolateCanvas e, Uint8List t) {
    var s = getInterpolation(e.scale, e.rgb);
    var i = getInterpolation(e.scale, e.red);
    var n = getInterpolation(e.scale, e.green);
    var a = getInterpolation(e.scale, e.blue);

    for (var r = 0; r < 256; ++r) {
      var o = r - s[r];
      t[4 * r] = (r - ((r - (i[r] - o)) * e.percent)).round();
      t[4 * r + 1] = (r - ((r - (n[r] - o)) * e.percent)).round();
      t[4 * r + 2] = (r - ((r - (a[r] - o)) * e.percent)).round();
      t[4 * r + 3] = 255;
    }
    return t;
  }
}

class Point {
  num x;
  num y;
  Point({
    required this.x,
    required this.y,
  });
  @override
  String toString() {
    return "Point(x: $x, y: $y)";
  }
}

InterpolateCanvas createCurveSet(List<List<num>> e) {
  List<Point> t = [];
  List<Point> s = [];
  List<Point> n = [];
  List<Point> a = [];

  for (int r = 0; r < e[0].length; r += 2) {
    t.add(Point(x: e[0][r], y: e[0][r + 1]));
  }
  for (int r = 0; r < e[1].length; r += 2) {
    s.add(Point(x: e[1][r], y: e[1][r + 1]));
  }
  for (int r = 0; r < e[2].length; r += 2) {
    n.add(Point(x: e[2][r], y: e[2][r + 1]));
  }
  for (int r = 0; r < e[3].length; r += 2) {
    a.add(Point(x: e[3][r], y: e[3][r + 1]));
  }
  return InterpolateCanvas(1, t, s, n, a);
}

BootstrapTable Renders before Data downloaded from Akax

I am using BootstrapTable to display some data that is pulled from ajax using data-ajax="table_data" however the table renders before the data is downloaded.

Once the page has loaded and I ‘re-init’ the table it renders correctly.

The issue is purely on the first load.

Truncated code below.

HTML:

<table
       id="table"
       data-toolbar="#toolbar"
       data-show-columns="true"
       data-show-columns-toggle-all="true"
       data-detail-formatter="detailFormatter"
       data-minimum-count-columns="2"
       data-pagination="true"
       data-id-field="id"
       data-page-list="[25, 50, 100, all]"
       data-show-footer="true"
       data-side-pagination="server"
       data-ajax="table_data"
       data-query-params="queryParams"
       style="width:98%"
       data-row-style="rowStyle"
            </table>

JS:

function queryParams(params) {
    params.start = $('#stdate').val(),
        params.end = $('#edate').val(),
        params.search = $('#search_text').val()
    return params
}

function table_data(params) {
    let url = baseURL + "/booking/ajaxsearch/fetch";
   $.get(url + '?' + $.param(params.data)).then(function (res) {
        res = JSON.parse(res);
        params.success(res)
    })
}

function initTable() {
    $table.bootstrapTable('destroy').bootstrapTable({

        columns: [{
                title: 'title',
                field: 'field',
                align: 'center',
                valign: 'middle',
                sortable: false,
                switchable: false,
            },
            etc.....
        ]
    })
}

Thank you in advance.

How to get Button element in shadow root of html page (Metamask)?

I need to get the button to connect the Metamask wallet to Metis network (https://decentralize.metis.io/) using Javascript.

I want to get the Metamask button in below screen:
But the button is hidden hin shadow root of the page

I tried to use below script to access the Metamask button but I cannot

document.querySelector('w3m-modal').shadowRoot.querySelector('wui-flex style').shadowRoot.querySelector('wui-card').shadowRoot.querySelector('w3m-router').shadowRoot.querySelector('w3m-connect-view').shadowRoot.querySelector('wui-flex').shadowRoot.querySelectorAll('wui-list-wallet')[1].shadowRoot.querySelector('button').click(); 

But it cannot run and return the error. Could you please help to review and advise? Thank you.

Does puppeteer press Win + PrtSc to take screenshot?

Currently I’m programming to automate screenshot. I’ve learnt websites cannot detect if users screenshot or not, however they can know the key stroke we typed. So, I’d like to know when puppeteer screenshots using page.screenshot(); websites can detect Win + PrtSc keys.

I tried to screenshot on text but it didn’t show the keys, but not sure if it’s not expected way to press keys or page.screenshot() taking screenshots without pressing keys.

How to fix error running tsc index.ts with axios?

I’m getting an error when I run tsc index.ts to compile typescript having axios imported.
I have typescript installed globally.
Created a clean directory and what I did was run npm init -y, npm install axios, then create my index.ts a import axios inside:

import axios from "axios";

const url = 'https://jsonplaceholder.typicode.com/todos/1';

axios.get(url).then(response => {
    console.log(response.data);
});

When I run tsc index.ts to compile I get the following error:
enter image description here
Also installed the tsconfig.json with comand tsc --init but didn’t change anything. Current configuration the default:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

If I run ts-node index.ts the index.ts is compiled without error.
How can I fix this error when running tsc index.ts to compile?

node version v18.17.1
npm version 10.4.0
typescript version 5.3.3
axios 1.6.7

Thank you!