Export two images side by side on header pdf

I have been using this plugin for data table and exporting Excel and PDF files. My problem comes with PDF file export, I want to add two images on header page side by side but the only result that I got is an image in a row and the other on the next line, this is part of my code:

                 customize: function (doc) {
                    
                    if (doc) {
                        doc.content.splice(0, 0, [{
                            margin: [0, 0, 0, 0],
                            alignment: 'left',
                            image: 'base64_Image',
                            width: 100,
                            height: 40,
                        },{
                            margin: [0, 0, 0, 0],
                            alignment: 'right',
                            image: 'base64_Image',
                            width: 100,
                            height: 40,
                        }]);

                        console.log(doc);
                    }
                }

and this is the result:

enter image description here

Regards

How can i load data from text file into array [duplicate]

I have the need to load an array of objects that are stored in a text file to be used as an array in my code. The text file looks like this..

[{"ip":"195.54.160.149","date":"2021-12-30T18:47:06.570Z","url":"/"},
{"ip":"92.118.234.202","date":"2021-12-30T18:55:41.886Z","url":"http://azenv.net/"}]

when I read the file and then set my var to the data from the txt file

      readBlacklist: function() {
            fs.readFile(file, 'utf8' , (err, data) => {
                if (err) {
                  console.error(err);
                  return
                }
                this.accesslog = data
              });

        },

I get an error when i want to push any new objects into my this.accesslog. So my question is, is there a fast way to read from file and set the data of this.accesslog to the file data and still make it be recognized as an Array of objects or do i need to read the file and then loop thru it and push each object into the array ?
One of the issues is that I don’t know if the Object will always end with a n so i cant use a newline as a separator, I know it will always be an object which will start with a { and end with a }

JavaScript mapbox bounds – only get coordinates

I’m using mapbox and I’m trying to send my bounding box coordinates to an api using JavaScript. My existing code go do this is here:

    var ne = map.getBounds().getNorthEast();
    var sw = map.getBounds().getSouthWest();
    getGrid(ne, sw);

This is documented here:
https://docs.mapbox.com/mapbox.js/api/v3.3.1/l-latlng/

However this sends it as follows:

var ne = LngLat(-0.19424453896019145, 51.52165574100269)
var sw = LngLat(-0.19708728301148426, 51.52033324794837)

However I don’t want to be sending the brackets or LngLat to my api in the url, i instead want to send something more clean like this:

var sw = -0.19708728301148426, 51.52033324794837

How can I do that? Is there a way to clean this up in JS, or better yet just get only the coordinates returned in the first place?

I am searching Shoes web site admin interface [closed]

Hı, Iam trying to creating online Shoes Web site. But I don’t want to deal with create admin interface. So Can I find a pre-designed interface?

I’m looking for an interface where I can control these properties

organizing shoes that will have different categories (heels, padded, sandals, etc.)
Sorting shoes by color and size. Adding and removing stock.
Finally, the ability to add photos to the site.

I’m open to suggestions if there’s anything else that needs to be done.

Dialog within Popover in React HeadlessUI

I have a navbar that uses HeadlessUI’s Popover on mobile for the hamburger menu. By default, this menu closes when you click out/focus on an element that is not in it.

Now I’m trying to add a modal (HeadlessUI Dialog) that I want to open when clicking on a button that is in the popover menu. The modal is used within a ModalButton component definition (<><button><dialog></>). This is done for separation of concerns (everything relating to the modal is within ModalButton).

The issue is: when I’m in the navbar’s popover menu and click on the button to open the dialog. The browser focuses on this new dialog, and so the popover loses focus, making it close. Since it closed, the button (and thus the dialog sibling) are no longer rendered, and so the dialog disappears instantly.

For reference, this is a pseudocode of the react tree:

<navbar>
  <popover>
    <>            {/* "ModalButton" containing both the button and the dialog */}
      <button />  {/* Button that opens the dialog */}
      <dialog />  {/* This uses a portal internally (with HeadlessUI) */}
    </>
  </popover>
</navbar>

I can think of a few ways to solve this but neither are very good:

  1. Pull the modal higher in the tree, outside of the popover/hamburger menu but still inside the navbar. But that breaks separation of concerns since the navbar now has to worry about the open state of the modal.
  2. Put the modal somewhere at the top of the tree, and use some kind of global state (requires a state management library) to handle the opening of the modal.
  3. Maybe there’s a way to prevent the Popover from closing when focusing on the dialog? (but still allow it to close when focusing anything that is not the dialog)

I’d love to hear any ideas on fixing this issue.

Retrieving messages of which I am a sender, receiver, based on the user id

