Category: javascript

I’m working on a calendar using FullCalendar from fullcalendar.io. Here is my code :

import React from "react"
import FullCalendar from "@fullcalendar/react"
import listPlugin from "@fullcalendar/list"
import dayGridPlugin from "@fullcalendar/daygrid"
import timeGridPlugin from "@fullcalendar/timegrid"
import interactionPlugin from "@fullcalendar/interaction"
import frLocale from "@fullcalendar/core/locales/fr"

const Calendar = (props) => {


const calendarOptions = {
  events: data.events.length ? data.events : [],
  eventColor: variables.promoter,
  plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],
  initialView: "dayGridMonth",
  headerToolbar: {
    start: "prevYear,prev,next,nextYear",
    center: "title",
    end: "dayGridMonth,timeGridWeek,timeGridDay",
  },
  timeZone: "Europe/Paris",
  eventTimeFormat: { hour: "2-digit", minute: "2-digit", hour12: false },
  editable: true,
  locale: frLocale,

  eventResizableFromStart: true,

  dragScroll: true,

  dayMaxEvents: 2,

  navLinks: true,

  ...

  };
return <FullCalendar {...calendarOptions} />;
  };
  
  export default Calendar;

Anyway the code works, and it gives me a calendar as follows.

So my question is : Is it possible to store the calendar title into a variable so that I can use it the way I want?

I have already looked at the fullcalendar documentation, but still don’t have any solution…
Thank you by advance for any help!

How can i generate each time the same secuence?

i have this function to sort randomly but now i need the same secuence each time

function shuffle(array) {
  let currentIndex = array.length,  randomIndex;

  while (currentIndex != 0) {

    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]];
  }

  return array;
}

var arr = [2, 11, 37, 42];
shuffle(arr);
console.log(arr);

I want to write an if for my code to first check the support of navigator.clipboard.writeText then set my text in it, how can I do that in javascript?

Hi i have an array of objects like so,

