Category: javascript

I’m really new with formidable’s Victory components for modular charting and data visualization. For the last few days I’m trying to change the font to “Poppins font” in my Victory Bar component. But it’s not seems possible with my very little knowledge. It’s showing “Helvetica Neue” fonts. Which is default font of Victory. Victory’s documentation has no clear instruction on changing font type.

Is there any way to solve this?

Here is my code. I’m using React with NextJS.

import {
  VictoryBar,
  VictoryChart,
  VictoryTheme,
  VictoryTooltip,
} from "victory";

const data = [
  { reptile: "lizard", awesomeness: 3234 },
  { reptile: "snake", awesomeness: 2048 },
  { reptile: "crocodile", awesomeness: 2600 },
  { reptile: "alligator", awesomeness: 9000 },
];
const x = "reptile";
const y = "awesomeness";

function Victory() {
  return (
    <div>
      <VictoryChart theme={VictoryTheme.material} domainPadding={{ x: 20 }}>
        <VictoryBar
          style={{ data: { fill: "#2563eb" } }}
          data={data}
          x={x}
          y={y}
          alignment="start"
          labels={({ datum }) => datum.awesomeness}
          labelComponent={<VictoryTooltip />}
        />
      </VictoryChart>
    </div>
  );
}

export default Victory;

I am trying to read a JSON file stored in an S3 bucket. I am trying to get the JSON file contents using getObject command of Javascript SDK. I am getting output as [object Object] when I convert the aws response to utf8 string. This is my nodeJS code:

const s3Client = require("./aws_s3_connect");
const { GetObjectCommand } = require("@aws-sdk/client-s3");
//const storage_file_path = "";

const run = async (input_data) => {

    const bucket_name = "bucket_name";
    const file_path = "";
    const file_name = "sample.json";

    const bucketParams = {
        Bucket: bucket_name,
        Key: file_path + file_name,
        ResponseContentType: 'application/json'
    };

    try {
        // Send get object command
        let aws_response = await s3Client.send(new GetObjectCommand(bucketParams));
        console.log(aws_response);
        //var blob = new Blob(aws_response.Body);
        let data = aws_response.Body.toString('utf8');
        console.log(data);

        return data;
    } catch (err) {
        console.log("Error", err);
    }
};

module.exports = { run };

Please help me to identify the issue. Thanks for your help.

I have the following code:

const animal = 'sheep'

const animalFoods = {
 sheep: 'grass',
 horse: 'hay',
 tiger: 'meat',
}

what I want to achieve is to loop through the object comparing the animal variable against the animalFoods keys and when there is a match, I want the return the value only. E.g. variable sheep equals animalsFoods key of sheep return value only.

I have tried the following but it returns both the key and value so ['sheep', 'grass'] but I only want grass to be returned.

const food = object.keys(animalFoods).filter(([key, value]) => {
 if (key === animal) {
  return value
 }
})

I´m having trouble with the mobile part of a Javascript metronome project, I want for the knob on the ranged input to grow when is clicked and hold, or when is touched and hold. With the desktop part I have no problem, I just added an :active pseudoclass with a transform scale, but it´s not working on touch events. Any idea what should I do? Here´s how it´s set up in CSS for desktop:

input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.2);
}

I´ve tried making it with JS instead of CSS, but I´m not sure how to adress just the know from the input, I tried placing this on the touchstart event, but i´ts still not working:

slider.style.setProperty('--thumb-scale', '2');

I am getting the error that datatablesbs is not a constructor on this line of code:

let table = new datatablesbs('#myTable',{

but when the table is loaded the error appears.

I am using these packages:

 "datatables": "^1.10.18",
    "datatables.net": "^1.11.3",
    "datatables.net-bs4": "^1.13.3",
"jquery": "^3.5.1",

I am using this package so I can filter the columns. It worked previously, I havent worked on this functionality but seems like it doesnt work anymore.

I’m facing an issue on resizing map when I have a lot of element/markers to load on it. The resize seems to be blocked and the map having that kind of view :

Here is how the map is called:

            // const bounds = new mapboxgl.LngLatBounds();
            var group = [];
            map.addControl(new mapboxgl.NavigationControl(
                { showCompass: false }
            ));

            // Refresh map info on : Zoom
            map.on('zoomend', (e) => {
                // Launch the action only on human zoom not an automatic zoom (teh zoom of the beginning)
                if (typeof e.originalEvent !== 'undefined') {
                    refreshSearchResultOnMapAct(map);
                }
            });

            // Refresh map info on : Drag
            map.on('dragend', () => {
                refreshSearchResultOnMapAct(map);
            });

            // Add markers to the map.
            for (const marker of geojson.features) {
                // Create a DOM button for each marker.
                const button = document.createElement('button');
                // Button style depending on type_estate.
                if (marker.properties.type === 'habitation') {
                    button.className = 'btn map__price';
                    button.prepend(marker.properties.price);
                } else {
                    // IE style.
                    button.className = 'btn map__point';
                }

                // Action for markers click
                button.addEventListener('click', () => {
                    $.ajax({
                        type: "POST",
                        url: my_ajax_object.ajaxurl,
                        data: {
                            action: 'show_modal_map_item',
                            id: marker.properties.id_estate,
                        }
                    }).done(function (response) {
                        $('.js-map-card').html(response.data);
                        $('.js-map-card-wrapper').removeClass('is-hidden')

                        $(document).on('click', '.js-map-card__close', function () {
                            $('.js-map-card').html();
                            $('.js-map-card-wrapper').addClass('is-hidden')
                        });
                    })
                });

                group.push(marker.geometry.coordinates)
                // Add markers to the map.
                let map_points = new mapboxgl.Marker(button)
                    .setLngLat(marker.geometry.coordinates)
                    .addTo(map);

                // Push the map markers(map_points) inside markers array
                markers.push(map_points);
            }
            // Zoom on markers
            var bounds = group.reduce(function (bounds, coord) {
                return bounds.extend(coord);
            }, new mapboxgl.LngLatBounds(group[0], group[0]));

            map.fitBounds(bounds, { padding: 20 });
            map.resize();
        });