I have an array called messages. When I send a message I am sender, when I receive it I am receiver. My ‘id’ is ‘6003123’. What’s the easiest way to get messages that are sender, receiver and related to my id? Is the following way and the use of the filter method appropriate?

const messages = [
  {
    _id: 610be2c,
    msg: { text: 'sdsdsdsdsd' },
    sender: '608ffae',  
    receiver: '6003123'  **//myId**
  },
  {
    _id: 610be2d,
    msg: { text: 'sdsdsdsdsdsdsdsdsdsdsd' },
    sender: '6003123',   **//myId**
    receiver: '608ffae'
  },
  {
    _id: 610be2dert,
    msg: { text: 'sdsdsdsdsdsdsdsdsdsdsd' },
    sender: '6003123',  **//myId**
    receiver: '608ffae'
  },
  {
    _id: 610be2dertrtyu,
    msg: { text: 'sdsdsdffgghghgh' },
    sender: '3456',  
    receiver: '098765'
  },
  {
    _id: 610be2dertrtyu,
    msg: { text: 'sdsdsdffgghghgh' },
    sender:  '098765'
    receiver: '3456'
  } 
] 

const myId = '6003123';


let messagesArray = messages.filter(message => message.sender === myId && message.receiver === myId) || message.sender === myId || message.receiver === myId));

Is it possible to get an actual Javascript object from hookstate.js State without referencing the objects keys?

I am using the hookstate.js library and am trying to something as simple as to get the entire Javascript object from the State object without having to reference the key of the object. For example, state.set({first:'John',last:'Doe'}) and then somehow access the entire object (as a bona fide JS object, not State) without having to know the object key and reference state.first.get(). Is there no built in way to do such a simple thing?
I can do so with a reduce so:

    const { keys } = state
    const jsObject= keys.reduce((pre, cur) => {
      const stateVal = state[cur].get()
      return { ...pre, [cur]: stateVal }
    }, {})

however this is not possible if I am expecting nested objects etc.

Discord bot clear command

I would like my bot to delete only two messages but I don’t know what command I have to do for it to do that.

const lib = require('lib')({token: process.env.STDLIB_SECRET_TOKEN});
 
await lib.discord.channels['@0.1.1'].messages.destroy({
    message_id: `${context.params.event.message.id}`,
    channel_id: `${context.params.event.message.channel_id}`
  });

receive get and post requests in vue.js

I want to be able to receive and resond to get and post requests in my vue application. The template that I’m using is webpack-simple, and I want to be able to handle requests in the src>main.js file.

import App from './App.vue'

// incoming request
   // get request data
   // process data
   // send response

new Vue({
  el: '#app',
  render: h => h(Main)
})

How do you send message content and an embed?

I’m coding a Discord bot with Discord.js version 12.
I’d like to send a welcome message that has content and an embed, similar to the Mimu bot.
For example,
The bot mention the user and a welcome role, and in the same message have an embed.
How would you do this? I can’t seem to figure it out. I know how to send the embed, but not with a message.

My page explodes every time I run my calculator (Javascript) [closed]

I am creating a calculator but every time I run the res onclick code or the result object, it scrubs the whole page and I don’t understand why, I did everything possible but I couldn’t fix it, here I leave the code.

I know the error is based on Res.onclick and I think it is with the whiles, more explained they are made to verify how many multiplication, subtraction, addition and division symbols there are, I would like to know if there is a faster way too, well that was I hope that Can you help me solve this problem, I just started in this javascript and I think this is good to at least start, thanks.

var Boton_0 = document.getElementById("Num_0")
var Borrar = document.getElementById("Borrar")
var Boton_1 = document.getElementById("Num_1")
var Boton_2 = document.getElementById("Num_2")
var Boton_3 = document.getElementById("Num_3")
var Boton_4 = document.getElementById("Num_4")
var Boton_5 = document.getElementById("Num_5")
var Boton_6 = document.getElementById("Num_6")
var Boton_7 = document.getElementById("Num_7")
var Boton_8 = document.getElementById("Num_8")
var Boton_9 = document.getElementById("Num_9")
var Res = document.getElementById("Res")
var Suma = document.getElementById("Suma")
var Resta = document.getElementById("Resta")
var Multi = document.getElementById("Multi")
var Divi = document.getElementById("Div")
var Text_Num = document.getElementById("Text")
var Text_Res = document.getElementById("Result")
var Text_InMove = " "
function CambiarText_Num() {
    Text_Num.innerHTML = Text_InMove
    console.log(Text_InMove)  
}
setInterval(CambiarText_Num, 100)

