Category: javascript

Category Added in a WPeMatico Campaign

When I upload pic it stucks at loading screen (firebase storage cloud)

before going to my code this is error at console after uploading
enter image description here

and this is screen loading

screen loain

and this is my source code in PhotoUpload.jsx, I read a lot of document in firebase storage and I think I did’t mistake anything or maybe did so please correct me a bit I am even reading a lot of stackoverflow about this error but nothing can debug my bug

import React, { useState } from 'react';
import { useCookies } from 'react-cookie';
import {
  ref, uploadBytesResumable, getDownloadURL, getStorage
} from 'firebase/storage';
import styled from 'styled-components';

const Avatar = styled.div`
width: 250px;
height: 250px;
border-radius: 50%;
background-size: cover;
background-position: center;
cursor: pointer;
`;

function Photo() {
  const [cookies] = useCookies(['user'])
  const [image, setImage] = useState(null);
  const [url, setUrl] = useState('./images/UploadPic.svg');

  const handleChange = (e) => {
    if (e.target.files[0]) {
      setImage(e.target.files[0]);
      const storage = getStorage();
      const storageRef = ref(storage, `images/${cookies.user}`);
      const uploadTask = uploadBytesResumable(storageRef, image);

      uploadTask.on(
        'state_changed',
        () => {
          setUrl('./loading.gif');
        },
        (error) => {
          switch (error.code) {
            case 'storage/unauthorized':
              console.log('storage is unauthorized');
              break;
            case 'storage/canceled':
              console.log('storage is canceled');
              break;
            case 'storage/unknown':
              console.log('storage is unknown');
              break;
            default:
              console.log('sorry it is not about storage');
          }
        },
        () => {
          getDownloadURL(uploadTask.ref).then((url) => {
            setUrl(url);
          });
        },
      );
    }
  };

  return (
    <div style={{ alignSelf: 'center' }}>
      <label htmlFor='file-input'>
        <Avatar style={{ backgroundImage: `url(${url})` }} />
        <input id='file-input' type='file' title='upload' onChange={handleChange} />
      </label>
    </div>
  );
}

export default Photo;

How do I use the ionic infinite scroll in conjunction with SQL lite data capacitor 4?

I’m using SQL lite to store data in my Android app, and I’d like to use infinite scroll to improve performance.

I read the documentation.

https://ionicframework.com/docs/api/infinite-scroll

This is my database.service.ts file

import { Injectable } from '@angular/core';
import { IRoute } from '../models/IRoute';
import { QueryService } from './query.service';
import { SQLiteDBConnection, DBSQLiteValues } from '@capacitor-community/sqlite';

@Injectable({
  providedIn: 'root'
})
export class DatabaseService {

  constructor(private queryService: QueryService) {

  }

  async getAllFavoriteRoutes(limit: number, offset: number): Promise<IRoute[]> {
    return this.queryService.executeQuery<any>(async (db: SQLiteDBConnection) => {
      var products: DBSQLiteValues = await db.query("SELECT * FROM favoriteroutes LIMIT ? OFFSET ?", [limit, offset]);
      return products.values as IRoute[];
    });
  }

}

Then I my favorites.page.ts I use this method like this:

import { Component, OnInit } from '@angular/core';
import { DatabaseService } from '../services/database.service';
import { IRoute } from '../models/IRoute';

@Component({
  selector: 'app-favorites',
  templateUrl: './favorites.page.html',
  styleUrls: ['./favorites.page.scss'],
})
export class FavoritesPage implements OnInit {

  public favoriteroutes: IRoute[] = [];
  limit: number = 10;
  offset: number = 0;

  constructor(private databaseService: DatabaseService) { }

  ngOnInit() {  
    this.loadData(null);
  }

  loadData(event) {
    this.databaseService.getAllFavoriteRoutes(this.limit, this.offset).then((data) => {
      this.favoriteroutes = this.favoriteroutes.concat(data);
      this.offset += this.limit;
      if (event) {
        event.target.complete();
      }
    }).catch((error) => {
      console.error(error);
      if (event) {
        event.target.complete();
      }
    });
  }

}

And this is my favorites.page.html

