Category: javascript

Category Added in a WPeMatico Campaign

Process an array of objects for telegram-bot weather

I have a sorted array of objects:

[
  { weather: 'sunny', time: '2023-09-17 09:00:00' },
  { weather: 'sunny', time: '2023-09-17 12:00:00' },
  { weather: 'sunny', time: '2023-09-17 15:00:00' },
  { weather: 'sunny', time: '2023-09-17 18:00:00' },
  { weather: 'sunny', time: '2023-09-17 21:00:00' }
]

I need to get this:

Sunday, 17 september:
9:00 sunny
12:00 sunny
…

I can’t process the data

Can we mimic the zoom text function in the mobile browsers using selenium

I am utilizing Sauce Labs to execute my automation script, which is built using Selenium and Java. One of the challenges I’m currently facing is finding a JavaScript method or keyboard shortcut to enable the ‘Zoom text’ function programmatically. Can you provide any guidance or suggestions?
enter image description here

i tried following java-script.but that is doing page zoom not the text zoom
“document.body.style.zoom = ‘1.5’”; // Zoom in

I have no idea how to create a delete button / option using remove method in JS

I simply cannot and do not know how to make a delete option. I am super new to coding. I want to have a delete option next to each guest that already are on the list, as well as the new guests that will pop up. I know that I need to add a keyword / variable at the end of the bullet list of guests so that this button / option will appear, but I cannot make it. I want it to appear and work, but I simply can’t and I have been trying many methods such as removeChild and removeEvent Listener.

<!DOCTYPE html>
<html>

<body>
  <h2>Guest list</h2>
  <p id="demo"></p>
  <h3>Add a new guest!</h3>
  <form name="myform" action="">
    <span>Name:</span><input type="text" name="name" value="" />
    <span>Surname:</span><input type="text" name="surname" />
    <span>Age:</span><input type="text" name="age" />
    <input type="button" name="button" value="Add a guest" onClick="addAGuest(this.form)" />
  </form>
  <p style="color: red; font-weight: bold;" id="err"></p>
  <p onclick="removeButton()"style="color:darkorange; text-decoration: underline; cursor: pointer;" id="deleteButton">Delete this guest</p>
  <script>

 

    function getGuests() {
      const guests = [{ name: "James", surname: "Moth", age: 20 }, { name: "Ford", surname: "Mustang", age: "24" }, { name: "Jim", surname: "Smith", age: 19 },
      { name: "Christian", surname: "Neutron", age: 12 }];
      return guests;
    }

       function getBulletListOfGuests(guests) {
       let bulletList = "<ul>";
        for (i = 0; i < guests.length; i++) {
        bulletList = bulletList + "<li>The guest's name is " + guests[i].name + " " + guests[i].surname + " and they are " + guests[i].age + " years old." + "</li>"
       ;
      }
      return bulletList + "</ul>";
  }

  function removeButton(guests) {
      remove.guest;
    }

    const myGuests = getGuests();

    function resetErrorMessage() {
      document.getElementById("err").innerHTML = "";
    }

    function setErrorMessage(message) {
      document.getElementById("err").innerHTML = message;
    }

    function validateGuest(guest) {
      let errorMessage = "";
      if (guest.name == "") {
        errorMessage = errorMessage + "Name cannot be empty<br>";
      }
      if (guest.surname == "") {
        errorMessage = errorMessage + "Surname cannot be empty<br>"
      }
      if (guest.age == "") {
        errorMessage = errorMessage + "Age cannot be empty<br>";
      }
      return errorMessage;
    }

    function addAGuest(form) {
      const formData = new FormData(form);
      let guestToAdd = {};
      formData.forEach(function (value, key) {
        guestToAdd[key] = value;
      });
      let errorMessage = validateGuest(guestToAdd);
      resetErrorMessage();
      if (errorMessage == "") {
        myGuests.push(guestToAdd);
        displayListOfGuests(myGuests);
      } else {
        setErrorMessage(errorMessage);
      }
    }

    function displayListOfGuests(guests) {
      document.getElementById("demo").innerHTML = getBulletListOfGuests(guests);
    }

    displayListOfGuests(myGuests);
  </script>
</body>

</html>

I want to display a delete button next to every guest that I add. I have tried

remove();

