Category: javascript

the error log

eclare namespace google.maps {
~~~~~~~
Conflicts are in this file.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:130:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘anchorPoint’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

130 anchorPoint?: Point;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4265:5
4265 anchorPoint?: google.maps.Point|null;
~~~~~~~~~~~
‘anchorPoint’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:135:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘animation’ must be of type ‘Animation | null | undefined’, but here has type ‘Animation | undefined’.

135 animation?: Animation;
~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4269:5
4269 animation?: google.maps.Animation|null;
~~~~~~~~~
‘animation’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:141:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘clickable’ must be of type ‘boolean | null | undefined’, but here has type ‘boolean | undefined’.

141 clickable?: boolean;
~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4274:5
4274 clickable?: boolean|null;
~~~~~~~~~
‘clickable’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:147:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘crossOnDrag’ must be of type ‘boolean | null | undefined’, but here has type ‘boolean | undefined’.

147 crossOnDrag?: boolean;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4284:5
4284 crossOnDrag?: boolean|null;
~~~~~~~~~~~
‘crossOnDrag’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:154:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘cursor’ must be of type ‘string | null | undefined’, but here has type ‘string | undefined’.

154 cursor?: string;
~~~~~~

node_modules/@types/google.maps/index.d.ts:4288:5
4288 cursor?: string|null;
~~~~~~
‘cursor’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:160:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘draggable’ must be of type ‘boolean | null | undefined’, but here has type ‘boolean | undefined’.

160 draggable?: boolean;
~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4293:5
4293 draggable?: boolean|null;
~~~~~~~~~
‘draggable’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:167:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘icon’ must be of type ‘string | Icon | Symbol | null | undefined’, but here has type ‘string | Icon | Symbol | undefined’.

167 icon?: string | Icon | google.maps.Symbol;
~~~~

node_modules/@types/google.maps/index.d.ts:4298:5
4298 icon?: string|null|google.maps.Icon|google.maps.Symbol;
~~~~
‘icon’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:173:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘label’ must be of type ‘string | MarkerLabel | null | undefined’, but here has type ‘string | MarkerLabel | undefined’.

173 label?: string | MarkerLabel;
~~~~~

node_modules/@types/google.maps/index.d.ts:4308:5
4308 label?: string|null|google.maps.MarkerLabel;
~~~~~
‘label’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:178:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘map’ must be of type ‘Map | StreetViewPanorama | null | undefined’, but here has type ‘Map | StreetViewPanorama | undefined’.

178 map?: Map | StreetViewPanorama;
~~~

node_modules/@types/google.maps/index.d.ts:4314:5
4314 map?: google.maps.Map|null|google.maps.StreetViewPanorama;
~~~
‘map’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:184:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘opacity’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

184 opacity?: number;
~~~~~~~

node_modules/@types/google.maps/index.d.ts:4318:5
4318 opacity?: number|null;
~~~~~~~
‘opacity’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:192:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘optimized’ must be of type ‘boolean | null | undefined’, but here has type ‘boolean | undefined’.

192 optimized?: boolean;
~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4326:5
4326 optimized?: boolean|null;
~~~~~~~~~
‘optimized’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:198:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘position’ must be of type ‘LatLng | LatLngLiteral | null | undefined’, but here has type ‘LatLng | LatLngLiteral | undefined’.

198 position?: LatLng | LatLngLiteral;
~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4333:5
4333 position?: google.maps.LatLng|null|google.maps.LatLngLiteral;
~~~~~~~~
‘position’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:203:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘shape’ must be of type ‘MarkerShape | null | undefined’, but here has type ‘MarkerShape | undefined’.

203 shape?: MarkerShape;
~~~~~

node_modules/@types/google.maps/index.d.ts:4337:5
4337 shape?: google.maps.MarkerShape|null;
~~~~~
‘shape’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:209:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘title’ must be of type ‘string | null | undefined’, but here has type ‘string | undefined’.

209 title?: string;
~~~~~

node_modules/@types/google.maps/index.d.ts:4344:5
4344 title?: string|null;
~~~~~
‘title’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:215:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘visible’ must be of type ‘boolean | null | undefined’, but here has type ‘boolean | undefined’.

215 visible?: boolean;
~~~~~~~

node_modules/@types/google.maps/index.d.ts:4348:5
4348 visible?: boolean|null;
~~~~~~~
‘visible’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:224:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘zIndex’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

224 zIndex?: number;
~~~~~~

node_modules/@types/google.maps/index.d.ts:4356:5
4356 zIndex?: number|null;
~~~~~~
‘zIndex’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:276:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘anchor’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

276 anchor?: Point;
~~~~~~

node_modules/@types/google.maps/index.d.ts:2388:5
2388 anchor?: google.maps.Point|null;
~~~~~~
‘anchor’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:283:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘labelOrigin’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

283 labelOrigin?: Point;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:2394:5
2394 labelOrigin?: google.maps.Point|null;
~~~~~~~~~~~
‘labelOrigin’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:289:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘origin’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

289 origin?: Point;
~~~~~~

node_modules/@types/google.maps/index.d.ts:2399:5
2399 origin?: google.maps.Point|null;
~~~~~~
‘origin’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:295:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘scaledSize’ must be of type ‘Size | null | undefined’, but here has type ‘Size | undefined’.

295 scaledSize?: Size;
~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:2404:5
2404 scaledSize?: google.maps.Size|null;
~~~~~~~~~~
‘scaledSize’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:302:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘size’ must be of type ‘Size | null | undefined’, but here has type ‘Size | undefined’.

302 size?: Size;
~~~~

node_modules/@types/google.maps/index.d.ts:2410:5
2410 size?: google.maps.Size|null;
~~~~
‘size’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:438:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘anchor’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

438 anchor?: Point;
~~~~~~

node_modules/@types/google.maps/index.d.ts:5866:5
5866 anchor?: google.maps.Point|null;
~~~~~~
‘anchor’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:446:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘fillColor’ must be of type ‘string | null | undefined’, but here has type ‘string | undefined’.

446 fillColor?: string;
~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5873:5
5873 fillColor?: string|null;
~~~~~~~~~
‘fillColor’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:452:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘fillOpacity’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

452 fillOpacity?: number;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5877:5
5877 fillOpacity?: number|null;
~~~~~~~~~~~
‘fillOpacity’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:461:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘labelOrigin’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

461 labelOrigin?: Point;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5884:5
5884 labelOrigin?: google.maps.Point|null;
~~~~~~~~~~~
‘labelOrigin’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:477:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘rotation’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

477 rotation?: number;
~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5898:5
5898 rotation?: number|null;
~~~~~~~~
‘rotation’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:486:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘scale’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

486 scale?: number;
~~~~~

node_modules/@types/google.maps/index.d.ts:5906:5
5906 scale?: number|null;
~~~~~
‘scale’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:493:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘strokeColor’ must be of type ‘string | null | undefined’, but here has type ‘string | undefined’.

493 strokeColor?: string;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5913:5
5913 strokeColor?: string|null;
~~~~~~~~~~~
‘strokeColor’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:500:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘strokeOpacity’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

500 strokeOpacity?: number;
~~~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5919:5
5919 strokeOpacity?: number|null;
~~~~~~~~~~~~~
‘strokeOpacity’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:505:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘strokeWeight’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

505 strokeWeight?: number;
~~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5924:5
5924 strokeWeight?: number|null;
~~~~~~~~~~~~
‘strokeWeight’ was also declared here.

Error: node_modules/@types/googlemaps/reference/max-zoom.d.ts:6:11 – error TS2300: Duplicate identifier ‘MaxZoomService’.

6 class MaxZoomService {
~~~~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4415:9
4415 class MaxZoomService {
~~~~~~~~~~~~~~
‘MaxZoomService’ was also declared here.

Error: node_modules/@types/googlemaps/reference/max-zoom.d.ts:52:10 – error TS2300: Duplicate identifier ‘MaxZoomResult’.

52 type MaxZoomResult = MaxZoomResultError | MaxZoomResultOk;
~~~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4397:13
4397 interface MaxZoomResult {
~~~~~~~~~~~~~
‘MaxZoomResult’ was also declared here.

Error: node_modules/@types/googlemaps/reference/max-zoom.d.ts:65:9 – error TS2300: Duplicate identifier ‘ERROR’.

65 ERROR = ‘ERROR’,
~~~~~

**

package.json

**
},
“private”: true,
“dependencies”: {
“@angular/animations”: “~12.2.0”,
“@angular/cdk”: “^12.2.11”,
“@angular/common”: “~12.2.0”,
“@angular/compiler”: “~12.2.0”,
“@angular/core”: “~12.2.0”,
“@angular/forms”: “~12.2.0”,
“@angular/google-maps”: “^13.0.2”,
“@angular/localize”: “~12.2.0”,
“@angular/material”: “^12.2.11”,
“@angular/platform-browser”: “~12.2.0”,
“@angular/platform-browser-dynamic”: “~12.2.0”,
“@angular/router”: “~12.2.0”,
“@craco/craco”: “^6.3.0”,
“@ng-bootstrap/ng-bootstrap”: “^10.0.0”,
“@swimlane/ngx-datatable”: “^20.0.0”,
“@types/core-js”: “^0.9.39”,
“angular-paginator”: “^7.0.0”,
“bootstrap”: “^5.1.3”,
“ng-bootstrap-table”: “0.0.17”,
“ngx-bootstrap”: “^7.1.0”,
“rxjs”: “~6.6.0”,
“tslib”: “^2.3.0”,
“zone.js”: “~0.11.4”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “^12.2.11”,
“@angular/cli”: “~12.2.11”,
“@angular/compiler-cli”: “~12.2.0”,
“@fortawesome/fontawesome-free”: “^5.15.4”,
“@types/googlemaps”: “^3.39.12”,
“@types/jasmine”: “~3.8.0”,
“@types/node”: “^12.11.1”,
“jasmine-core”: “~3.8.0”,
“karma”: “~6.3.0”,
“karma-chrome-launcher”: “~3.1.0”,
“karma-coverage”: “~2.0.3”,
“karma-jasmine”: “~4.0.0”,
“karma-jasmine-html-reporter”: “~1.7.0”,
“tailwindcss”: “^2.2.17”,
“typescript”: “~4.3.5”
}
tsConig
“baseUrl”: “./”,
“outDir”: “./dist/out-tsc”,
“forceConsistentCasingInFileNames”: true,
“strict”: true,
“noImplicitReturns”: true,
“noFallthroughCasesInSwitch”: true,
“sourceMap”: true,
“declaration”: false,
“downlevelIteration”: true,
“experimentalDecorators”: true,
“moduleResolution”: “node”,
“importHelpers”: true,
“target”: “es2017”,
“module”: “es2020”,
“lib”: [
“es2018”,
“dom”
]
},
“angularCompilerOptions”: {
“enableI18nLegacyMessageIdFormat”: false,
“strictInjectionParameters”: true,
“strictInputAccessModifiers”: true,
“strictTemplates”: true
}

<div  style="height: 200px; width: max-content;">

  <google-map></google-map>
</div>

enter image description here

Can you give me a example for this solution by javascript?

arr = [16, 32, 72, 96]

output: [16, 32].
Because 16 = 4^2 and 32 = 2^5

Thank you for your time to help me!!

i have a character and a movement system how do i make a stage for my game

function border:

Blockquote ps. this is all i know about 2d game stages

I have task in which I want to write a script to run on the tamper monkey. Purpose of this script is to make a search bar in which user will type a word and Script will find it from the webpage.
Question is how can a make such Search bar (not on page but in extension)
reference Image Reference Image with setting menu

I’m learning the CSS grid and trying to position the items inside grid?

can get and see data from javascript:

const profileImg = document.createElement('img');
var profilePhotoUrl = post.user.get("photo").url();
profileImg.src = profilePhotoUrl;
profileImg.className = "profile";

const username = document.createElement('username');
username.className = "user";
username.innerText = post.name;
const content = document.querySelector('.content'); 
content.append(profileImg, username);

from CSS

body {
    display: grid;
    margin: 0;
    grid-template-columns: 20% auto;
    grid-template-rows: 60px auto 100px;
    grid-template-areas: 
        "header header"
        "sidebar content"
        "sidebar footer";
}
.content {
    grid-area: content;
    justify-self: center;
}

and it looks like this. how can I position them vertically?
(profile username) <–like this
(profile username)
(profile username)

i want to render a Gif with GifEncoder (older version), but unfortunately the gif output is jittery or so to say, it lags. This is my code:

import GIFEncoder from "gif-encoder-2";
import fs from "fs";

import pkg from "canvas";
const { createCanvas } = pkg;

let frame = 0;
const size = 200;
const fr = 60; //starting FPS
const encoder = new GIFEncoder(size, size);

encoder
  .createReadStream()
  .pipe(fs.createWriteStream("my.gif"));

encoder.start();
encoder.setRepeat(0); // 0 for repeat, -1 for no-repeat
encoder.setDelay(0); // frame delay in ms
encoder.setQuality(10); // image quality. 10 is default.

var canvas = createCanvas(size, size),
  cw = canvas.width,
  ch = canvas.height,
  cx = null,
  fps = 60,
  bX = 30,
  bY = 30,
  mX = 10,
  mY = 20,
  interval = null;

function gameLoop() {
  cx.clearRect(0, 0, cw, cw);

  cx.beginPath();
  cx.fillStyle = "red";
  cx.arc(bX, bY, 20, 0, Math.PI * 360);
  cx.fill();
  if (bX >= cw || bX <= 0) {
    mX *= -1;
  }
  if (bY >= ch || bY <= 0) {
    mY *= -1;
  }

  bX += mX;
  bY += mY;

  encoder.addFrame(cx);

  console.log(frame);

  if (frame > 60) {
    clearInterval(interval);
    encoder.finish();
  }

  ++frame;
}

if (typeof canvas.getContext !== undefined) {
  cx = canvas.getContext("2d");

  interval = setInterval(gameLoop, 1000 / fps);
}

This is the output

I took the example from this fiddle, where you can see, how smooth the ball should look like.

What I tried so far without success,

• Not creating a stream, when using GifEncoder
• Collecting cx in an array and use GifEncoder afterwards, but it seems the ctx is a reference object and I could not find a way how to copy it
• Playing around with P5 in hope, they have an internal calculation, when the deltaTime is to high between the frames

Can anyone help me here or give me an advice what to do?

1. Restarted MongoDB server (it keeps running when error occurs).

2. Using MongoDB server on windows as a service (started it manually)
   Established the connection via MongoDB Shell CLI Package by hitting enter in the comand prompt to establish the default connection.

3. (mongodb://127.0.0.1:27017/directConnection=true&serverSelectionTimeoutMS=2000 )
   Called npm install and npm start (my dependencies are listed below)

4. Checked that MongoDB is running

5. Checked via the windows resource monitor that the port 27017 is occupied by mongod.exe using TCP and is not restricted by the firewall

6. Checked that I am not using a VPN nor a proxy connection that could interfere.

7. Then I opened http://localhost:3000/ to which I am listening (app.listen(3000);)

Why am i still getting this error even after trying all of the above steps?

MongoServerSelectionError: connect ECONNREFUSED ::1:27017
    at Timeout._onTimeout (C:UsersridwaanDocumentsweb devtestnode_modulesmongodblibsdamtopology.js:330:38)
    at listOnTimeout (node:internal/timers:557:17)
    at processTimers (node:internal/timers:500:7) {
  reason: TopologyDescription {
    type: 'Unknown',
    servers: Map(1) {
      'localhost:27017' => ServerDescription {
        _hostAddress: HostAddress { isIPv6: false, host: 'localhost', port: 27017 },
        address: 'localhost:27017',
        type: 'Unknown',
        hosts: [],
        passives: [],
        arbiters: [],
        tags: {},
        minWireVersion: 0,
        maxWireVersion: 0,
        roundTripTime: -1,
        lastUpdateTime: 1717487,
        lastWriteDate: 0,
        error: MongoNetworkError: connect ECONNREFUSED ::1:27017
            at connectionFailureError (C:UsersridwaanDocumentsweb devtestnode_modulesmongodblibcmapconnect.js:293:20)
            at Socket.<anonymous> (C:UsersridwaanDocumentsweb devtestnode_modulesmongodblibcmapconnect.js:267:22)
            at Object.onceWrapper (node:events:510:26)
            at Socket.emit (node:events:390:28)
            at emitErrorNT (node:internal/streams/destroy:164:8)
            at emitErrorCloseNT (node:internal/streams/destroy:129:3)
            at processTicksAndRejections (node:internal/process/task_queues:83:21)
      }
    },
    stale: false,
    compatible: true,
    heartbeatFrequencyMS: 10000,
    localThresholdMS: 15,
    logicalSessionTimeoutMinutes: undefined
  }
}

Node.js v17.1.0

Hope you all are doing well.

I have deployed my react app in Bluehost, having a URL https://lanterncapitalpartners.com/
Now I am facing an issue while reloading pages, it throws an error

Not Found
The requested URL was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to
use an ErrorDocument to handle the request.

For the homepage, it reloads ok, while for other pages, it throws the error mentioned above.
I don’t know whether it’s a server issue or an app issue.

Help in that matter would really be appreciated.

Can anyone pls confirm is this a valid IP address validator, does it verify all the IP addresses. If not pls suggest a regex (am using JS), which validates all IP addresses

        regExp:/^((([a-fA-F0-9][a-fA-F0-9]+[-]){5}|([a-fA-F0-9][a-fA-F0-9]+[:]){5})([a-fA-F0-9][a-fA-F0-9])$)|^([+-]?(?=.d|d)(?:d+)?(?:.?d*))(?:[eE]([+-]?d+))?([a-zA-Z](([+-]?(?=.d|d)(?:d+)?(?:.?d*))(?:[eE]([+-]?d+))?[a-zA-Z])+)$|(^([a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9]+[.]){2}([a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9]))$|(^([0-9]){15}$)/,

Thanks in advance

I want to get notifications from the backend using sockets and to get these notifications you have to be authenticated. To mean you have to pass token with the sockets to get notifications from the back end.
Here is the code i wrote:

    const headers = {
      Authorization: "bearer " + this.authService.getToken()
    };

    const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
    const endpoint = protocol +'localhost:8000/channel/on/notification/';
    
    const socket = new WebSocket(endpoint, ['access_token',this.authService.getToken()]);

    socket.onopen = function (e) {
      console.error('WebSockets connection created.');
    };

    socket.onmessage = function (e) {
      const data = JSON.parse(e.data);
      console.log(data)
    };

    socket.onclose = function (e) {
      console.log('Chat socket error ===>>', e)
    };

  }

I still keep getting errors. Any help?

I have a query regarding the sizes of Graphics. I’m trying to code collision detection, my code is as follows:

const collided = (objectBounds, bounds) => {
  return (
    objectBounds.x + objectBounds.width > bounds.x &&
    bounds.x + bounds.width > objectBounds.x &&
    objectBounds.y + objectBounds.height > bounds.y &&
    bounds.y + bounds.height > objectBounds.y
  );
};

const restrictPosToObjectBounds = (objectBounds, bounds, oldBounds) => {
  if (collided(objectBounds, bounds)) return oldPos;
  else
    return {
      x: bounds.x,
      y: bounds.y
    };
};

And then I’ll call it like this:

const objectPosition = object.getLocalBounds()
const oldPosition = object.getLocalBounds()
restrictPosToObjectBounds (
    objectPosition,
    {
      ...getNewPos(oldPosition),
      width:oldPosition.width,
      height:oldPosition.height,
    },
    oldPosition
  )

Which kinda works, but it there would be a big gap around the object I’m colliding with, leaving me unable to properly collide with it

If I change my collide function to this (dividing the width and heights by half)

const collided = (objectBounds, bounds) => {
  return (
    objectBounds.x + objectBounds.width / 2 > bounds.x &&
    bounds.x + bounds.width / 2  > objectBounds.x &&
    objectBounds.y + objectBounds.height / 2  > bounds.y &&
    bounds.y + bounds.height / 2  > objectBounds.y
  );
};

Then it works properly, any idea why? Is the scale of a Graphic rendered differently or something, how do it get its accurate width and height?

I have this javascript code.

How would i remove the animation from it and just show and hide the elements

here is just the javascript code.

If needed i can post the html

………………………………………………………………………………………………………………………………………………………………………………………………………………………………….

var $allTiles = $(".js-tile");
var $Tiles = $(".Tiles");

$(".Tiles > .Tile").each(function(i, el) {  
  
  var $tile = $(el);
  var target = $tile.children(".Tile-flyout");
  
  // get each items flyout height with extra buffer
  var thisHeight = target.children(".Tile-content").outerHeight()+20;
  
  // Create ne timeline in paused state
  var tl = new TimelineMax({
    paused: true,
    reversed:true//,
    //forward: true // not a valid GSAP property 
  });

  TweenLite.set(target, {
    height:0,
    autoAlpha: 0,
    display: "none"//,
  });    
  // animate stuff
  tl.to(target, 1, {
    delay: 0.5,
    height: thisHeight,
    autoAlpha: 1,
    display: "block",
    ease: Cubic.easeInOut,
    overwrite: "none"
  });
  // store timeline in DOM node
  el.animation = tl;
  
  // create element event handler
  $(el).on("click", function(event) {
    
    event.preventDefault();
    
    var that = this;
    var currentTile = $(this);
    
    $(".Tiles > .Tile.is-expanded").not(this).each(function(i, element){
        console.log('reverse?');
        element.animation.reverse();
        currentTile.removeClass("not-expanded");
    }); 
     
     $allTiles.not(currentTile).removeClass("is-expanded");
     $allTiles.not(currentTile).removeClass("not-expanded");
    
     currentTile.toggleClass("is-expanded");

     if (this.animation.reversed()) {
          console.log('1');
          $allTiles.not(currentTile).addClass("not-expanded");
       
          this.animation.play();
          target.removeClass("reversing");
     } else {
          console.log('2');
          this.animation.reverse();
          target.addClass("reversing");
     }
  });  
});

I want to use the following JQuery plugin as part of my React app, and haven’t had success in doing so: http://viima.github.io/jquery-comments/#link-3. This is a comments plugin that creates threads/replies.

Currently, I’ve tried to integrate it as follows, but to no avail:

import React, { Component } from "react";
import $ from "jquery";
import "./jquery-comments.css";
import "./jquery-comments";

class Comments extends Component {
  componentDidMount() {
    this.$el = $("#comments-container");
    this.$el.comments({
      profilePictureURL:
        "https://viima-app.s3.amazonaws.com/media/public/defaults/user-icon.png",
      getComments: function (success, error) {
        var commentsArray = [
          {
            id: 1,
            created: "2015-10-01",
            content: "Lorem ipsum dolort sit amet",
            fullname: "Simon Powell",
            upvote_count: 2,
            user_has_upvoted: false,
          },
        ];
        success(commentsArray);
      },
    });
  }

  render() {
    return <div ref={(el) => (this.el = el)}></div>;
  }
}

export default Comments;

I have a date range picker on my website.

When a user inputs the date and time range, I want to send separately within the form the startDate and the endDate

daterangepicker code:

    $('input[name="datetimes"]').daterangepicker({
        timePicker: true,
        timePickerIncrement: 5,
        startDate: moment().startOf('hour'),
        endDate: moment().startOf('hour').add(32, 'hour'),
        locale: {
          format: 'YYYY-MM-DD hh:mm'
        },
        opens: 'center',
        drops: 'auto'
    });

And this is what I tried:

$('#formid').submit(function(e) {
    e.preventDefault();
    let startDate = ($('#datetimes').data('daterangepicker').startDate).format('YYYY-MM-DD hh:mm');
    let endDate = ($('#datetimes').data('daterangepicker').endDate).format('YYYY-MM-DD hh:mm');
    $(this).append('<input type="hidden" name="start_date" value='+startDate+' /> ');
    $(this).append('<input type="hidden" name="end_date" value='+endDate+' /> ');
    this.submit();
});

Before the this.submit(); I did a console.log(startDate) and thi is what I am getting:

I am getting the date and the time (as expected), but then if I try doing a print(request.POST) in the view (django back-end), this is what I get:

Somehow, during the POST the HH:mm disappeared.

How can I keep the values of hh:mm during the POST?

I’m seeing a lot of Javascript plugins utilizing a pattern like the one below in the beginning of the main plugin script.

I’ve tried looking up the Internet but couldn’t find any explanation and I don’t have any idea why this is needed.

Excerpt from Datatables:

(function( factory ) {
    "use strict";

    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery'], function ( $ ) {
            return factory( $, window, document );
        } );
    }
    else if ( typeof exports === 'object' ) {
        // CommonJS
        module.exports = function (root, $) {
            if ( ! root ) {
                // CommonJS environments without a window global must pass a
                // root. This will give an error otherwise
                root = window;
            }

            if ( ! $ ) {
                $ = typeof window !== 'undefined' ? // jQuery's factory checks for a global window
                    require('jquery') :
                    require('jquery')( root );
            }

            return factory( $, root, root.document );
        };
    }
    else {
        // Browser
        factory( jQuery, window, document );
    }
}
(function( $, window, document, undefined )
...

Excerpt from Slick.js

;(function(factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports !== 'undefined') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }

}(function($) {
...