<ion-header>
  <ion-toolbar class="app-theme-color">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Favorites</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content color="secondary">
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-card class="animate__animated animate__slideInLeft" *ngFor="let route of favoriteroutes"
          [routerLink]="['/', 'routedetails', route.id]">
          <ion-row>
            <ion-col>
              <div class="ion-text-begin">
                {{ route.nameroute }}
              </div>
            </ion-col>
            <ion-col>
              <div class="ion-text-end">
                {{ route.cost | currency: currencyChoice }}
              </div>
            </ion-col>
          </ion-row>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-infinite-scroll (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

The issue is that the Android app only displays 10 records and does not scroll or show the other data loading.

I tried several tutorials before this one, but it was based on an API request.

Is it possible to use infinitescroll with SQL lite data?

How to hide datatable on page load and Reset?

I am working on datatables and it works fine. The problem is I want to hide the datatable on page load as this table will have hundreds of entries. Once user selects any of the dropdown filters, the table should load corresponsing filtered rows. When the user selects select Reset filter, the table should hide again. Is there a way to do it? Thanks.

Here is the link to the code: https://live.datatables.net/xexeraci/8/edit

  $(document).ready(function () {
    var table = $('#example').DataTable({
    responsive: true,
    searching: true
  });

  buildSelect(table);
  table.on('draw', function() {
    buildSelect(table);
  });


});

function buildSelect(table) {
  var counter = 0;
  table.columns([0, 1, 2]).every(function() {
    var column = table.column(this, {
      search: 'applied'
    });
    counter++;
    var select = $('<select><option value=""></option></select>')
      .appendTo($('#dropdown' + counter).empty())
      .on('change', function() {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
        );

        column
          .search(val ? '^' + val + '$' : '', true, false)
          .draw();
      });

    column.data().unique().sort().each(function(d, j) {
      select.append('<option value="' + d + '">' + d + '</option>');
    });

    // The rebuild will clear the exisiting select, so it needs to be repopulated
    var currSearch = column.search();
    if (currSearch) {
      // ** MY CHANGE **
      // Use RegEx to find the selected value from the unique values of the column.
      // This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
      select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
    }
  });
}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
<div class="searchbox">
<p>Name: <span id="dropdown1">
  </span>
</p>

<p>Postion: <span id="dropdown2">
  </span>
</p>

<p>Office: <span id="dropdown3">
</span>
</p>
  <button type="button" id="test">Clear Filters</button>
</div>
  <div id="table-wrap">
  <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>

<th>&#160;</th>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" text-align: center;">Information</th>
</tr>


          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        
        <tbody>
          <tr>
            <td>ID.AI</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett -2</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton.1 -2</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
          
            
          </tr></tbody></table>
</div>

Show column names together with search results

Whenever I search for something, I remove the column names to show the results. I would like to show the column names along with the results of my search.

This is the search function I am using:

function searchTable() {
    var input, filter, found, table, tr, td, i, j;
    input = document.getElementById("search-input");
    filter = input.value.toUpperCase();
    table = document.getElementById("table-sort");
    tr = table.getElementsByTagName("tr");
    for (let i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        for (let j = 0; j < td.length; j++) {
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                found = true;
            }
        }
        if (found) {
            tr[i].style.display = "";
            found = false;
        } else {
            tr[i].style.display = "none";
        }
    }
}

This is my table:

<table id="table-sort">
    <tbody id="tBody">
        <tr>
            <th onClick="sortBy(0)">Transaction Date</th>
            <th onClick="sortBy(1)">Merchant</th>
            <th onClick="sortBy(2)">Amount</th>
            <th>Currency</th>
        </tr>
        <tr>
            <td data-th="Transaction Date">
            </td>
            <td data-th="Merchant">
            </td>
            <td data-th="Amount">
            </td>
            <td data-th="Currency">
            </td>
        </tr>
    </tbody>
</table>

Page transition with framer motion in next.js 13

I’m building a web site with the following structure, I want to have some kind of slide in transition from the home page (.app/page.js) and every other page located in ./app/(content) because I have a total different layout for those pages. Is it possible? I’ve tried somethings but I think I’m doing it wrong because yes, I can do the slide transition, but for some reason the page just pops out and the next one do the slide animation, when it should slide over it.
Sorry if I can’t explain myself, but if you can give me a hand I will really appreciate it.