method, but it does not seem to work at all. How can I set a variable so that I can put it at the end of the bullet list of guests and actually make it work?

Analog Proxy and Reflect for Python

Is there any Proxy and Reflect analog for Python? I know that in JavaScript exists these technologies. I need similar technologies in Python.
I haven’t tried anything yet because there is no information on the internet.

umzug unable to import an ES module in node js

I am trying to build a simple app as my personal project using ExpressJS. I am using sequelize ORM for handling database changes. Now I want to rollback a migration and to do so i used the following command
npx sequelize-cli db:migrate:undo
When i run the above command I get stuck with the following error.
enter image description here

Here is the content of my package.json file. 

{
  "name": "poc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "mysql2": "^3.6.1",
    "sequelize": "^6.33.0"
  },
  "type":"module",
  "devDependencies": {
    "sequelize-cli": "^6.6.1"
  }
}

Here is the content of my sequelize migration file.

'use strict';

/** @type {import('sequelize-cli').Migration} */

export default {
  async up (queryInterface, Sequelize) {
    /**
     * Add altering commands here.
     *
     * Example:
     * await queryInterface.createTable('users', { id: Sequelize.INTEGER });
     */
    queryInterface.addColumn('Users','deletedAt', {
      type: Sequelize.TIME
    })
  },

  async down (queryInterface, Sequelize) {
    /**
     * Add reverting commands here.
     *
     * Example:
     * await queryInterface.dropTable('users');
     */
    queryInterface.removeColumn('Users','deletedAt')
  }
};

I want to use ES6 modules and syntax for my project.
Thanks in advance for all the help I will be receiving.

Supabase: Confirm-Signup-Email always redirects to Root

I’m building a course on Supabase for my students. In the course they work in different chapters (nested folders) in a GitHub repo which they can upload on a server or test locally.

There will be a chapter (folder) for magiclink-signup and one for password-signup.

The problem is, the URL in the confirm-signup-email always redirects to the root (e.g. https://studentserver.com) of the server instead of https://studentserver.ch/03_supabase_authentication/1_magiclink.html. On the root, authentication obviously fails.

I defined the redirect URL in the Supabase dashboard to my nested folder: https://studentserver.ch/03_supabase_authentication/1_magiclink.html

And I also set the redirect-url programmatically to window.location.href:

const supa = supabase.createClient(supabaseUrl, supabaseKey, {  
 auth: {  
 redirectTo: window.location.href,
},  
});

What am I doing wrong?

How do I get the date and time and display it in a defineProps?

I’m making a simple VueJS application and I would like to display todays date and time and define it in DefineProps, I’ve tried the following in my component:

I would like to display todays date and time and define it in DefineProps, I’ve tried the following in my component:

<script setup>
const props = defineProps({
  dateandtime: String
})
</script>

And in my view I have the following:

<Header dateandtime="test" />

I also tried putting new Date().toLocaleString() next to the dateandtime prop and I atleast expected something out of it but that didn’t work so easy.

how to display popup in web mapping application

I want to display the data in the shape file on the click event in my web mapping application. I added the popup functionality for the same. but I am not able to find the error. I have published files using Geoserver. please can you tell me how can i achieve this?
this is my code-

index.html.

<!DOCTYPE html>
<html>
<head>
  <title>WMS Layer Example</title>
  <link rel="stylesheet" href="css/ol.css" type="text/css">
  <script src="https://openlayers.org/en/v6.5.0/build/ol.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #map-container {
      position: relative;
      width: 100%;
      height: 565px;
    }

    #map {
      width: 100%;
      height: 100%;
    }

    #background-map {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    #dropdown-container1 {
      position: absolute;
      top: 25px;
      right: 20px;
    }

    #dropdown-container2 {
      position: absolute;
      top: 45px;
      right: 20px;
    }

    #logout-button {
      position: absolute;
      top: 1px;
      right: 20px; /* Adjust the right distance to position the button as needed */
      z-index: 1; /* Ensure the button is above the map */
    }

    .ol-popup {
        position: absolute;
        background-color: white;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 280px;
      }
      .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
      .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }
      .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
      }
      .ol-popup-closer:after {
        content: "✖";
      }
  </style>
