Category: javascript

I’m in this situation

I try to load my datatables with checkbox selected

I have 2 kind of urls: rows unselected and rows/checkbox selected

http://localhost:5000/?page=1&length=10
http://localhost:5000/?page=1&length=25&badge=ebooks

and

http://localhost:5000/?page=1&length=25&badge=ebooks&id=Il+Piccolo+%2314+settembre+2023

for example a checkbox is selected when you can see &id= inside url

But when I load table with &id=... table doesn’t return checkbox/rows state selection, it change url into something this

http://localhost:5000/?page=1&length=10&badge=ebooks

PROBLEM: The main problem seems to be related to how the URL is manipulated and how selected rows are handled when performing a search or changing URL parameters.
I am using the state of the DataTable to save the IDs of the selected rows. However, when the page is reloaded with a URL that contains the row IDs, the selected rows are not correctly restored
OK, my relevant code is this

    initComplete: function() {
        var api = this.api();

        // Search bar management
        api.columns().every(function() {
            var that = this;
            $('input', this.footer()).on('input', function() {
                if (that.search() !== this.value) {
                    that.search(this.value).draw();
                    if (this.value != '') {
                        history.pushState(null, '', '/?search=' + encodeURIComponent(this.value));
                    } else {
                        history.pushState(null, '', '/');
                    }
                }
            });
        });

        // Highlight the selected rows
        api.rows('.selected-row').nodes().to$().addClass('selected-row');

        // Select rows based on URL parameters
        var urlParams = new URLSearchParams(window.location.search);
        var selectedRows = urlParams.getAll('id');
        selectedRows.forEach(rowId => {
            // Find the checkbox corresponding to the ID and simulate a click on it
            var checkbox = $('input[name="id[]"][data-id="' + rowId + '"]');
            checkbox.prop('checked', true).trigger('change');
            checkbox.closest('tr').addClass('selected-row');
        });

        // If there are search parameters, apply them to the table
        var searchParam = urlParams.get('search');
        if (searchParam) {
            api.search(searchParam).draw();
        }

        // Block to keep ID in URL
        var currentUrl = new URL(window.location.href);
        var idParam = urlParams.get('id');
        if (idParam) {
            currentUrl.searchParams.set('id', idParam);
        }
        history.replaceState(null, '', currentUrl);
    }

and this

    columnDefs: [
        {
            targets: 0,
            visible: true,
            searchable: false,
            orderable: false,
            render: function (data, type, row, meta) {
                // Add the data-id attribute to the checkbox with the row ID value
                return '<input type="checkbox" name="id[]" data-id="' + row.id + '" value="' + $('<div/>').text(data).html() + '">';
            }
        }
    ],

The solution I thought of was to simulate clicks, but maybe is not the best way

HERE is the complete javascript code that I use and here is python relevant part

class User(db.Model):
    id = db.Column(db.String(80), primary_key=True)
    badge = db.Column(db.String(80))
    extra = db.Column(db.String(80))
    username = db.Column(db.String(80))  # Added 'username' column

    def to_dict(self, selected_rows):
        return {
            'id': self.id,
            'badge': self.badge,
            'extra': self.extra,
            'username': self.username,
            'selected': str(self.id) in selected_rows
        }

and search function

@app.route('/search', methods=['POST'])
def search():
    badge = request.form.get('badge') or request.args.get('badge')
    start = int(request.form.get('start', 0))
    length = int(request.form.get('length', 10))
    searchTerm = request.form.get('search[value]')
    
    # Access selectedRows from the prompt
    selected_rows = request.form.getlist('selectedRows[]')

    query = User.query

    if badge:
        query = query.filter(User.badge == badge)

    if searchTerm:
        query = query.filter((User.id.ilike(f"%{searchTerm}%")) | 
                             (User.badge.ilike(f"%{searchTerm}%")) | 
                             (User.extra.ilike(f"%{searchTerm}%")) |
                             (User.username.ilike(f"%{searchTerm}%")))

    data = query.offset(start).limit(length).all()

    # Pass selectedRows to the to_dict function
    return jsonify({
        'data': [user.to_dict(selected_rows) for user in data],
        'recordsTotal': User.query.count(),
        'recordsFiltered': query.count(),
    })

