Javascript Determine if page was redirected by tag or window.location.href?

The question is pretty much the same as the title.

Is there a way in Javascript to determine whether the page has been redirected by < a href > HTML tag or by window.location.href?

I need conditions for clearing saved states of data-table:

on reload

and

on redirected via < a href > tag.

I don’t want to clear saved states for a redirection via window.location.href.

I got one on reload:

if (performance.navigation.type == 1){
      var table = $('#categoryList').DataTable();
      table.state.clear();
      table.search("").draw(); 
      table.column( '0:visible' ).order( 'asc' ).draw();
      table.page.len(10).draw();
    }

I’m looking for another one on redirected via < a href >.

Google Apps Script (Javascript) function won’t apply itself to the last worksheet

I am using Google Apps Script (which uses JavaScript) on a Google Sheet doc to carry out a data collection, cleanse and extraction process (to CSV). The whole script runs well apart from one of the functions (see code below).

For some reason it doesn’t seem to apply itself to the very last worksheet in the Google Sheet or the last item stored in the sheets array.

Once it gets to the last item in the sheets array, it will insert the two new columns (client_id and client_name) but not actually set the respective values for these two columns. For example, if client_id = 6 and client_name = "Amazon", these two values will be inserted per row of data in the respective columns for that worksheet.

It will then continue the rest of the code, creating the CSV files and then removing the newly added columns as it should.


Work-around (not ideal) #1: if I insert a blank worksheet and place it at the end, it will actually apply itself to all the useful worksheets before it – which does resolve the issue – however its not an efficient solution.


Work-around #2: I was thinking to rewrite the code as below:

from this (original): for (let i = 0; i < sheets.length; i++) { ... }

to this (new): for (let i = 0; i <= sheets.length; i++) { ... } with a nested if statement which says something along the lines of “if i = sheets.length, do nothing — else, do the usual”

I still need to test this one but yet again feels inefficient.


Current Code:

/* Adds in two columns, one for client id and one for client name to each row.
Columns will be inserted just before the data extraction process and then removed after. */

function insertClientIDsAndNames(client_id, client_name, spreadsheet_id) {
  // all the worksheets this function will apply itself to
  var spreadsheet = SpreadsheetApp.openById(spreadsheet_id);
  var sheets = [];
  
  // collects all the sheets
  for (let i = 0; i < spreadsheet.getSheets().length; i++) {
    sheets.push(spreadsheet.getSheets()[i].getSheetName());
  }

  for (let i = 0; i < sheets.length; i++) {
    var sheet = spreadsheet.getSheetByName(sheets[i]);
    
    // inserts two new columns at the start of the sheet
    sheet.insertColumns(1, 2);

    // insert column header names
    sheet.getRange(1, 1).setValue("client_id");
    sheet.getRange(1, 2).setValue("client_name");

    // returns the position of the last row/column that has content
    var lastRow = sheet.getLastRow();

    var range = sheet.getRange(2, 1, lastRow, 2);
    var values = range.getValues();

    // formats the range to plain text
    range.setNumberFormat('@STRING@');

    // sets the client id
    for (let i = 1; i < values.length; i++) {
      sheet.getRange(i + 1, 1).setValue(client_id);
    }

    // sets the client name
    for (let i = 1; i < values.length; i++) {
      sheet.getRange(i + 1, 2).setValue(client_name);
    }
  }
  
  // creates the csv files
  dataExtractAll(spreadsheet_id);

  // deletes the two new columns that were just created
  for (let i = 0; i < sheets.length; i++) {
    var sheet = spreadsheet.getSheetByName(sheets[i]);
    sheet.deleteColumns(1, 2);
  }
};

Any help would be great as I feel it is a simple solution and I can’t quite see it for some reason!

Cheers.

TYPO3 – Add a JavaScript file and rendering the JS-file to a HTML file

I use TYPO3 ver. 10.4.21 and extensions sitepackage builder.

I added a JavaScript file in sitepackage, but my JavaScript codes don’t be read. Strictly speaking, javascript is read, but my JS codes don’t work on my page (HTML).

Maybe, my JS file doesn’t render my html file? I don’t know…..