</head>
<body>
  <div id="map-container">
    <button id="logout-button">Logout</button>
    <div id="map"></div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
    <div id="dropdown-container2">
      <label><b>Background Map:</label>
      <select id="background-map-dropdown">
        <option value="OSMStandard">OSM Standard</option>
        <option value="OSMHumanitarian">OSM Humanitarian</option>
        <option value="CartoDarkAll">Carto Dark All</option>
        <option value="StamenTerrainWithLabels">Stamen Terrain With Labels</option>
        <option value="StamenTerrain">Stamen Terrain (will take some time)</option>
      </select>
    </div>
    <div id="dropdown-container1">
      <label for="wms-layer-dropdown">Select Layer:</label>
      <select id="wms-layer-dropdown">
        <option value="Aaryaman_Samode">All layers</option>
        <option value="SAMODE_GUT_BOUNDARY">SAMODE GUT BOUNDARY</option>
        <option value="STRUCTURES">Structures</option>
        <option value="Tree_Point">Tree_Point</option>
        <option value="ELECTRIC_POLES">Light Poles</option>
      </select>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

script.js-
“

// Create a new view for the map with a specified center, zoom level, and projection
var view = new ol.View({
  center: [8254682.451123528, 2388403.8093110425],
  zoom: 13.50,
  rotation: 0.5,
  projection: 'EPSG:3857'
});

// Create a new map instance with the specified view and target HTML element
var map = new ol.Map({
  target: 'map',
  view: view
});

// Create a source for the WMS layer with the URL and layer parameters
var treePointWMSSource = new ol.source.ImageWMS({
  url: 'http://localhost:8080/geoserver/Aaryaman/wms',
  params: {
    'LAYERS': 'Aaryaman:Tree_Point'
  },
  serverType: 'geoserver'
});

// Create a WMS layer using the previously defined source
var treePointWMSLayer = new ol.layer.Image({
  source: treePointWMSSource
});

// Base Layers
const openstreetMapStandard = new ol.layer.Tile({
  source: new ol.source.OSM(),
  visible: true, // Initially, set this to false
  title: 'OSMStandard'
});

const openstreetMapHumanitarian = new ol.layer.Tile({
  source: new ol.source.OSM({
    url: 'https://{a-c}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'
  }),
  visible: false, // Initially, set this to false
  title: 'OSMHumanitarian'
});

const cartoDBBaseLayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'http://{1-4}.basemaps.cartocdn.com/rastertiles/dark_all/{z}/{x}/{y}.png',
    attributions: '© CARTO'
  }),
  visible: false, // Initially, set this to false
  title: 'CartoDarkAll'
});

 // Stamen basemap layer
 const StamenTerrainWithLabels = new ol.layer.Tile({
  source: new ol.source.Stamen({
    layer: 'terrain-labels',
  }),
  visible: false,
  title: 'StamenTerrainWithLabels'
})

const StamenTerrain = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg',
  }),
  visible: false,
  title: 'StamenTerrain'
})

// Add the base layers to the map
map.addLayer(openstreetMapStandard);
map.addLayer(openstreetMapHumanitarian);
map.addLayer(cartoDBBaseLayer);
map.addLayer(StamenTerrain);
map.addLayer(StamenTerrainWithLabels);

// Function to update the background map based on the selected option
function updateBackgroundMap(selectedBackgroundMap) {
  // Hide all base layers by default
  openstreetMapStandard.setVisible(false);
  openstreetMapHumanitarian.setVisible(false);
  cartoDBBaseLayer.setVisible(false);
  StamenTerrain.setVisible(false);
  StamenTerrainWithLabels.setVisible(false);

  // Show the selected base layer based on the value
  switch (selectedBackgroundMap) {
    case 'OSMStandard':
      openstreetMapStandard.setVisible(true);
      break;
    case 'OSMHumanitarian':
      openstreetMapHumanitarian.setVisible(true);
      break;
    case 'CartoDarkAll':
      cartoDBBaseLayer.setVisible(true);
      break;
    case "StamenTerrain":
      StamenTerrain.setVisible(true);
      break;
    case "StamenTerrainWithLabels":
      StamenTerrainWithLabels.setVisible(true);
      break;
    default:
      // You can set a default base layer to be shown here if needed
  }
}

// Get the dropdown element for selecting background maps
var backgroundMapDropdown = document.getElementById('background-map-dropdown');