Attempt to fix the problem: to avoid simulating the click I tried to modify the code also in this way so that the setting of the row and checkbox status occurs directly without having to simulate the change event. But nothing

   selectedRows.forEach(rowId => {
        // Find the checkbox corresponding to the ID
        var checkbox = $('input[name="id[]"][data-id="' + rowId + '"]');
        
        // Set the 'checked' property of the checkbox directly
        checkbox.prop('checked', true);
    
        // Add the 'selected-row' class to the closest row
        checkbox.closest('tr').addClass('selected-row');
    });
    
    // Trigger the 'change' event for the checkboxes
    $('input[name="id[]"]').trigger('change');

I would like to write a script that detects whether a given div is already open and if so, closes the previous one and opens a new one. The class name when the div is open is .collapse in, and the class name of the div that shows is

(function () {
  $('.collapse in').on ('click', function() {
    $(".accordianNav").each(function(){
      $(this).find(".accordianNav").hide();
    });
    });
})();

I tryed to write something like that but its not working.
I am new and need a easy tip or full solution.

I am currently working a small Google Apps Script that will get Data from a from and proceed to paste some of this data in a table where it finds matching ID / invoice number.

However, when these two for statement are following each other, the script takes ages to executed because it proceeds to add the data in the specified columns, great but also, from the first empty row up until the very end of the sheets it copies that same data indefinitely.

  for (var i = 0; i < caData.length; i++) {
    if (caData[i][3] == ID) {
      if (tax == "VAT") {
        feuilleCA.getRange(i + 1, 14).setValue(amount);
        feuilleCA.getRange(i + 1, 15).setValue(mode);
        feuilleCA.getRange(i + 1, 16).setValue(now);
      } else {
        feuilleCA.getRange(i + 1, 12).setValue(amount);
        feuilleCA.getRange(i + 1, 13).setValue(mode);
        feuilleCA.getRange(i + 1, 16).setValue(now);
      }
    }
  }

  for (var i = 0; i < caData.length; i++) {
    if (caData[i][1] == invoice) {
      if (tax == "VAT") {
        feuilleCA.getRange(i + 1, 14).setValue(amount);
        feuilleCA.getRange(i + 1, 15).setValue(mode);
        feuilleCA.getRange(i + 1, 16).setValue(now);
      } else {
        feuilleCA.getRange(i + 1, 12).setValue(amount);
        feuilleCA.getRange(i + 1, 13).setValue(mode);
        feuilleCA.getRange(i + 1, 16).setValue(now);
      }
    }
  }

To ensure that I did not make any mistake in the code previously provided, I proceeded to make tests with

The first for statement (ID) and it worked perfectly, no issue

The second for statement (invoice) and it worked perfectly, no issue.

However when combined, it seems to create some sort of infinite loop.

As you will tell I am not an expert, but I am already very happy with what I could accomplish, so please bare with me. From what I understand there is no counter indication as to using two for statements followed by each other. What would your suggestions be?

in my jsp file i have one youtube video , it has to be fullscreen mode

i tried in the above code but doesn’t work out, how can i make when the video play it must be in full screen , now with the above code video is playing end of the page not the can any one help me out this?