In setup.typoscript:

includeJS {
        slider1_script = EXT:mein_projektarbeit/Resources/Public/JavaScript/Dist/slider1.js
        slider1_script.type = text/javascript
}
includeJSFooter {
        slider1_script = EXT:mein_projektarbeit/Resources/Public/JavaScript/Dist/slider1.js
        slider1_script.type = text/javascript
}

And in my html file (Slider1.html):

<html data-namespace-typo3-fluid="true" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
    <f:comment>
        <link href="css/slider1.css" rel="stylesheet">
        <f:layout name="ContentElements/slider1" />
        <script src="{f:uri.resource(path: 'Public/JavaScript/Dist/slider1.js')}"></script>
    </f:comment>
    <f:section name="Main">
    <div class="menu-btn"></div>
       <div class="navigation">
           <div class="navigation-items">
              <a href="#">Home</a>
              <a href="#">About</a>
    .....

in my JS file (Slider1.js):

const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");

menuBtn.addEventListener("click", () => {
    menuBtn.classList.toggle("active");
    navigation.classList.toggle("active");
});

If I run this codes, then an error comes up:
enter image description here

I think the JS file doesN#t render into my html file, that’s why the error comes up.

Did I have to write more codes in html or setup.typoscript?

If I write my JS codes in html and I run them, the Javascript works well. But I want to separate the JS file and HTML file, because I want to use Fluid in my HTML file…
(JavaScript didn’t work, if I used fluid e.g. <data.variable> in my HTML file!)

I hope someone can help me with this problem.

Thank you.

How to update map features properties

I have already mapped my map as below. After mapping, I added some properties to my map features. So How could I update this map. I try this map.getSource('lines').setData(responseData) but I got two overlapping map. Any help is appreciated.

map.on('load', function() {

    map.addSource('lines', {
        type: 'geojson',
        data: responseData
        });

        map.addLayer({
            'id': 'lines',
            'type': 'fill',
            'source': 'lines',
            'layout': {},
            'paint': {
                'fill-color': '#4682B4',
                'fill-opacity': 0.8,
            }
        });
        map.setPaintProperty('lines', 'fill-color', ['get', 'color'])
})

Adding some properties to the already mapped map.

const links = await fetch(`http://127.0.0.1:8000/api/network/4/edges/`);
const linksData = await links.json();
let ar = map.getSource('lines')._data.features.map((item, i) => {
    let currentLayer = linksData.find(
        element => element.edge_id === item.properties.edge_id)
    item.properties.name = currentLayer.name
    item.properties.length = currentLayer.length
    item.properties.speed = currentLayer.speed
    item.properties.lanes = currentLayer.lanes
})

Updating the map after adding properties

map.getSource('lines').setData(responseData)
map.setPaintProperty('lines', 'fill-color', ['interpolate', ['linear'],
            ['get', 'lanes'], 0, 'rgb(255, 255, 255)', 5, 'rgb(255, 0, 0)'])

But instead of updating the map, I got two overlapping maps. How can I fixed it please?

Create and/or Configure Google, FB Apps via API (for user login and subscription)

I’m looking for a solution to automate creation of Google apps (Google developer) to enable user login through user’s Google account.
A public webpage with a Google login would use the app.

It might be possible through Google API but I cannot prove this one.
The same issue would be with Facebook – I found one very old answer (=It is not possible to create an application using Graph API).

Is it possible to programmatically (through an API) modify an existing FB or Google app to add a new website (new domain).

Can you advice about the endpoints and calls, please?

How do i use a proxy with AXIOS?

I am trying to use NORDVPN servers for proxy. I can get it working if i use a socks client but i want to use the normal servers (if possible).

const getIpUrl = "https://api.ipify.org?format=json";

export const requestCurrentIp = () =>
  axios.get(getIpUrl, {
    httpsAgent: tunnel.httpsOverHttps({
      proxy: {
        host: vpn,
        port: 89,
        proxyAuth: `${username}:${password}`,
      },
    }),
  });

When i do this, i get this message:

tunneling socket could not be established, cause=Hostname/IP does not match certificate's 
altnames:
Host: api.ipify.org. is not in the cert's altnames: DNS:*.nordvpn.com, DNS:nordvpn.com