// Add a change event listener to the dropdown to update the selected background map
backgroundMapDropdown.addEventListener('change', function () {
  var selectedBackgroundMap = backgroundMapDropdown.value;
  updateBackgroundMap(selectedBackgroundMap);
});

// Get the dropdown element for selecting WMS layers
var dropdown = document.getElementById('wms-layer-dropdown');

// Add a change event listener to the dropdown to update the selected WMS layer
dropdown.addEventListener('change', function () {
  var selectedLayer = dropdown.value;
  // Update the WMS layer parameters with the selected layer
  treePointWMSSource.updateParams({ 'LAYERS': 'Aaryaman:' + selectedLayer });
  // Make the WMS layer visible
  treePointWMSLayer.setVisible(true);
});

// Create a scale line control
var scaleControl = new ol.control.ScaleLine({
  units: 'metric', // Use metric units (kilometers and meters)
  bar: true, // Display a scale bar
  steps: 4, // Number of scale bar steps
  text: true, // Display text (e.g., "1 km" or "500 m")
  minWidth: 100, // Minimum width for the scale control
});

// Add the scale control to the map
map.addControl(scaleControl);

// Add the WMS layer to the map (added after the base layers)
map.addLayer(treePointWMSLayer);

// Add a single-click event listener to the map for feature information retrieval (as in your code)
map.on('singleclick', function (event) {
  var clickedCoordinate = event.coordinate;
  // Get the GetFeatureInfo URL for the clicked coordinate and resolution
  var url = treePointWMSSource.getGetFeatureInfoUrl(
    clickedCoordinate,
    view.getResolution(),
    view.getProjection(),
    { 'INFO_FORMAT': 'application/json' }
  );

  // Use jQuery to make an AJAX request to fetch feature information
  $.ajax({
    url: url,
    method: 'GET',
    dataType: 'json',
    success: function (data) {
      // Process and display the fetched feature information
    },
    error: function (error) {
      console.log('Error fetching feature info:', error);
    }
  });
});

// Function to display the feature information in a popup
function displayFeatureInfo(feature, coordinate) {
  // Clear the popup content
  var popupContent = document.getElementById('popup-content');
  popupContent.innerHTML = '';

  // Check if there are features available
  if (feature && feature.length > 0) {
    // Loop through each feature
    for (var i = 0; i < feature.length; i++) {
      // Get the properties of the feature
      var properties = feature[i].getProperties();

      // Create a div element to display feature information
      var featureDiv = document.createElement('div');

      // Iterate through the properties and display them
      for (var key in properties) {
        if (properties.hasOwnProperty(key)) {
          var value = properties[key];
          // Exclude some properties if needed
          if (key !== 'geometry' && key !== 'boundedBy') {
            var propertyDiv = document.createElement('div');
            propertyDiv.innerHTML = '<b>' + key + ':</b> ' + value;
            featureDiv.appendChild(propertyDiv);
          }
        }
      }

      // Add the feature div to the popup content
      popupContent.appendChild(featureDiv);
    }

    // Set the popup's position
    var popup = new ol.Overlay({
      element: document.getElementById('popup'),
      positioning: 'bottom-center',
      stopEvent: false,
      offset: [0, -30],
    });
    map.addOverlay(popup);
    popup.setPosition(coordinate);
  } else {
    // No features found, hide the popup
    var popup = new ol.Overlay({
      element: document.getElementById('popup'),
      positioning: 'bottom-center',
      stopEvent: false,
      offset: [0, -30],
    });
    map.addOverlay(popup);
    popup.setPosition(undefined);
  }
}

// Add the single-click event listener to the map for feature information retrieval
map.on('singleclick', function (event) {
  var clickedCoordinate = event.coordinate;
  // Get the GetFeatureInfo URL for the clicked coordinate and resolution
  var url = treePointWMSSource.getGetFeatureInfoUrl(
    clickedCoordinate,
    32643, // Set the desired resolution here
    view.getProjection(),
    { 'INFO_FORMAT': 'application/json' }
  );

  // Use jQuery to make an AJAX request to fetch feature information
  $.ajax({
    url: url,
    method: 'GET',
    dataType: 'json',
    success: function (data) {
      // Process and display the fetched feature information
      displayFeatureInfo(data.features, clickedCoordinate);
    },
    error: function (error) {
      console.log('Error fetching feature info:', error);
    }
  });
});