<script>    
    let player;
    function onYouTubeIframeAPIReady() {
        console.log('onYouTubeIframeAPIReady');
        player = new YT.Player('player', {
            videoId : 'actualId', // Replace with your video ID
            playerVars : {
                'autoplay' : 1,
                'controls' : 0,
                'rel' : 0
            },
            events : {
                'onReady' : onPlayerReady,
                'onStateChange' : onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
                document.fullscreen;
    }

</script>
<script src="https://www.youtube.com/iframe_api"></script>
   <div class="ifcontainer">
    <div id="player"/>
   </div>

I have the code below which works fine and display date data in the following format eg.
Thu Dec 28 2023 00:00:00 GMT+0100 (West Africa Standard Time) when alerted and its working fine

$(document).ready(async function(){

function rec(el, data, settings){

var obj = data;
console.log(obj);
}

var events = [
  {'Date': new Date(2023, 10, 28), 'Title': 'title 1'},
  {'Date': new Date(2023, 11, 28), 'Title': 'title 2'},
  {'Date': new Date(2022, 12, 27), 'Title': 'title 3'},
];
// alert date sample
alert(events[0].Date);

var settings = {};
var element = document.getElementById('caleandar');
rec(element, events, settings);

});

Here is my issue:

Now I need to display the record by making fetch API call to php backend as per code below
but when i run the code and alert eg alert(events[0].Date); am getting something like new Date(2023, 10, 28) instead of Thu Dec 28 2023 00:00:00 GMT+0100 (West Africa Standard Time)

PleaseI need all my Date in the following format eg. Thu Dec 28 2023 00:00:00 GMT+0100 (West Africa Standard Time)

index.html

$(document).ready(async function(){

function rec(el, data, settings){
var obj = data;
console.log(obj);
}

const response = await fetch('http://localhost/record.php', {
    method: 'GET'
});

var events = await response.json();
alert(events[0].Date);

var settings = {};
var element = document.getElementById('caleandar');
rec(element, events, settings);

});

here is record.php

/*
$return_arr = array();

$query = "SELECT * FROM usera";

$result = mysqli_query($con,$query);

while($row = mysqli_fetch_array($result)){
    $Date = $row['Date'];
    $title = $row['title'];
    $link = $row['link'];

    $return_arr[] = array(
                    "Date" => $Date,
                    "Title" => $title,
                    "Link" => $link);
}

// Encoding array in JSON format
 json_encode($return_arr);
*/

    $arr = array(
        array(
            "Date" => "new Date(2023, 10, 28)",
            "Title" => "title 1"
        ),
        array(
            "Date" =>  "new Date(2023, 11, 28)",
            "Title" => "title 2"
        ),
        array(
               "Date" =>  "new Date(2023, 11, 28)",
            "Title" => "title 3"
        )
    );
    
    echo json_encode($arr);

I am trying to create a function in JavaScript this simply returns a true|false for the existence of a file on a web server using fetch().

I have the following code:

let tf = checkFile("index.html");
console.log("typeof(tf) = " + typeof(tf));

async function checkFile(file) {
    try {
        let response = await fetch(file);
        if (!response.ok) {
            throw new Error("Network response was not OK");
            
        } else {
            return true;
        }
    }
    catch {
        return false;
    }
}

When I run it, it spits this out to the browser console:

"typeof(tf) = object"

Why doesn’t it just return true or false?

I am trying to build a script that will output a list of URLs.

It will takes these URLs from the DOM and compile them into a list.

The DOM does not contain the final URLs – it contains a URL which then directs to the final URL (for example the DOM will have URLs like this:
1. https://stackoverflow.com/get-questions/1234 2. https://stackoverflow.com/get-questions/5678
These URLs then return a header location with the final URL – in the example:
1. https://stackoverflow.com/questions/1234 2. https://stackoverflow.com/questions/5678

In the actual case it cannot be parsed.)

I tried using a fetch request to the URL found in the DOM – I used the get method – and it just gor forwarded to the new URL. This meant that I cannot get the ‘location’ header.

The response url key is an empty string.

const res = await fetch('https://stackoverflow.com/get-questions/1234', {
      headers: {
        accept:
          'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7',
        'accept-language': 'en-US,en;q=0.9',
        'cache-control': 'no-cache',
        pragma: 'no-cache',
        'sec-ch-ua':
          '"Not_A Brand";v="8", "Chromium";v="120", "Google Chrome";v="120"',
        'sec-ch-ua-mobile': '?0',
        'sec-ch-ua-platform': '"Windows"',
        'sec-fetch-mode': 'navigate',
        'sec-fetch-site': 'same-origin',
        'upgrade-insecure-requests': '1',
        'Access-Control-Expose-Headers': 'Location'
      },
      referrer: 'https://stackoverflow.com/',
      referrerPolicy: 'strict-origin-when-cross-origin',
      body: null,
      method: 'get',
      mode: 'no-cors',
      credentials: 'include'
    });

How would I get the actual final URL

I press the button on index.ejs (Maybe I’m wrong that I use ejs and Vue at the same time) and fetch is executed

<button id="bvrz" class="btn btn-primary" type="button" @click="ldpSyncBVRZ">BVRZ</button>

app.post('/api/sync/bvrz', (req, res) => {
  res.render('index', {
    ldpSyncBVRZ: runLdpSync(3),
  })
})

This script then executed, where ldapSync starts synchronization, and ldapStatus checks it once every 2 seconds (Various API commands)

const runLdpSync = async (item) => {
  const ldapSync = async () => {
    try {
      const response = await fetch(url, reqSyncOptions)
      const XMLdata = await response.text()
      const parser = new XMLParser()
      const text = parser.parse(XMLdata)
        return text
    } catch (error) {
      console.log('We have an error:', error)
    }
  }

  const ldapStatus = async () => {
    try {
      const response = await fetch(url, reqStatusOptions)
      const XMLdata = await response.text()
      const parser = new XMLParser()
      const text = parser.parse(XMLdata)
        if (text === 'Sync is performed successfully') {
          clearInterval(id)
        }
        return text
    } catch (error) {
      console.log('We have an error:', error)
    }
  }

  const id = ldpSync()

  function ldpSync() {
    ldapSync()
    const idInterval = setInterval(() => {
      ldapStatus()
    }, 2000)
    return idInterval
  }
}

export { runLdpSync }

The function returns such messages

Sync initiated successfully
Sync is currently under process
Sync is performed successfully

How can I dynamically sequentially display messages on the index.ejs under the button?

I have spent a lot of time watching videos and creating almost a library, similar to p5.js (I watch quite a lot of Dan Shiffman) and I’ve got lots of files for different things. I have an init.js, dom.js, drawing.js, and so on. Right now, whenever I make a new project, I link all of the files in the order I need them to load in the HTML file, but that takes up a lot of lines and it just looks clunky.

I want to know if there’s a way I can make one main file called ‘library.js’ and link all of the other files with the utility functions and constants and variables in, make sure they’re in order, and then just use one reference to the library file in my index.html. Is there any way to do this?

My goal is to detect collisions between specific elements with complex shapes, not just rectangles, as they move. I’ve explored basic collision techniques, but they don’t seem to be suitable for elements animated via CSS.

Here’s a simplified example of what I’m attempting:

<div class="animated-element"></div>
<div class="obstacle"></div>

<style>
  .animated-element {
    /* CSS Animation */
    /* ... */
  }
  .obstacle {
    /* CSS properties for obstacles */
    /* ... */
  }
</style>

What would be the best approach or library to achieve precise collision detection between these animated elements in JavaScript while considering the CSS animations in play? Are there any specific strategies or libraries optimized for handling collisions with CSS-animated elements?

Im making a toggle in my Eel app but for some reason it does not print Test to the terminal.

                <div class="container-afk">
                    <label class="toggle_box">
                        <input type="checkbox" id="checkbox">
                        <div class="circle"></div>
                        <h3 class="afk-text">AFK Reply</h3>
                    </label>
                </div>
``` Dont mind my trash naming lol





Javascript in my index.html file

    <script src="script.js"></script>
    <script>
        function AfkOn() {
            console.log('Checkbox clicked');
            var checkbox = document.getElementById('checkbox');
            if (checkbox.checked) {
                eel.AfkOn();
            }
        }
    </script>

Python

@eel.expose
def toggleAfk():
print(‘Test’)

there is no errors in the console of the app or in the terminal I cant find anything online about how to fix it. I have tried rewriting it and to no luck idk whats causing this.

I have this .js code. When I export the .webm video, it doesn’t show the progress bar in media players and if I convert it into .mp4 it breaks the video. Any idea why this might be happening?

What this does is take some input from the user, and then, on canvas draw the video, that should work normally, and I’ve no idea why this doesn’t work.

// Recording and Animation
let mediaRecorder;
let recordedChunks = [];

function startRecording() {
  const stream = canvas.captureStream(60); // 60 FPS, adjust as needed
  mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'video/webm; codecs="vp8, opus"',
  });

  mediaRecorder.ondataavailable = function (e) {
    if (e.data.size > 0) {
      recordedChunks.push(e.data);
    }
  };

  mediaRecorder.onstop = downloadRecordedVideo;
  mediaRecorder.start();
}

function stopRecording() {
  mediaRecorder.stop();
}

function downloadRecordedVideo() {
  const blob = new Blob(recordedChunks, { type: "video/webm" });
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";

  a.href = url;
  a.download = "MySTCInt.webm";
  a.click();

  URL.revokeObjectURL(url);
  document.body.removeChild(a);
}

// Canvas setup
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let framerate = 60;

// Image sources
const imageSources = {
  stc: "static/stc.png",
  template: "static/template.png",
};

// Load images
let stcImage = new Image();
stcImage.src = imageSources.stc;
let templateImage = new Image();
templateImage.src = imageSources.template;

let uploadedImage = null;

// Text configuration
const texts = [
  {
    text: "Main Title",
    size: "60px Arial",
    x: 100,
    y: 480,
    bold: true,
    opacity: 1.0,
  },
  {
    text: "Subtitle",
    size: "40px Arial",
    x: 100,
    y: 550,
    bold: false,
    opacity: 0.8,
  },
  {
    text: "Name",
    size: "40px Arial",
    x: 100,
    y: 660,
    bold: true,
    opacity: 1.0,
  },
  {
    text: "Action Group",
    size: "30px Arial",
    x: 100,
    y: 710,
    bold: false,
    opacity: 0.8,
  },
];

// Animation settings
const animationSettings = {
  fadeInDuration: 1,
  fadeOutDuration: 1,
  fadeInTextDuration: 1,
  initialDelay: 1500,
  fadeToBlackDelay: 2000,
  fadeFromBlackDelay: 3000,
  totalAnimationTime: 6000,
};

// Fade in image
function fadeInImage(image, duration, callback) {
  let alpha = 0;
  let step = 1 / (framerate * duration);

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.globalAlpha = alpha;
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    alpha += step;
    if (alpha < 1) {
      requestAnimationFrame(draw);
    } else {
      ctx.globalAlpha = 1;
      if (callback) callback();
    }
  }
  draw();
}

// Fade to black
function fadeToBlack(duration, callback) {
  let alpha = 0;
  let step = 1 / (framerate * duration);

  function draw() {
    ctx.fillStyle = `rgba(0, 0, 0, ${alpha})`;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    alpha += step;
    if (alpha < 1) {
      requestAnimationFrame(draw);
    } else {
      if (callback) callback();
    }
  }
  draw();
}

// Fade from black
function fadeFromBlack(duration) {
  let alpha = 1;
  let step = 1 / (framerate * duration);

  function draw() {
    ctx.globalAlpha = 1;
    ctx.drawImage(templateImage, 0, 0, canvas.width, canvas.height);
    ctx.globalAlpha = alpha;
    ctx.fillStyle = "rgba(0, 0, 0, " + alpha + ")";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    alpha -= step;
    if (alpha > 0) {
      requestAnimationFrame(draw);
    }
  }
  draw();
}

// Fade in text
function fadeInTextWithImage(texts, image, duration) {
  let alpha = 0;
  let step = 1 / (framerate * duration);

  function draw() {
    ctx.globalAlpha = 1;
    ctx.drawImage(templateImage, 0, 0, canvas.width, canvas.height);

    if (image) {
      ctx.globalAlpha = alpha;
      let imageX = canvas.width - image.width - 90;
      let imageY = (canvas.height - image.height) / 2;
      ctx.drawImage(image, imageX, imageY);
    }

    texts.forEach((text) => {
      ctx.font = text.bold ? `bold ${text.size}` : text.size;
      ctx.globalAlpha = text.opacity * alpha;
      ctx.fillStyle = "black";
      ctx.fillText(text.text, text.x, text.y);
    });

    alpha += step;
    if (alpha < 1) {
      requestAnimationFrame(draw);
    }
  }
  draw();
}

function startAnimation() {
  startRecording();
  fadeInImage(stcImage, animationSettings.fadeInDuration);
  setTimeout(
    () => fadeToBlack(animationSettings.fadeOutDuration),
    animationSettings.initialDelay
  );
  setTimeout(
    () => fadeFromBlack(animationSettings.fadeOutDuration),
    animationSettings.fadeToBlackDelay
  );
  setTimeout(
    () =>
      fadeInTextWithImage(
        texts,
        uploadedImage,
        animationSettings.fadeInTextDuration
      ),
    animationSettings.fadeFromBlackDelay
  );
  setTimeout(stopRecording, animationSettings.totalAnimationTime);
}

‎ ‎ ‎
I’ve tried changing the codecs, didn’t work.

i want react contact form and mongodb combining but i have a problem. I want to write a program that will save the data from the contact form to MongoDB using React.Please help me…
enter image description here

my (serviscagir.jsx) react code:

`const serviscagir = () => {
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        number: '',
        message: ''
    });

    const handleChange = (e) => {
        setFormData({ ...formData, [e.target.name]: e.target.value });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();

        try {
            const response = await fetch('/api/submit-form', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: Object.fromEntries(formData),
            });

            const result = await response.json();
            console.log(result.message);
        } catch (error) {
            console.error('Error:', error);
        }
    };
`

my (server.js) node.js code:

const express = require("express")
const mongoose = require("mongoose")
const bodyParser = require("body-parser")


const app = express();
app.use(express.json());
const PORT = process.env.PORT || 5174;

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

const formDataSchema = new mongoose.Schema({
  name: String,
  email: String,
  number: String,
  message: String
});

const FormData = mongoose.model('FormData', formDataSchema);

app.post('/api/submit-form', async (req, res) => {
  try {
    const { name, email, number, message } = req.body;

    const formData = new FormData({
      name,
      email,
      number,
      message
    });

    await formData.save();
    res.status(201).json({ message: 'Form data submitted successfully!' });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Internal Server Error' });
  }
});

I tried to do it with help from chatgpt but I couldn’t do it.

I’m really frustrated because I’ve been trying all day to make authentication work, and it’s just not happening.

Back-end tools:

Laravel 10 + Laravel Sanctum running on Docker with WSL2.

Front-end tools:

Node 20 + Nuxt 3 + @sidebase/nuxt-auth 0.6.3 for authentication.

I have configured /etc/hosts as follows to share the domain:

111.22.333.444 dockerapp.local

127.0.0.1 app.dockerapp.local

I have configured Laravel Sanctum as described in the documentation, and I have been following the steps to set up nuxt-auth on the front-end. However, when I log in with an existing user, something strange happens because the login returns 200 with this in the response:

{
    "token": {
        "bearer": "Bearer 6b64d1b48324d458f7ac4470d253605ef7c1ed15274408e5cac122e0e0939542"
    }
}

Things are going well, and then it makes a request to /api/user, and I get this error:

SymfonyComponentRoutingExceptionRouteNotFoundException: Route [login] not defined. in file /var/www/vendor/laravel/framework/src/Illuminate/Routing/UrlGenerator.php on line 479

These are my api.php routes:

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
        return $request->user();
    });

Route::post('/register', [RegisterController::class, 'register']);
Route::post('/login', [LoginController::class, 'login']);
Route::post('/logout', [LogoutController::class, 'logout']);

As it can be seen, that route exists, but I’ve noticed that if I give them a “name”, it seems to give me another error (it tells me that the LOGIN route makes a GET request and should be POST), so I think that might be where the issue lies.

This is my nuxt.config.ts file:

 // https://nuxt.com/docs/api/configuration/nuxt-config
    export default defineNuxtConfig({
      devServer: {
        host: "app.dockerapp.local",
        port: 3000
      },
      devtools: { enabled: true },
      modules: ['@nuxtjs/tailwindcss', '@sidebase/nuxt-auth'],
      auth: {
        provider: {
          type: 'local',
          pages: {
            login: '/login'
          },
          endpoints: {
            signIn: {path: 'api/login', method: 'post'},
            signOut: {path: 'api/logout', method: 'post'},
            getSession: { path: 'api/user', method: 'get'}
          },
          token: {
            signInResponseTokenPointer: '/token/bearer',
            type: 'Bearer',
            headerName: 'Authorization',
            maxAgeInSeconds: 60 * 15
          }
        },
        globalAppMiddleware: {
          isEnabled: true
        },
        baseURL: 'http://dockerapp.local:8000/',
      },
    })

And this is my .vue view for the login:

<template>
        <div>
        Status value: {{ status }}
            <div class="p-2">
            <form @submit.prevent="login()">
                <div class="card w-96 bg-neutral text-neutral-content">
                    <div class="card-body items-center text-center">
    
                        <h2 class="card-title bg-white p-5 text-black">Cookies!</h2>
    
                        <div class="my-3">
    
                            <input type="text" v-model="loginData.user" placeholder="User" class="input input-bordered w-full text-black max-w-xs" />
                            <input type="password" v-model="loginData.password" placeholder="User" class="mt-3 input input-bordered w-full text-black max-w-xs" />
    
    
                            <div class="card-actions justify-center mt-5">
                                    <button class="btn btn-primary">Accept</button>
                            </div>
                        </div>
    
                    </div>
                </div>
                </form>
            </div>
        </div>
    </template>
    
    <script setup>
    
    const {status, data , signIn, signOut} = useAuth()
    
    const loginData = ref({
        user: '[email protected]',
        password: 'contraseña123@'
    })
    
    definePageMeta({
      auth: {
        unauthenticatedOnly: true,
        navigateAuthenticatedTo: '/',
      }
    })
    
    const login = async () => {
      // console.log(loginData.value.user)
      // await signIn({email: loginData.value.user, password: loginData.value.password})
      await signIn({
        email: loginData.value.user,
        password: loginData.value.password,
      })
    }
    
    
    </script>

I’m doing a small learning project on and came across the fact that when I add import to a js script, it seems to start being ignored and not executed.
I don’t quite understand if the problem is in the code or in WebStorm.

I wrote a simplified example, but it didn’t work either.

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>Hello world!</div>
<div id="display"></div>
<script type="module" src="./main.js"></script>
</body>
</html>

main.js

import {print} from "./func";
print();

func.js

export function print(){
    document.getElementById("display").innerHTML += "Hello";
}

All files are in the same folder.