It is in a function after an ajax sucess. Wich one is triggered when user is submitting a search form.
Each marker come from an elastic search result providing geolocalisation points.

Thanks

I’m having trouble getting my email.js and sweet alert to work with Express. I’ve tried several different codes, but I haven’t been able to resolve the issue. I’m hoping that someone can help me out with this problem.

Thank you.

this is my code:

HTML
[HTML CODE](https://i.stack.imgur.com/yKALx.png)

JAVASCRIPT

[[JAVASCRIPT](https://i.stack.imgur.com/xLBFJ.png)]
[CONTINUATION](https://i.stack.imgur.com/zZtgb.png)
[CONTINUATION](https://i.stack.imgur.com/xvqyo.png)

Despite trying multiple codes, I’ve been unable to get the desired function to work. I had hoped that my attempts would yield the expected results, but unfortunately, this has not been the case.

I’ve added an image overlay to a non-geographical map using Leaflet.js and CRS.Simple for positioning. When I call map.fitToBounds(bounds) the image overlay is initially displayed mostly off screen, but if the browser window is resized (presumably triggering a reflow) it pops into the expected position.

What I Did

The relevant lines of code used to generate the map:

let map = L.map('floorplan', { crs: L.CRS.Simple });
const imageUrl = floorplanUrl;
const imageBounds = [[0, 0], [1000, 1000]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
map.fitBounds(imageBounds);

Expected:

The whole floorplan image is displayed on the screen and fills the map area.

Actual:

Most of the floorplan image initially appears off screen, but moves into the expected position if the browser window is resized. (Tried in both Firefox and Chrome).

Image overlay displayed off screen:

Image overlay after resizing browser window:

I can work around this by manually dispatching a resize event on the window object:

const event = new Event('resize');
window.dispatchEvent(event);

But I suspect I’m doing something wrong, either misunderstanding the coordinate system, or maybe there’s some interference with some other CSS on the page.

I’ve noticed that the difference between the first state and the second state is that in the second state a 3D CSS transform is added to the div with classes leaflet-pane and leaflet-map-pane:

transform: translate3d(530px, 248px, 0px);

What am I doing wrong?

I have this school project where I have to make a button where a circle in the middle changes to a certain gif for a few seconds and then turns back to the object before. My idea would be a circle that turns into a reverse clock gif and then turn back to a circle. like a time travel button. And it also includes css and js.

I haven’t really started or tried anything I thought here could be a starting point.

 @Html.AntiForgeryToken()
    @section Scripts{
        <script type="text/javascript">
            function verifyUser() {
                var email = $('#email').val();
                var pass = $('#password').val();
                if (email == '' || pass == '') {
//CUT
<form method="Post" >
                    <h1 class="login">LOGIN</h1>
                    <input type="email" id="email" name="email" class="email" placeholder="Email">
                    <input type="password" id="password" name="password" class="password" placeholder="Password">
                    <button type="button" class="submit" onclick="verifyUser();">Submit</button>
                    
                </form>

i am expecting to find the anser and what to do in this situation

I have an array of Objects (below) and I am trying to figure out how to return the closest day from an array of objects that is more than todays date.

const poc = [
  {
    PartialRedemptionAmount: 2880000,
    PartialRedemptionDate: '2022-10-01T00:00:00Z',
    PartialRedemptionPrice: 100,
    PartialRedemptionType: 'UnscheduledRedemption',
  },
  {
    PartialRedemptionAmount: 2880000,
    PartialRedemptionDate: '2023-03-03T00:00:00Z',
    PartialRedemptionPrice: 100,
    PartialRedemptionType: 'UnscheduledRedemption',
  },
  {
    PartialRedemptionAmount: 2880000,
    PartialRedemptionDate: '2023-03-05T00:00:00Z',
    PartialRedemptionPrice: 100,
    PartialRedemptionType: 'UnscheduledRedemption',
  },
];

The datapoint I am trying to compare isPartialRedemptionDate

I tried doing a some since I need the the return object back that matches the criteria.

const closestDay = poc.some(poc)

any thoughts?

Good day,

I have a dropzone implementation, but now I want to add a new parameter on send.
But this should be a dynamic parameter depending on a selected value.

The dropdown is working fine, but as soon as I try to add postdata it bugs out.

var options = { iframe: { url: 'http://example.com/images/?ajaxcall=upload' } };
var zone = new FileDrop('my-dropzone', options);

zone.event('send', function (files) {
    files.each(function (file) {
        file.append("variablename", 'says hi');

        file.event('done', function (xhr) {
            console.log('file uploaded');
            console.log(xhr);

            var obj = jQuery.parseJSON(xhr.responseText);

            console.log(obj);

            $("#--cms-images").load('http://example.com/images/?ajaxcall=loadimages', function () {
                $("#image_" + obj.id).attr("src", obj.image);
                __init_image_click();
            });
        });

        file.sendTo('http://example.com/images/?ajaxcall=upload');
    });
});

And basically it says this line is invalid :

    file.append("variablename", 'says hi');

Uncaught TypeError: file.append is not a function

So without a doubt, I declared it incorrectly.
But my question is, how should I append a variable otherwise?

I have seen others

Using NestJS, TypeORM, PostgreSQL and dealing with date time formatting.

Here is my common.entity.ts

// ! Dependencies.
import {
  BaseEntity,
  BeforeInsert,
  BeforeUpdate,
  Column,
  CreateDateColumn,
  Entity,
  PrimaryGeneratedColumn,
  UpdateDateColumn,
} from 'typeorm';

/**
 * Represents a common entity that includes fields for auditing.
 */
@Entity()
export class Common {
  /** The primary key of the entity. */
  @PrimaryGeneratedColumn()
  id: number;

  /** The ID of the user who created the entity. */
  @Column({ nullable: true })
  created_by: number;

  /** The date and time the entity was created. */
  @CreateDateColumn({ type: 'timestamp with time zone' })
  created_at: Date;

  /** The ID of the user who last modified the entity. */
  @Column({ nullable: true })
  modified_by: number;

  /** The date and time the entity was last modified. */
  @UpdateDateColumn({ type: 'timestamp with time zone' })
  modified_at: Date;
}

As you know @CreateDateColumn() and @UpdateDateColumn() automatically creates record creation and update date-time -s, for example 2023-03-07 23:45:48.415+00 and Perhaps you already understand what my problem is, i want that this record created in other format, like 03-07-2023 23:45:48.415+00 (dd/mm/yyyy hh:mm:ss + timezone)

thank you in advance and good luck.

I have a sample data like,

{ “sample1” : “abc”, “sample2” : “def” }

I want to redirect to an external URL and pass the above object as form data.
Can someone help me with the right approach for this?

I have the following java script code I trid to upload mutiples videos to my Viemo account now the problem is when I upload mutiples videos only one of them work other videos will corruption and not workong what is the exactly my problem with this code.

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tus.js"></script>


    <script>
 
    document.getElementById('browse').addEventListener("input", function (e) {

        

        for (var i = 0; i < e.target.files.length; i++) {

            var file = e.target.files[i];
             
        

        var myToken = "MyToeknNumber";
        var url = 'https://api.vimeo.com/me/videos'
        var xhr = new XMLHttpRequest()
        xhr.open('POST', 'https://api.vimeo.com/me/videos', true)
        xhr.setRequestHeader('Authorization', 'Bearer ' + myToken)
        xhr.setRequestHeader('Content-Type', 'application/json')
        xhr.setRequestHeader('Accept', 'application/vnd.vimeo.*+json;version=3.4')
        xhr.onload = function (e) {
            if (e.target.status < 400) {
                console.log(e.target.status) //this returns status 200
                var response = JSON.parse(e.target.responseText)


              
                var upload = new tus.Upload(file, {
                    uploadUrl: response.upload.upload_link,   
                    retryDelays: [0, 1000, 3000, 5000],
                    metadata: {
                        
                        filename: file.name,
                        filetype: file.type
                    },
                    onError: function (error) {
                        console.log("Failed because: " + error)
                    },
                    onProgress: function (bytesUploaded, bytesTotal) {
                        var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)
                        console.log(bytesUploaded, bytesTotal, percentage + "%")
                    },
                    onSuccess: function () {
                        console.log("Download %s from %s", upload.file.name, upload.url)
                    }
                })
                // Start the upload
                upload.start()
            } else {
                console.log("This is a developer error: " + e)
                console.log(e.target.status)
            }
        }.bind(this)
        xhr.send(JSON.stringify({
            upload: {
                approach: 'tus',
                size: file.size
            },

            name: 'Name of the Video' + i + '',

            description: "Video description"
             
            
             
        }));

        } // end the loop
    })

        
    </script>

I wanted to upload all videos to vimeo just on file will working that has the smallest size.