// Botones
Borrar.onclick = ()=> {
    Text_InMove = Text_InMove.slice(1)
}
Boton_0.onclick = ()=> {
    Text_InMove = "0".concat(Text_InMove)
}
Boton_1.onclick = ()=> {
    Text_InMove = "1".concat(Text_InMove)
}
Boton_2.onclick = ()=> {
    Text_InMove = "2".concat(Text_InMove)
}
Boton_3.onclick = ()=> {
    Text_InMove = "3".concat(Text_InMove)
}
Boton_4.onclick = ()=> {
    Text_InMove = "4".concat(Text_InMove)
}
Boton_5.onclick = ()=> {
    Text_InMove = "5".concat(Text_InMove)
}
Boton_6.onclick = ()=> {
    Text_InMove = "6".concat(Text_InMove)
}
Boton_7.onclick = ()=> {
    Text_InMove = "7".concat(Text_InMove)
}
Boton_8.onclick = ()=> {
    Text_InMove = "8".concat(Text_InMove)
}
Boton_9.onclick = ()=> {
    Text_InMove = "9".concat(Text_InMove)
}
Suma.onclick = ()=> {
    Text_InMove = "+".concat(Text_InMove)
}
Resta.onclick = ()=> {
    Text_InMove = "-".concat(Text_InMove)
}
Multi.onclick = ()=> {
    Text_InMove = "x".concat(Text_InMove)
}
Divi.onclick = ()=> {
    Text_InMove = "÷".concat(Text_InMove)
}

// Resultado
Res.onclick = ()=>{
  let Img_PC = Text_InMove
  let Can = 0
  let NoMas = false
  let NoMas_2 = false
  let NoMas_3 = false
  let NoMas_4 = false
  let MasListo = false
  let MenListo = false
  let Mulisto = false
  while (NoMas == false){
     let X = Img_PC.indexOf("+")
     if (X == -1){
        NoMas = true
        MasListo = true
     }
     else {
        Can++
     }
  }
  while (NoMas_2 == false && MasListo == true){
     let X = Img_PC.indexOf("-")
     if (X == -1){
        NoMas_2 = true
        MenListo = true
     }
     else {
        Can++
     }    
  }
  while (NoMas_3 == false && MenListo == true){
     let X = Img_PC.indexOf("x")
     if (X == -1){
        NoMas_3 = true
        Mulisto = true
     }
     else {
        Can++
     }    
  }
  while (NoMas_4 == false && Mulisto == true){
     let X = Img_PC.indexOf("÷")
     if (X == -1){
        NoMas_4 = true
     }
     else {
        Can++
     }    
  }
  if (NoMas == true && NoMas_2 == true && NoMas_3 == true && NoMas_4 == true){
    console.log(Can)
  }
  let Num_1
  let Num_2 
}

Using Moment.tz to convert to timezone

I have the following code

const timeInTz = moment.tz('2022-01-01 21:00', 'America/New_York').utc().format('HH:mm');
alert(timeInTz);

I’m trying to convert from eastern time to utc and then only get the time in the output date, but the result is not a UTC date but actually eastern time. The code is not converting the date from one timezone to another. Can someone please help?

Laravel 7/8 best practice for multipart page

Im very new to Laravel. It seems there are a few ways to get things done so Im looking for best practice on multipart page load.

In php I might have loaded all I need in a function and passed all my objects/results as vars then use the vars as needed on the page.

  • this has the drawback of a large function plus individual functions for refreshing part of the content with AJAX

Here I send all vars to page on load, it returns view, so I cant use this function later for page part

 // load full page with vars for parts 
 // ( will require other functions for separate requests later )
 public function profilepage(){
   // do query set result as var to be passed
   // do query set result as var to be passed
   // do query set result as var to be passed
 return view('profiles.profile', ['data'=>$data,'social'=>$social,'exper'=>$experience]);
 }

With Laravel, we have routes that are pretty flexible to get exactly what we need.

  • so it seems I would want to set all my page parts as routes to individual functions on Load
  • then use those same functions for refresh with AJAX?

Would this load the page while also loading the page parts? Is the best way to multi-part content?

// load page
Route::get('/profile', 'ProfileController@profile');
// get page parts
Route::get('/profile', 'ProfileController@profile')->('get.social_content');
Route::get('/profile', 'ProfileController@profile')->('get.job_content');
Route::get('/profile', 'ProfileController@profile')->('get.experience_content');

Is there a problem mixing javascript and typescript in node projects?

I am very new to node.js and typescript. I am trying to learn by porting an existing application over from python. I am getting a syntax error in a place I do not expect.

I have a class that is the workhorse of the project. It is in a file called myClass.ts

