Category: javascript

I use PrimeNG table and also have a selection of columns.

As it is here in an example.

https://primeng.org/table#column-toggle

Now I need to get an event if the colums where changed (afterwards) – for reasons.

How can I get that event?

im trying to link my page’s button with dialog that i have made before. it is a simple code, i have watched many tutorials and none of them solved mine

here’s my code

page.razor

@page "/datapegawai"
@inject IJSRuntime js
@attribute [StreamRendering]

<PageTitle>Data Pegawai</PageTitle>

<h1>Data Pegawai</h1>


<div class ="container">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="header">
                    <button @onclick="ShowDialog" class="btn btn-primary float-end">
                        Add Product
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<DialogComponent>

</DialogComponent>

@code {
    private async Task ShowDialog()
    {
        await js.InvokeVoidAsync("myDialogFunction");
    }
}

dialog.js

window.myDialogFunction = function () {
    document.getElementById('my-dialog').showModal();
}

DialogComponent.razor

<div>

    <dialog id="my-dialog" @onclose="OnClose" @oncancel="OnCancel">
        <p>Hi Di sana!</p>
        <form method="dialog">
            <button>TUTUP!</button>
            <button>BATAL!</button>

        </form>
    </dialog>
</div>

@code {
    string message;
    void OnClose(EventArgs e) => message += "onclose,";
    void OnCancel(EventArgs e) => message += "oncancel,";
}

i have tried to add button to the DialogComponent.razor just to make sure the js worked. It did work, but i still have no idea how to connect my page.razor’s button with the js. thank you

I am trying to style and color the User Colours for a User Journey Diagram in mermaidjs.

Unfortunately, I have not been able to find the user color properties.

Is it possible to change the user color?

I have tried changing all theme colors. These change their respective area colors. None apply to user colors. Including fillType0 to fillType9 e.g.:

%%{
  init: {
    'theme': 'dark',
    'fillType0': '#f00',  
    'themeVariables': {
      'fillType1': '#f00',  
      'lineColor': '#f00',
      'primaryColor': '#f00',
      'primaryTextColor': '#fff',
      'primaryBorderColor': '#0f0',
      'secondaryColor': '#f00',
      'tertiaryColor': '#f00'
    }
  }
}%%

journey
    title User journey
    section Sect1
      Do something: 1: Me, Cat
    section Sect2
      Do other thing: 5: Me, Cat

The colors for ‘Me‘ and ‘Cat‘ remain pegged to the theme. They do not change with any property that I can find.

Any help with mermaidjs syntax would be greatly appreciated!

So I have a couple of images of logos in a rasterized format (png, no vectors).
I want to convert them to black and white with no grayscale. i.e. binary either a full black (0,0,0) or a full white (255, 255, 255).

The issue is that I do not want to just pick a cutoff threshold and set everything above to white and everything below to black.

Instead I want it to alternate colors.

For example with the lego logo I want to convert it from this

to this

But I am having a hard time finding any form of algorithm that does the job.
Is there any suitable algorithm for this?

bonus points if there is a decent implementation of it on npm

HTML display cover

div id="my-widget"

<button id="toggle-button">Toggle Widget</button>
<div class="widget-content">

`

!--https://ceosquotes.blogspot.com/ [-](https://ceosquotes.blogspot.com/)-

My widget display: none
`

</div>v.comment-form>p,#comments.embed[data-num-comments="0"] p.comment-footer{
display:none
</div 

If this the right Code to hide widgets cover

I have one component called Tour.js which is overall rendering tour of the application.

Now I have 3 default buttons which are Next, Skip and Back (If I am not on first popup tour). I want to add one button in footer with title Don’t show again. By clicking on that I want to call function.

<>
  <Joyride
    callback={this.handleJoyrideCallback}
    continuous={true}
    run={run}
    disableOverlayClose={true}
    showProgress={true}
    showSkipButton={true}
    scrollOffset={50}
    steps={[...listItemstemp, ...listItems]}
    styles={{
      options: {
        zIndex: 9999
      }
    }}
  />
</>

and my list items are