Using jQuery to change option background color in select

I have an HTML Select with a background color.
I’m filling this select with options from the database. What I want is to change the background color of each option I append using the ‘color’ variable.
Is there an easy way to grab each option in the loop? I tried:

 jQuery(this).css('background-color',color);

but it’s not working. Please check the code:

coursesSelect=jQuery("#subject"+x).val()    
color="#90f5ab";
jQuery.each(response.data, function(i, valu) {
    if(coursesSelect==""||coursesSelect==null){
jQuery("#subject"+x).append(jQuery('<option>').text(valu.subjectTitle+" "+valu.subjectCode).attr('value',valu.subjectCode));
    }
    if(!response.data[i].subjectCode.includes(coursesSelect)){
jQuery("#subject"+x).append(jQuery('<option>').text(valu.subjectTitle+" "+valu.subjectCode).attr('value',valu.subjectCode));
        
        
    }
});

How do I create a url with an attribute or variable (attr() or var()) in css?

I have some js that creates a seperate svg filter for each image on the page (because I have to have a seperate begin property on the animations for each image.mouseenter), and then sets each images attribute data-filter to its corresponding filter (e.g. data-filter=”url(#noise0″), and then attempt to use css with this attribute like so:

.cardimg:hover {
    animation: pulse 1s ease-in-out;
    filter: attr('data-filter');
}

This isn’t working, but I want to be able to dynamically set what filter each image uses. Is there any way to do this?

typescript dynamic access into object [duplicate]

I want to use the name of the variable that I will access in the data coming from the API as dynamic, how can I do this?

example

const items = ref([]);
  const inside = "micro_case_infos";

  items.value = resp.data.inside || [];

This is what I expected to work, even though it didn’t work when I wrote the code.

items.value = resp.data.micro_case_infos || [];

At the same time, the inside variable will be something that comes with props. If inside exists, the value of the inside variable will be searched in the object.

Filtering data and showing loader, but first the browser freezes, then the loader is shown and immediately disappears, async function doesn’t work

I want to show loader when user clicks search but I have a problem with screen loader or rather with nature of JavaScript’s single-thread. Browser doesn’t get a chance to update the UI even if I put the loader before filtering. Button is clicked, then the browser waits 2-4 seconds (freezes), then the data is filtered, then the loader shows for half a second and it disappears. How can i resolve problem so that loader is shown when button is clicked before data starts filtering and that my browser does not freeze?

I tried like this with Promise but it is not working. I found some examples of turning my code to asynchronous but none of them helped, even with tiny delay to show loader is not working. This is the last example that I tried.
I am using this loader library https://gasparesganga.com/labs/jquery-loading-overlay/

//function for filtering
function filter(searchSplit) {

$('.parent').LoadingOverlay("show");
var button = $(this);
button.attr('disabled', true);

new Promise((resolve, reject) => {
    setTimeout(function () {
    
        $(".table tbody tr").not(":containsi('" + searchSplit + "')").each(function (e) {
            $(this).attr('visible', 'false');
            if (!$(this).parents('.parentEl').hasClass('.foundParentEl')) {
                $(this).parents('.parentEl').addClass('hide');
            }
            if (searchSplit.length > 4) {
                $(this).parents('.list').removeClass('show');
            }
        });

        $(".table tbody tr:containsi('" + searchSplit + "')").each(function (e) {
            $(this).attr('visible', 'true');
            $(this).parents('.parentEl').removeClass('hide');
            if (searchSplit.length > 4) {
                $(this).parents('.list').addClass('show');
            }
        });

        var empty = $(".table tbody").not(':has(tr)');

        if (searchSplit.length > 4) {
            empty.parents('.parentEl').addClass('hide');
        }
        else {
            empty.parents('.parentEl').removeClass('hide');
        }

        if (searchSplit.length > 4) {
            $(window).trigger('resize');`your text`
        }

        resolve();  
    }, 0);
})
.then(() => {
    // This will run after your code is done
    button.attr('disabled', false);
    $('.parent').LoadingOverlay("hide");
});`


}

//click event on button
$('.btn-search').click(function () {
    var searchTerm = $(".search").val();
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('");
    filter(searchSplit); //calling function
});