folder structure

Overlapping letters in 3D Text in Three.js

Why does my threejs 3d textgeometry have overlapping letters when viewed at an angle?

enter image description here

var loader = new FontLoader()
loader.load('assets/fonts/sourcecodepro_bold.typeface.json', font => {
    const textGeo = new TextGeometry("MyText", {
        font: font,
        size: 300,
        height: 100,
        curveSegments: 12,
        bevelEnabled: false,
        bevelThickness: 0.5,
        bevelSize: 0.3,
        bevelOffset: 0,
        bevelSegments: 5,
    })

    // const materials = [
    //     new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // front
    //     new THREE.MeshBasicMaterial({ color: 0x00ff00 }) // side
    // ]
    const materials = [
        new THREE.MeshPhongMaterial({ color: 0x00ff00, flatShading: true }), // front
        new THREE.MeshPhongMaterial({ color: 0x00ff00 }) // side
    ]
    const textMesh = new THREE.Mesh(textGeo, materials);

    textGeo.computeBoundingBox();
    const centerOffset = - 0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x);

    textMesh.position.x = centerOffset;
    textMesh.position.y = 30;
    textMesh.position.z = 0;

    textMesh.rotation.x = 0;
    // textMesh.rotation.y = Math.PI * 2;

    group.add(textMesh);
})

Blazor Server: Getting an ‘Uncaught (in promise) WebSocket is not in the OPEN state’ Error Only In Firefox

We have written a Blazer Server app (.NET 7.0) that is hosted on IIS 10 on Windows Server 2019. The app works fine under the latest versions of Chrome or Edge. However, a few of our users use the latest version of Firefox, and they occasionally are unable to load pages of the app. There’s no rhyme or reason I can find to the inability to load, besides it is more likely to happen the longer you use the app.

Keeping the Developer Console open while using the app, I notice the following when the site fails to load: Uncaught (in promise) WebSocket is not in the OPEN state and Uncaught (in promise) Error: cannot send data if the connection is not in the 'Connected' State.

I also occasionally notice in Chrome’s Developer Console that a 101 Switching Protocols request is sent, with a 200 response header that includes Upgrade: websocket. I do not know if that means that SignalR has failed in some way and ‘raw’ WebSockets are being used as a fallback in Chrome, perhaps indicating that Firefox is failing on its attempted fallback?

I’ve confirmed via about:config in Firefox that network.http.http2.websockets is set to true. I’ve also restarted the IIS web server, just in case that was causing an issue, as well as confirming that WebSockets is installed as part of IIS.

Other than that, I’m quite unfamiliar with SignalR and WebSockets (this is our first Blazor Server app), and my Googling and review of Stack Overflow hasn’t turned up anything relevant.

My basic understanding is that we want to be using SignalR generally, which happens to use WebSockets behind the scenes, but we do not want to be using ‘raw WebSockets’ (as Microsoft refers to it in this page). I also was under the impression that Blazor Server used SignalR without the need for additional configuration, but perhaps we’ve had it misconfigured this whole time and were just relying on a fallback.

In case it’s useful, here is our Program.cs:

using Microsoft.EntityFrameworkCore;
using miniDARTS.Data;
using MudBlazor.Services;
using Microsoft.AspNetCore.Authentication.Negotiate;
using miniDARTS.Services;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

// Blazor Server doesn't include HttpClient service by default.
builder.Services.AddHttpClient();

builder.Services.AddAuthentication(NegotiateDefaults.AuthenticationScheme).AddNegotiate();

builder.Services.AddAuthorization(options =>
{
    options.FallbackPolicy = options.DefaultPolicy;
});

// Configure the database connection.
string connectionString = "";