let listItemstemp = [
  {
    content: <div className="gcontrol-ture">
      <img src={one} />
      <div className="gcontrol-ture-inner">
        <h1>
          {t("t_tour.t_common.t_welcome.t_heading")}
          <strong>{t("t_tour.t_common.t_welcome.t_heading1")}</strong>
        </h1>
        <p>{t("t_tour.t_common.t_welcome.t_content")} </p>
        <p>{t("t_tour.t_common.t_welcome.t_content1")} </p>
      </div>
    </div>,
    locale: {
      skip: <strong aria-label="skip">{t("t_tour.t_common.t_skip")}</strong>,
      next: <strong aria-label="skip">{t("t_tour.t_common.t_next")}</strong>,
      back: <strong aria-label="skip">{t("t_tour.t_common.t_back")}</strong>,
    },
    placement: "center",
    target: "body",
    disableBeacon: true,
    styles: {
      options: {
        width: 650,
        padding: "0px"
      }
    }
  }
]

Need to know how i would implement the given creative https://www.nexd.com/demos/cartier-panthere-jewelry-watches/

in creative what do you mean by light box

ChatGPT said:

ChatGPT

In a creative context, a lightbox typically refers to one of the following:

1. Lightbox in Photography and Visual Arts:

A physical lightbox is a flat, translucent surface that is uniformly backlit by a light source. It’s used by photographers, artists, and designers to view slides, negatives, or other transparent images. The light shines through the images, making them easier to see and work with.

2. Lightbox in Web Design and Digital Media:

In web design, a lightbox is a type of overlay that opens on top of the current page to display images, videos, or other content. When a user clicks on a thumbnail or a link, the lightbox effect is triggered, darkening the background content and focusing the user’s attention on the media displayed within the lightbox.

Common Features:

Modal Window: The content is displayed in a modal window that floats above the rest of the page. Usage in Advertising:

In digital advertising, a lightbox ad might be an interactive ad format where an ad expands and displays additional content, such as a video or image gallery, when the user interacts with it. This kind of ad usually grabs attention by temporarily taking over the screen space, similar to how a traditional lightbox works in web design.

Dimmed Background: The rest of the page is often dimmed or blurred to highlight the lightbox content.

Navigation Controls: Lightboxes for galleries often include navigation controls, like arrows, to move between images.

Close Button: A button or option to close the lightbox and return to the main content.

i am using knex db with mysql in wappler low code software and i have a column in my table and column name is is_active and it have bit datatype ig it means boolean right ?

so when i use select query to return data

it should return data like

is_active : 1 or 0

or may be

is_active : true and false

but it return data like

 "is_active":  {
     "type": "Buffer",
      "data": [ 1 ]
   },

why ?

API response:

export const getCourses = (req, res) => {
  const q = `SELECT c.*, u.id AS teacherId FROM courses AS c JOIN users AS u ON (u.id = c.teacherId)`;

  db.query(q, (err, data) => {
    if (err) return res.status(500).json(err);
    return res.status(200).json(data);
  });
};

Axios request function:

export const makeRequest = axios.create({
  baseURL: "http://localhost:8800/api/",
  withCredentials: true,
  headers: [{ "Access-Control-Allow-Origin": origin, "access-control-allow-credentials": true }],
  method: "GET",
  url: "requisitions",
});

Front-end request (useQuery):

const { isLoading, error, data } = useQuery({
  queryKey: ["courses"],
  queryFn: () => makeRequest
    .get("/courses")
    .then((res) => {
      return res.data;
    }),
});

The error I am getting: GET http://localhost:8800/api/courses 404 (Not Found)

I tried to POST using Insomnia and I got the response. But here I am getting the error.

How can I solve this error?

A simple FastAPI (0.113.0) serves request from front end React client on Ubuntu 24 server. There is a POST request /api/predictvgg from the react client to upload image and FastAPI server throws

INFO: 127.0.0.1:51647 - "POST /api/predictvgg HTTP/1.1" 405 Method Not Allowed

The React client upload an png image file to FastAPI server. Here is the React client:

const handleSubmit = async (event) => {
  event.preventDefault();
  setShowTransferSpinner(true);
  let metadata = {
    painter_id: 0, //selectedPainter.id,
    binary_flag: 1,
  };
  const formData = new FormData();
  formData.append("image", selectedImage); // Append the file
  formData.append("metadata", JSON.stringify(metadata)); // Append the metadata
  try {
    const response = await fetch(`http://localhost:8000/api/predictvgg`, {
      method: "POST",
      body: formData,
    }); //<<== here is a post request.

    if (response.ok) {
      const result = await response.json();
      console.log("Prediction response:", result.predictions);
    } else {
      console.error("Error in file upload:", response.statusText);
    }

    setShowTransferSpinner(false);
  } catch (err) {
    console.log("Error in submit", err);
    setShowTransferSpinner(false);
  }
};

There is POST method on FastAPI server is:

#cors for react client request from port 3000
origins = [
    "http://localhost:3000"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"]
)

@app.post('/api/predictvgg')
async def predict(image: UploadFile = File(...), metadata: str = Form(...)):  
    # Access the uploaded image
    image_data = await image.read()
  ...

What caused the error of 405 Method Not Allowed on FastAPI server?

I am using JS for this project. I had given api key and url and then fetching news of India and US by using addeventlistener. Then I am using async function to get the query; I am using cloud cone (template) to represent the news. To reload the page we use onclick reload function.

Nothing just reloading to get new news by onclick reloading but by using this I do not get the today’s news or latest time news.

I am using errorElement prop in the createBrowserRouter function from react-router-dom. I have only one errorElement in root – FallBackError component.

When I get an error in one of the child routes I get an error page from FallBackError component.

My problem:
When an error occurs, I get an error page. When I try to go to the previous page, the URL changes to the previous page, but I still have an error page, even though thats not where the error occurred and I shouldn’t see an error page.

How to fix this, so that I can go to the previous page and not get an error page anymore without having to refresh the page?

import { createBrowserRouter } from 'react-router-dom';
import { wrapCreateBrowserRouter } from '@sentry/react';

export default function getRouter(user) {
  const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createBrowserRouter);
  const router = sentryCreateBrowserRouter([
    {
      path: '/',
      element: <AppLayout />,
      errorElement: <FallBackError />,
      children: [
        { index: true, element: <Home /> },
        ...

import { useRouteError } from 'react-router-dom';

const FallBackError = () => {
  const error = useRouteError();

  if (error.message === 'ERR_NOT_FOUND') return <ErrorPage404 />;

  return <DefaultErrorPage />;
};

export default FallBackError;

Below code cause this issue

 return iconLists.reduce((list, name) => {
    const pL = list;
    pL[name] = require(`./svg/${name}.svg`)
    return pL 
 }, {})
}

tried different plugins no luck.

vite.config.js

import commonjs from '@rollup/plugin-commonjs'
// import vitePluginRequire from 'vite-plugin-commonjs';
export default defineConfig({
 plugins: [
   react(),
   commonjs(),
 ]
})

Thanks in advance.

Currently I have a project in laravel but my programmer partner has disappeared and he is the one who is in charge of the heavy work, because I am less experienced.

I have a problem with a view, I have several tables:

1-Accounts

2-Users

3-Services

4-Subscriptions

5-Profiles

I have a view that generates subscriptions, which shows me through a select the services available in the system, then the accounts associated to the service and the User_id, then I can see the profiles that are associated to the accounts and that are available (that is to say that they have not been used), to be able to make a subscription of 1 Service in an account X, and a profile X of this account.

The situation I have is that I need that as well as it lists ONLY the profiles that are empty; then it lists only the accounts that have empty or available profiles. Well, when I choose an account that does not have available profiles, I have to select one by one the emails to see which one has available profiles.

This is the view of a new subscription
enter image description here

Services are listed
enter image description here

The accounts belonging to that service are displayed
enter image description here

Profiles available for the sample account [email protected]
enter image description here

For the case of the account [email protected] (no profiles in your name are available and therefore the profile list is empty)
enter image description here

What I need is to avoid the hassle of going account by account to see if it has free profiles or not. Inside my SubscriptionController I have these functions that go to this issue in question:

public function getAccounts($service_id){
    $data = [];
    $attr = [
        'table'=>'accounts',
        'columns'=>[
            'id',
            'email'
        ],
        'compare'=>'service_id',
        'compare_value'=>$service_id
    ];
    $response = Helper::getDataSelect($attr,auth()->user()->id);
    if($response){
        $data = $response;
    }

    return response()->json(['data'=>$data]);
}

public function getProfiles($account_id){
    $data = [];
    $attr = [
        'table'=>'profiles',
        'columns'=>[
            'id',
            'name',
            'pin'
        ],
        'compare'=>'account_id',
        'compare_value'=>$account_id
    ];
    $response = Helper::getDataSelect($attr);
    if($response){
        foreach($response as $res){
            $profile = Profile::find($res->id);
            if($profile->subscriptions->count() == 0){
                array_push($data, $res);
            }
        }
    }

    return response()->json(['data'=>$data]);
}

Inside the Helper I have this function

public static function getDataSelect($attr,$user_id=null){
        if($attr){
            if($user_id){
                $data = DB::table($attr['table'])->select($attr['columns'])->where($attr['compare'],$attr['compare_value'])->where('user_id',$user_id)->get();
            }else{
                $data = DB::table($attr['table'])->select($attr['columns'])->where($attr['compare'],$attr['compare_value'])->get();
            }

            return $data;
        }else{
            return null;
        }

    }

And finally in my view I have a script that has to do with the selects

@section('content')
    <div class="row" style="margin-top: 20px;">
        <div class="col-md-12">
            <div class="card card-success">
                <div class="card-header">
                    <h2><i class="fas fa-star"></i> {{ $title }}</h2>
                </div>
                @include('admin.partials.form', ['element'=>'subscriptions', 'type'=>$type, 'id'=>@$data->id])
                    <div class="card-body">
                        <div class="form-group">
                            <label for="">Servicio:</label>
                            <select name="service_id" class="form-control form-control-sm @error('service_id') is-invalid @enderror">
                                <option value="-1">Seleccione</option>
                                @foreach($services as $service)
                                    <option value="{{$service->id}}">{{$service->name}}</option>
                                @endforeach
                            </select>
                            @error('service_id')
                               <span class="error invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="">Cuenta:</label>
                            <select name="account_id"  class="form-control form-control-sm @error('account_id') is-invalid @enderror">
                                <option value="-1" >Seleccione</option>
                            </select>
                            @error('account_id')
                               <span class="error invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                         <div class="form-group">
                            <label for="">Perfil:</label>
                            <select name="profile_id" class="form-control form-control-sm @error('profile_id') is-invalid @enderror">
                                <option value="-1">Seleccione</option>
                            </select>
                            @error('profile_id')
                               <span class="error invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="">Cliente:</label>
                            <select name="customer_id" class="form-control form-control-sm @error('customer_id') is-invalid @enderror">
                                <option>Seleccione</option>
                                @foreach($customers as $customer)
                                    <option value="{{$customer->id}}">{{$customer->name}} ({{$customer->phone}})</option>
                                @endforeach
                            </select>
                            @error('customer_id')
                               <span class="error invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="">Monto:</label>
                            <input type="number" step="0.01" name="amount" class="form-control @error('amount') is-invalid @enderror" />
                            @error('amount')
                               <span class="error invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="">Instrumento:</label>
                            <select name="paymeth_id" class="form-control form-control-sm @error('paymeth_id') is-invalid @enderror">
                                <option value="-1">Seleccione</option>
                                @foreach($paymeths as $paymeth)
                                    <option value="{{$paymeth->id}}">{{$paymeth->instrumento}} ({{$paymeth->moneySymbol}})</option>
                                @endforeach
                            </select>
                            @error('paymeth_id')
                               <span class="error invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="">Referencia:</label>
                            <input type="number" step="0.01" name="referencia" class="form-control @error('referencia') is-invalid @enderror" />
                            @error('referencia')
                               <span class="error invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="">Vencimiento:</label>
                            <input type="date" name="date_to" class="form-control @error('date_to') is-invalid @enderror" />
                            @error('date_to')
                               <span class="error invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="card-footer">
                        @include('admin.partials.buttons',['cancelRoute'=>'subscriptions.index'])
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

@section('js')
    <script>
        $(document).ready(function(){
            $("select").select2();
            $("select[name='service_id']").change(function(){
                let id = $(this).val();
                if(id != '-1'){
                    $.get('/admin/get-accounts/'+id, function(response){
                        let data = response.data;
                        if(data.length > 0){
                            $("select[name='account_id']").html("<option value='-1'>Seleccione</option>");
                            $.each(data, function(v,e){
                                $("select[name='account_id']").append("<option value='"+e.id+"'>"+e.email+"</option>");
                            });
                        }
                    })
                }else{
                    $("select[name='account_id']").html("<option>Seleccione</option>");
                }
            });

            $("select[name='account_id']").change(function(){
                let id = $(this).val();
                if(id != '-1'){
                    $.get('/admin/get-profiles/'+id, function(response){
                        let data = response.data;
                        if(data.length > 0){
                            $("select[name='profile_id']").html("<option value='-1'>Seleccione</option>");
                            $.each(data, function(v,e){
                                $("select[name='profile_id']").append("<option value='"+e.id+"'>"+e.name+" ("+e.pin+")</option>");
                            });
                        }
                    })
                }else{
                    $("select[name='profile_id']").html("<option value='-1'>Seleccione</option>");
                }
            });
        });
    </script>
@stop

I have tried a couple of things but I have no idea how to first collect the accounts that have those free profiles.

I created this simple cursor for fun, it’s a circle div that follows the mouse with some bounciness (spring and damping). I also wanted it to stretch and squeeze based on the velocity of the mouse so I added that as well, and both works. Now I also added rotation based on the velocity direction of the mouse, now that works too (individually). however when I put them all together it doesn’t work as expected, for example:

if I put the final transform like so : circle.style.transform = ${translateElement} ${scaleElement} ${rotateElement};
everything technically works, but the stretch and squeeze is applied on the same axis after the rotation which means it’s always squeezing from top to bottom (visually) and stretching from right to left (again visually). So it doesn’t look like it’s being stretched towards the mouse, which was the desired effect I was going for

now if I put the transform like this : circle.style.transform = ${translateElement} ${rotateElement} ${scaleElement};

the circle div does not move or scale at all (basically the code is not working without console error), Can anyone help me figure out why?

const circle = document.querySelector('.circle');

const mousePos = { x: 0, y: 0 };
const prevMousePos = { x: 0, y: 0 };
let mouseSpeed = 0;

const circlePos = { x: 0, y: 0 };
const circleVelocity = { x: 0, y: 0 };
const spring = 0.020;
const damping = 0.845;

const maxSqueeze = 0.5;
const maxStretch = 1.5;
const maxMouseSpeed = 1.1;

let lowSpeedStartTime = 0;
let lowSpeedDuration = 0;
const lowSpeedThreshold = 0.5; // 0.5 seconds




document.addEventListener('mousemove', (e) => {
    const currentMousePos = { x: e.clientX, y: e.clientY };
    const dx = currentMousePos.x - prevMousePos.x;
    const dy = currentMousePos.y - prevMousePos.y;

    // Calculate the speed as the magnitude of the velocity vector
    mouseSpeed = Math.sqrt(dx * dx + dy * dy);

    // Update previous mouse position
    prevMousePos.x = currentMousePos.x;
    prevMousePos.y = currentMousePos.y;

    // Update the current mouse position
    mousePos.x = currentMousePos.x;
    mousePos.y = currentMousePos.y;
});

function animate() {
    const ax = (mousePos.x - circlePos.x) * spring;
    const ay = (mousePos.y - circlePos.y) * spring;

    circleVelocity.x += ax;
    circleVelocity.y += ay;
    circleVelocity.x *= damping;
    circleVelocity.y *= damping;

    circlePos.x += circleVelocity.x;
    circlePos.y += circleVelocity.y;

    // calculate rotation angle
    const angle = Math.atan2(circleVelocity.y, circleVelocity.x) * 180 / Math.PI;

    // Calculate the normalized mouse speed
    const normalizedSpeed = Math.min(mouseSpeed, maxMouseSpeed) / maxMouseSpeed;
    
    // Calculate stretch and squeeze factors
    const scaleFactor = 1 + (maxStretch - 1) * normalizedSpeed;
    const squeezeFactor = 1 - (1 - maxSqueeze) * normalizedSpeed;

    if (mouseSpeed <= 1) {
        if (lowSpeedStartTime === 0) {
            lowSpeedStartTime = performance.now();
        }
        lowSpeedDuration = (performance.now() - lowSpeedStartTime) / 1000; // in seconds
    } else {
        lowSpeedStartTime = 0;
        lowSpeedDuration = 0;
    }

    // Apply squeeze/stretch effect
    let scaleX = scaleFactor; // Stretch
    let scaleY = squeezeFactor; // Squeeze
    if (lowSpeedDuration > lowSpeedThreshold) {
        scaleX = 1.0; // Squeeze
        scaleY = 1.0; // Stretch
    }

    const translateElement = `translate(${circlePos.x}px, ${circlePos.y}px)`;
    const rotateElement = `rotate(${angle}deg`;
    const scaleElement = `scale(${scaleX}, ${scaleY})`;

    circle.style.transform = `${translateElement} ${rotateElement} ${scaleElement}`;

    requestAnimationFrame(animate);
}

animate();



document.addEventListener('mouseleave', () => {
    circle.style.opacity = '0'; // Make cursor disappear
});

document.addEventListener('mouseenter', () => {
    circle.style.opacity = '1'; // Make cursor reappear when mouse enters the document again
});

I tried changing the shape of the div to check if the rotation is actually being applied on the first order of transforms and it does work, so there is something wrong with the 2nd order of transform which is not working.

Note: the 2nd order of transform is valid in CSS, I have used it before and it works, it just does not work on this particular scenario and I don’t understand why.