Unable to declare onComplete function in Conf.ts >>Getting error — Type ‘(passed: any) => void’ is not assignable to type ‘() => void’.ts(2322)

I am working on a Protractor – browserstack framework from scratch.

While using onComplete function as mentioned on the site in conf.ts – https://automate.browserstack.com/dashboard/v2/quick-start/get-started#introduction

 // Code to mark the status of test on BrowserStack based on test assertions
      onComplete: function (passed) {
        if (!passed) {
          browser.executeScript('browserstack_executor: {"action": "setSessionStatus", "arguments": {"status":"failed","reason": "At least 1 assertion has failed"}}');
        }
        if (passed) {
          browser.executeScript('browserstack_executor: {"action": "setSessionStatus", "arguments": {"status":"passed","reason": "All assertions passed"}}');
        }
      }

I’m getting below error on Console

*Debugger attached.
conf.ts:87:1 – error TS2322: Type ‘(passed: any) => void’ is not assignable to type ‘() => void’.
87 onComplete: function (passed) {

node_modules/protractor/built/config.d.ts:410:5
 410     onComplete?: () => void;
         ~~~~~~~~~~
 The expected type comes from property 'onComplete' which is declared here on type 'Config'*



Can someone help me understand how to resolve this error?

cts query to find unique values from a field from json document in Marklogic staging

4

I’m trying to write a javaScript cts query to query only unique values from a key from a json document based on another key. i.e, similar to a query like select distinct(name) from data-hub-staging where source=’source1′

{
    "source": "source1",
    "name": "John",
    "DOB": "1-01-1990",
    "load_date": "2021-10-23 10:23:55"
}

I have been trying the below query but it returns all the fields, I wanted only the name field.

const query = cts.jsonPropertyValueQuery(
              "source",
              "source1");

[...new Set (cts.search(query)
.toArray()
  .map(doc => doc.root.name).sort())]

How to import an external model in vue.js using babylon js

I am trying to import a gltf file in vue.js using babylon.js and add 3 dimensional view to the webpage. I can’t figure out how to do that and the documentation online is pretty vague as well. Here’s what I tried:
This is what I put in Hello.vue file

<div>
<h1> Hello </h1>
<Scene>
  <Box :position="[0, 0, 5]"></Box>
</Scene>
</div>
</template>

<script src = "./Hello.js">
</script>

This is what I put in Hello.js file

import vb from 'vue-babylonjs';
import Hello from './Hello.vue';

Vue.use(vb);

new Vue({
  components: { Hello },
  render: c => c('Hello'),
}).$mount('#app');


var delayCreateScene = function () {
    // Create a scene.
    var scene = new BABYLON.Scene(engine);

    // Create a default skybox with an environment.
    var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("../assets/magic_book_of_eden/textures/material_0_baseColor.png", scene);
    var currentSkybox = scene.createDefaultSkybox(hdrTexture, true);

    // Append glTF model to scene.
    BABYLON.SceneLoader.Append("../assets/magic_book_of_eden/", "scene.gltf", scene, function (scene) {
        // Create a default arc rotate camera and light.
        scene.createDefaultCameraOrLight(true, true, true);

        // The default camera looks at the back of the asset.
        // Rotate the camera by 180 degrees to the front of the asset.
        scene.activeCamera.alpha += Math.PI;
    });

    return scene;
};

If possible, could someone explain using an example how that could be done? I am getting the gltf model from sketchfab. Thank you!

Download button in react to csv link not working within material-ui table

I am trying to workout how to include a csv file link to a button within my react material table cell.

From the backend db, I have a column that holds a link to a csv file on a server, i.e.

filePath = 'https://my-file-server/files/outcome.csv'

that has been assigned to filePath within my react component.

I then want to basically emulate a <a href={filePath}>Download CSV</a> within my table cell, so tried using React-Router Link, i.e.:

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

<TableCell>
  <Link to={filePath}>
    <Button>
      Download CSV
    </Button>                  
  </Link>
</TableCell>

Now I am running my app from localhost:3000/my-route and when I click on my Download CSV button, it actually changes my url path to:

http://localhost:3000/my-route/my-file-server/files/outcome.csv

which is not what I want. I actually expected it to point directly to:

https://my-file-server/files/outcome.csv and then thought it would just download within my browser to my computer’s download directory.

Unsure what I am doing wrong?

How to add onClick to button as contentEditable div inner contents

I am using react-contentEditable package from npm. When my user clicks a contact, I want to show a nice label, name, and also a button to remove this label from the editable div if the user wants.

I have the label and name figured out, but I cant seem to understand how to pass the onClick to a button when it is rendered like this below

`<label contentEditable="false" class="p-1 rounded-capsule">${contact.firstName + " " + contact.lastName + " "}<span class="badge fs--1 badge-soft-success badge-pill ml-2">${contact.phone_number}</span><button class="badge-pill badge-soft-primary">X</button></label>`)) // How do I pass an onClick to the button?