if (Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT") == "Production")
{
    connectionString = builder.Configuration.GetConnectionString("miniDARTSContext");
}   

else if (Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT") == "Development")
{
    connectionString = builder.Configuration.GetConnectionString("testing");
}

var serverVersion = new MySqlServerVersion(new Version(8, 0, 28));
builder.Services.AddDbContextFactory<miniDARTSContext>(options => options.UseMySql(connectionString, serverVersion), ServiceLifetime.Scoped);

// Only run cron jobs if they are in a production environment.
if (Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT") == "Production")
{
    IHost host = Host.CreateDefaultBuilder(args)
        .ConfigureServices(services =>
        {
            services.AddHostedService<ScopedBackgroundService>();
            services.AddScoped<IScopedProcessingService, PhaseChangeReportService>();
        })
        .Build();

    host.RunAsync();
}

// Add MudBlazor services.
builder.Services.AddMudServices();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.UseAuthentication();
app.UseAuthorization();

app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
});

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

Sequelize read from Postgres in ITC and insert to mssql in itc

I have an application which is supposed to do the following.
Read some data from PSQL and insert into MSSql.
PSql has time in itc, but when getting inserted to MSSql,it is getting converted to utc. Can someone help fix this? I have tried using useUTC : false and setting timezone etc but nothing seems to work. Sharing my way of db connection

sequelizeMsSqlDb = new Sequelize(Db, User,Password, {
                host: Host,
                port: Port,
                dialect: Dialect
            });

sequelizePsql = new Sequelize(Db, User,Password, {
                host: Host,
                port: Port,
                dialect: Dialect,
                dialectOptions: {
                    useUTC: false,
                    dateStrings: true,
                    typeCast: function (field, next) {
                      if (field.type === 'DATE' || field.type === 'DATETIME') {
                        return field.string()
                      }
                        return next()
                      }
                  }
            })

Hi legend developers [closed]

The search for the perfect team isn’t just about finding people who are like-minded. It’s about finding a new family who welcomes you with open arms. As I embark on my journey in web development, I am hoping to find a home within this family. So, I’m looking for someone to give me a warm welcome, some guidance, and some helpful tips for the road ahead. Who knows what kind of magic we can create together as we work towards our common goals?

Best Wishes;

Muhammad Osama

I simply reached out to my family of web developers and full-stack developers and asked for their suggestions. I’m hoping to learn from their expertise and guidance as I embark on my web development journey. I know that with their support, we can achieve great things together.

audio on hover over various short texts (webpage)

for the educational part of my (foreign languages) webpages I’d like to let the visitor hover over a number of sentences and listen to the corresponding prerecorded audio.
I’ve got a short working script for that, but don’t want to repeat the code every time on the page.
Is there a way to make a playlist or array of text and audio that will work?
(I’m ignorant of javascript, just start experimenting a bit).
Thanks!

This works fine, but there must be a better way than writing the script again & again…

<audio id="audio01"  preload="auto" src="#1.mp3"></audio>
   <audio id="audio02"  preload="auto" src="#2.mp3"></audio>
   <p id="a01" style="background-color:red;">Ὦ δώματ᾽ Ἀδμήτει᾽, ἐν οἷς ἔτλην ἐγὼ</p>
   <p id="a02" style="background-color:red;">θῆσσαν τράπεζαν αἰνέσαι θεός περ ὤν.</p>
      
   <script>
   var a01 = document.getElementById("a01");
   a01.addEventListener("mouseover", function( event ) {   
       var audio01 = document.getElementById("audio01");
       audio01.play();
   }, false);
   
   a01.addEventListener("mouseout", function( event ) {   
          var audio = document.getElementById("audio01");
          audio.currentTime = 0;
          audio.pause();
      }, false);
      
var a02 = document.getElementById("a02");
        a02.addEventListener("mouseover", function( event ) {   
            var audio02 = document.getElementById("audio02");
            audio02.play();
    }, false);
        
a02.addEventListener("mouseout", function( event ) {   
               var audio02 = document.getElementById("audio02");
               audio02.currentTime = 0;
               audio02.pause();
       }, false);
   </script>

Plan Viewer for IFCjs

I was wondering if someone knows about any projects that is creating a 2D plan-viewer for IFC models. I am trying to figure out how to do it myself, but having an example, package or a pre-build viewer even would be of much help.

So I am asking if anyone knows about a good learning place or examples. Anything not IFC related is welcome as well!

Thanks in advance.