const arr_obj = [
    {
        id: “1”,
        name: “product”,
        type: “product”,
        children: [
            {
               id: “3”,
               name: “subitem1”,
               type: “subitem”,
               children: [],
            },
            {
               id: “4”,
               name: “item2”,
               type: “item”,
               children: [
                   {
                       id: “5”,
                       name: “subitem3”,
                       type: “subitem”,
                       children: [],
                   }
               ],
           },
           {
               id: “5”,
               name: “item3”,
               type: “item”,
               children: [
                   {
                       id: “6”,
                       name: “subitem7”,
                       type: “subitem”,
                       children: [],
                   },
               ],
           },
           {
               id: “2”,
               name: “group”,
               type: “group”,
               children: [
                   {
                       id: “10”,
                       name: “product1”,
                       type: “product”,
                       children: [
                           {
                               id: “11”,
                               name: “subitem1”,
                               type: “subitem”,
                               children: [],
                            },
                            {
                                id: “12”,
                                name: “item3”,
                                type: “item”,
                                children: [
                                    {
                                        name: “subitem5”,
                                        id: “18”,
                                        type: “subitem”,
                                    },
                                ],
                            } 
                        ];
                    ]
 

Now as seen from above array. there is nested children array. below is the heirarchy

product
    *children
        *item
            *children
                *subitem
                    *children
        *subitem
            *children
        

or 

group
    *children
        *product
            *children
                *item
                    *children
                        *subitem
                            *children
                *item
                    *children
         *product
             *children

or the children can be empty on first level , 2nd level or any level. children array is recursive.

now from above array i want to check the type of every object and if type is product or group then i want to add property disabled true if not should add property disabled false.

i have too loop through every children array too and check its type and add this property disabled.

i have tried snippet below

const new_obj = React.useMemo(() => {
    return arr_obj.map((arr) => ({
        ...arr,
        disabled: arr?.type === "product" || arr?.type === "group" ? true : false,
    }));
 }, [arr_obj]);

but this adds disabled only to the outer level but doesnot loop through children and add disabled prop. how can i loop through children array recursively and add this disabled property.

could someone help me with this. thanks.

I am working with amcharts 4 pie charts. I want to truncate labels which are long and share small percentage so they don’t go outside pie chart boundaries as shown in attached image https://ibb.co/0mJnrgy

As per the amcharts documentation (https://www.amcharts.com/docs/v4/tutorials/dealing-with-piechart-labels-that-dont-fit/) I tried truncate=false but unfortunately that didn’t work, Not sure why.

So I tried to achieve it using adapters. Below is what I tried so far.
This is working but label as well as tooltip both getting truncated. I have gone through lot of documentation but haven’t found any proper solution.

Any clue or help is very appreciated.

Demo & progress : https://codepen.io/amitpatil/pen/bGYEdXK?editors=0110

I am a beginner in js and trying to solve problems. Suddenly saw a problem but I am confused how can I do it. The problem is

Given a list of names, determine the number of names in that list for which a given query string is a prefix. The prefix must be at least 1 character less than the entire name string.

Example:
Names = [‘jackson’, ‘jacques’,’jack’]

query = [‘jack’]

The complete query string ‘jack‘ is a prefix of jackson but not of jacques or jack. The prefix cannot contain the entire name string, so ‘jack’ does not qualify.

Input sample:
names = ['steve', 'stevens', 'danny', 'steves', 'dan', 'john', 'johnny', 'joe', 'alex', 'alexander']
query = ['steve','alex','joe', 'john', 'dan']

sample output = [2,1,0,1,1]

Explanation:

Query 1: steve appears as a prefix in two strings: stevens and steves
Query 2: alex appears as a prefix in one string: alexander
Query 3: joe does not appears as a prefix in any string
Query 4: john appears as a prefix in one string: johnny
Query 2: dan appears as a prefix in one string: danny

Code:

/*
 * Complete the 'findCompletePrefixes' function below.
 *
 * The function is expected to return an INTEGER_ARRAY.
 * The function accepts the following parameters:
 *  1. STRING_ARRAY names
 *  2. STRING_ARRAY query
 */

function findCompletePrefixes(names, query) {
    // Write your code here

}

When I sign in my web app I could send request from browser, but when I want to call it with javasctipt (fetch/ajax request) it always give me status code 302, i think it is redirecting me on login page. I tried to set authorization header with Basic authentication but it won’t work. Is there a way to perform call with javascript if i have form authentication?

This is from my web.xml file:

  <login-config>
        <auth-method>FORM</auth-method>
        <form-login-config>
            <form-login-page>/login</form-login-page>
            <form-error-page>/login</form-error-page>
        </form-login-config>
  </login-config>

This is my controller:

@Controller
@RequestMapping("/user")
public class UserController {
    @ResponseBody
    @RequestMapping(path = "get-user", method = RequestMethod.GET)
    public User GetUser(HttpServletRequest request, @RequestParam("userCn") String userCn)
    {
        User k = PomEJB.getInstance().findKorisnik(userCn);
        return k;
    }
}

I noticed my Bootstrap 5 popovers are missing the arrow and I believe it’s caused by the parent element interfearing somehow.
The docs are kind enough to offer help by showing me how to use the container: ‘body’ option – on ONE item. I need to apply that to all at once. How would I do that?

I’m using codeKit3 to bundle everything. The import statement looks like this (working):

//  Bootstrap components
import '@popperjs/core/lib/index.js'
import bootstrap from 'bootstrap/dist/js/bootstrap.min.js'

This is the html I’m using:

<div class="card">
  <div class="card-header">
    <i class="fas fa-calendar-day"></i> 24-h
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-6">
        högsta temp
      </div>
      <div class="col-3">
        <span class="card-value" id="min-rh-24h">24</span><span class="card-value">°C</span>
      </div>
      <div class="col-3">
        <a href="#" data-bs-toggle="popover" data-bs-placement="top"
          title="Ytterligare information"
          data-bs-content="Some sample text right here"><i
            class="fas fa-info" id="maxCelsius24hInfo"></i></a>
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        lägsta temp
      </div>
      <div class="col-3">
        <span class="card-value" id="min-rh-24h">12</span><span class="card-value">°C</span>
      </div>
      <div class="col-3">
        <a href="#" data-bs-toggle="popover" data-bs-placement="top" data-container="body"
          title="Ytterligare information"
          data-bs-content="Some other sample data right here"><i
            class="fas fa-info" id="minCelsius24hInfo"></i></a>
      </div>
    </div>
  </div>
</div>

Code snippet from Bootstrap 5 docs:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
})

The only way the documentation shows how to implement the container option is like this:

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

I need to use the container: 'body' option in the first example (the one with map()). How would I do that?

Thank you!

I know this has been asked many times, but I can’t find an answer that works.

I’m making a site (https://tallerthanshort.github.io/bottom.gg) and it won’t load any of the js (some reactjs) or css.

All the files can be found on the Github repo (https://github.com/TallerThanShort/bottom.gg) and all of it works when running the site locally (either by simply opening the html file or running a local server), but the GitHub pages site simply returns a 404 for every file.

I have changed all of my script tags so they have an opening and closing tag, and also removed the initial / from /_next/ so that Github pages doesn’t look at the wrong repo, but it still hasn’t fixed my issue.

Any help would be largely appreciated.

I’m currently building a webapp with Python’s django framework. There is one task that I do not really know how to handle.

Let’s say my page displays different questions of users (like tweets on twitter). Now, I want to provide users with the ability to write answers to the different questions displayed. When the users clicks on an answer button below a particular question, a form is displayed below the question with a textarea that can be submitted. When the filled out form with text is submitted and sent to the backend, I need to create a database relationship between the newly created answer and the question. In order to find the corresponding question in the DB its ID is necessary (primary key).

Here is my problem. I do not know where to get the ID from in a safe manner.

An easy way would be to put the ID into the html part of the question and then use it with javascript, or to store the IDs as javascript variables. However, as the DOM and the values of javascript variables can be modified by users on the frontend, this does not appear secure to me. If a user changes the ID value in the DOM for a specific question, fills out the form, and submits it to the backend, the sent ID is not the correct one for this particular question. My DB query using this (maliciously changed) ID retrieves a database record of the questions table that is not the question that the user provides an answer for.
For instance, let’s say the malicious user provides an answer to question #3, but changes the ID in the DOM, that would be used as part of the form, to #10. The database of questions would then be queried for the primary key 10 instead of 3. Therefore, the created database relationship would then be between question #10 and the posted answer which is not correct.

How is it thus possible to use database IDs in this case without them being subject to any malicious change?

Any help/tips are very welcome. Thanks a lot.

Bests

I’m trying to return some data using a firebase function for security reasons, within said data is a firebase storage file location. I want to replace the location with the download URL so the front end can display the image. Here is a mock-up of my code

// The Cloud Functions for Firebase SDK to create Cloud Functions and set
// up triggers.
const functions = require("firebase-functions");

// The Firebase Admin SDK to access Firestore.
const firebase = require("firebase-admin");

firebase.initializeApp();


exports.getDetails = functions.https.onRequest(async (request, response) => {
    
    //...loads data 

    let details = [];
    await dataArray.forEach(async (doc) => {

        let data = doc.data();

        if(doc.data().type=="Photo Select" || doc.data().type=="Document Select"){

             try{
            url =  await firebase
            .storage()
            .ref()
            .child(doc.data().value)
            .getDownloadURL();
            } catch(e){
                console.log(e)
            }

            data["value"]=url? url : "";

         

        }  
        details.push(data)
    
    })
    response.json({ 
            details: details
        })
})

but in the error logs on running I’m getting
“TypeError: firebase.storage(…).ref is not a function”

Any help would be appreciated
😀

an upstream system is making a get req to out system with utf-8 encoded even the ? is encoded.

the sample url is –>
http://localhost:3000/hello%3FfirstName%3DPaperTest%26lastName%3DAddressMerge%26typeOfIdProof%3DEmirates+ID%26idProofNumber%3D123–2%26nationality%3DARE%26sourceSystem%3DDealer+App%26dateOfBirth%3D2001-09-29%26userId%3D111%26transactionId%3D9162655831313265133%26segmentName%3DN%2FA%26productType%3DTshirt

my express app could not get the query string from the above so i created a middle ware

    const app = express()
    const qrystr = require("querystring")
    
    app.set("query string","extended")
    app.use((req,res,next)=>{
        let val = req.query.
        console.log(req.query)
        let qry = qrystr.parse(val)
        req.query = qry
        next()
    })
   app.get("/hello*",(req,res)=>{
    let val = {...req['query']}
   // console.log(val)
    console.log(req.params)
    res.send("OK")
})

but in req.query i am getting
{
‘0’: ‘?firstName=PaperTest&lastName=AddressMerge&typeOfIdProof=Emirates+ID&idProofNumber=123-123-1111-2&nationality=ARE&sourceSystem=Dealer+App&dateOfBirth=2001-09-29&userId=111&transactionId=9162655831313265133&segmentName=N/A&productType=tshirt’
}

could any one could suggest how to parse the above url / req properly so i could get the value like we used to get in req.query

I have the following string generated by an external software:

{'certificate_findings':
[('good', 'Application is signed with a code signing certificate'),
('warning', 'Application is signed with v1 signature scheme, making it vulnerable to Janus vulnerability on Android <7.0'),
('warning', 'Application is signed with SHA1withRSA. SHA1 hash algorithm is known to have collision issues. The manifest file indicates SHA256withRSA is in use.')]}

I’d like to read it as a JSON in NodeJS. I see two approaches:

First, find a library that can parse this string format into JSON, which I have not found.

Second, transform the string into something like:

{'certificate_findings':
[{'good': 'Application is signed with a code signing certificate'},
{'warning': 'Application is signed with v1 signature scheme, making it vulnerable to Janus vulnerability on Android <7.0'},
{'warning': 'Application is signed with SHA1withRSA. SHA1 hash algorithm is known to have collision issues. The manifest file indicates SHA256withRSA is in use.'}]}

How can i do it?

I’m very confused about A vs B vs C

A : set function in Object
B : setter in Object
C : setter in Classes

What is different A vs B between set function and setter?
What is different B vs C about setter?

I am building a lottery web application where customers can select their own numbers or get 4 random numbers. How can I carry these numbers that the customer inputs/randomly generates into my shopping cart / paypal button?
Thanks for any help.