myProject
└── js
    ├── commands
    │   └── rules.js
    ├── myClass.ts
    └── main.js

rules.js includes myClass as:

try {
    const {myClass} = require("../myClass.ts")
} catch(e) {
    console.log(e)
}

I am using PyCharm and can put a breakpoint in the catch block. The error points to the constructor in the class. The error is:

/home/me/PycharmProjects/myProject/js/myClass.ts:44
        rule_type: string,
                ^

SyntaxError: Unexpected token ':'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/me/PycharmProjects/myProject/js/commands/rules.js:4:19)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)

myClass is too big to fit in here. It starts:

const {randomInt} = require('crypto')

class myClass {
    constructor(
        rule_type: string,
        display_type: string,
        range_min: number     = 1,
        range_max: number     = 10000,
        display_mapping: {}   = undefined,
        value_adjustments: {} = undefined,
    ) {
        this.rule_type = die_type
        this.display_type = display_type
        this.range_min = Math.trunc(range_min)
        this.range_max = Math.trunc(range_max)
        this.display_mapping = display_mapping
        this.value_adjustments = value_adjustments
    }

    ...//a bunch of methods, etc
}

exports.myClass = myClass;

If I take the : string type hint away, then the error just falls down to the next type hint. Is there a problem mixing javascript and typescript in this way?

Why am I mixing js and ts? I found a sample node project that seems to be a reasonable starting point for what I want to do. I figured that trying out typescript for this class might be a good exercise.

** Edit **

Thanks to all. Much to learn…

Why am I getting a 500 when uploading file via the browser but not via Postman?

When I run my API on Postman, the file gets stored in S3 followed by the DB successfully, as depicted in the FileUploadController.php file below. I’m not sure if there’s something off in the Gallery.js file but my suspicion is that the name="userUpload" attribute on the <input/> isn’t being consumed properly by the POST request? But I’m not sure.

When I selected and upload a file on the browser, I get an error when I check the logs that says:

local.ERROR: Call to a member function getClientOriginalName() on null {"userId":1,"exception":"[object] (Error(code: 0): Call to a member function getClientOriginalName() on null at /var/www/app/Http/Controllers/FileUploadController.php:29)

I’m not sure why getClientOriginalName() gets null when trying on the browser but seems to work fine, all-around, when trying on Postman. console.log(data); displays the file name correctly, so we can rule that out in terms of it’s undefined or null.

How can I fix this?

Here’s FileUploadController.php file:

public function fileUpload(Request $request)
{

    $path = env('AWS_S3_PATH');
    $file = $request->file('userUpload');
    $imgName = $file->getClientOriginalName();
    $bucket = env('AWS_BUCKET');
    $region = env('AWS_REGION');
    $url = "https://{$bucket}.s3.{$region}.amazonaws.com{$path}{$imgName}";
    $userId = Auth::user()['UserID'];

    $file->storeAs(
        $path, // Folder
        $imgName, // Name of image
        's3' // Disk Name
    );

    $data = [
        'url' => $url,
        'UserID' => $userId,
        'isUploaded' => true,
        'timeStamp' => time(),
        'updated_at' => time()
    ];

    Upload::create($data);

    return $data;

}

Here’s Gallery.js file:

import React, { useState } from 'react';
import {Button, Image, Modal} from "react-bootstrap";

const Gallery = () => {

    const [filePreview, setFilePreview] = useState(null);

    const [selectedFile, setSelectedFile] = useState(null);

    const handleShow = () => setShow(true);

    const handleFileInput = (e) => {
        setFilePreview(URL.createObjectURL(e.target.files[0]));
        setSelectedFile(e.target.files[0]);
    }

    const uploadFile = () => {
        const data = {
            'userUpload': selectedFile
        }

        const headers = {
            "Accept": 'application/json',
            "Authorization": `Bearer ${authToken}`
        }

        console.log(data);

        axios.post('http://localhost:8005/api/file-upload', data, {headers})
            .then(resp => {
                console.log(resp);
            }).catch(error => {
            console.log(error);
        });

    }

    return (
        <form encType="multipart/form-data">
            <div className="fileUpload text-center">
                <input type="file" onChange={handleFileInput} name="userUpload" required/>
                <Button variant="primary" onClick={handleShow}>
                    Launch demo modal
                </Button>
            </div>

            <Modal show={show} onHide={handleClose}>
                <Modal.Body>
                    <Image fluid src={filePreview}/>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="primary" onClick={() => uploadFile()}>Upload!</Button>
                </Modal.Footer>
            </Modal>

        </form>
    );
}

export default Gallery;