Here is the full component

import React, { useState, useRef, useEffect, Fragment } from 'react';
import ContentEditable from 'react-contenteditable';


const [toField, setToField] = useState({value: " ", html: " "})
const toFieldRef = useRef()

const addContactsToDiv = () => {
    let selectedContactsArray = [] // create and empty array
    const Matches = selectedRows.filter((row) => {
      const isMatched = contacts.some(contact => { if(contact._id == row) {
        selectedContactsArray.push({firstName: contact.firstName, lastName: contact.lastName, phone_number:contact.phone_number, _id: contact._id})
      }})
      return isMatched
    })
    const matchedContactsArray = []
    selectedContactsArray.map(contact => { // mapping over selected to add html 

// How can I add an onClick to the button when I have to pass it as string?
      matchedContactsArray.push((`<label contentEditable="false" class="p-1 font-weight-bold bg-primary ml-2 text-white rounded-capsule shadow-none fs--3">${contact.firstName + " " + contact.lastName + " "}<span class="badge fs--1 badge-soft-success badge-pill ml-2">${contact.phone_number}</span><button class="badge-pill badge-soft-primary">X</button><span name="indy-contacts" class="d-none">${contact._id}</span></label>`))
    })
    matchedContactsArray.map(contact => { return contact})
     const stringifiedRows = matchedContactsArray.toString() // push stringified results in to array
     setToField({...toField, html: stringifiedRows}) // update state with array instead of updating state inside loop
    
  }

 <ContentEditable
         name="to"
         innerRef={toFieldRef} // passing our ref instead of state
         html={toField.html} // the html = our ref.current property
         //value={toField}
         onBlur={handleBlur}
         onClick={() => {handleClick()}}
         onChange={handleChange} // this sets our refs.current = event.target.value
         style={{minHeight: "7em", maxHeight: "10em", overflow: "auto"}}
         className="border border-2x border-300 bg-light rounded-soft fs-1"
         >
         </ContentEditable>

TypeScript object type casting, when the two objects differ by key name(s)

This might have been asked before, but I have a situation where I have an object type which my backend expects like so:

type TagTypeThatMyBackendWants = {
    id: string;
    name: string;
}

It consist of two string type keys, the key names being id and name. I get these type of Tag-objects from my backend and my backend also expects objects like these back. Now, the problem is that I am using a library that handles these tags, but the library expects the objects to look like this:

type TagTypeThatALibraryWants = {
    id: string;
    text: string;
}

So it is basically the same object, but instead of a name key with a type of string, the library expects a text key with a type of string. I kind of already solved this by doing some custom mapping back and forth, but this raised the question if there is an “official” or a recommended way to do something like this – like casting from one object type to another, with the ability to tell TypeScript that the name-key “maps” to text-key and vice versa.

Hwo to update/delete ref value in VueJS 3 composition api

Im using a ref value to be able to only execute a click event if the ref value is changing

for example if I want to update/del the array inside let myRef = ref([]);
do i just drill inside the proxy and do the operations
like

 selectedElements.value.push(3);

which returns
Proxy {0: 3}

or what is the correct way to update/del the ref.value ?

export default {  
  setup() {
    let myRef   = ref([]);
  
    return {
     myRef
    };
  },
};
</script>