Pdf Viewer download button not working as expected

I am trying to show pdf in iframe using dynamic form submit, that is working fine we see the pdf properly but now when any user wants to download it via clicking download but it is showing “.htm” file. Also when I do it outside iframe every thing working fine.

<iframe id="report" name="showreport" style="width: 100%;height: 100vh;border: 0;"></iframe>

to dynamically provide pdf to iframe we are creating dynamic form as below:

const mapForm = document.createElement('form');
mapForm.target = "showreport";
mapForm.method = 'POST';
mapForm.action = url;

const mapInput = document.createElement('input');
mapInput.type = 'text';
mapInput.name = 'user';
mapInput.value = 'Admin';

mapForm.appendChild(mapInput);
document.body.appendChild(mapForm);

// Just submit
mapForm.submit();

But when we hit download button it is shows “html” instead of “pdf”.

enter image description here

Problem with the music player on the website – odd clicks

Good Morning,

I’m creating a music player for a website that will contain 14 playlists by default, but in the process of writing the site I’ve come across one problem – the selected playlist is only triggered by odd clicks on the page, any even clicks cause problems.

In a nutshell:

  1. I click on playlist A with a single click – it works perfectly
  2. Then I select playlist B with a single click – it does not work
  3. Single click back to playlist A – works fine
  4. Then I select playlist B with a double click – it works flawlessly

So every click #1, #3, #5, #7 etc works flawlessly, however clicks #2, #4, #6, #8 don’t work, they don’t play music and there is no way to pause or unpause the playlist either.

Code:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>RADIO</title>
    <link rel="stylesheet" href="style2.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css">
</head>
<body>
    <div id="menu">
        <div id="buttons">
            <div class="button-L" onclick="document.body.style.backgroundImage = 'url(img/1.jpg)';"><button value="W" onclick="gra(this)">Playlista 1</button></div>
            <div class="button-S" onclick="document.body.style.backgroundImage = 'url(img/2.jpg)';"><button value="W1" onclick="gra(this)">Playlista 2</button></div>
            <div class="button-S" onclick="document.body.style.backgroundImage = 'url(img/3.jpg)';"><button value="W2" onclick="gra(this)">Playlista 3</button></div>
            <div class="button-S" onclick="document.body.style.backgroundImage = 'url(img/4.jpg)';"><button value="W3" onclick="gra(this)">Playlista 4</button></div>
        </div>
    </div>
 
    <div class="music-container" id="music-container">
        <div class="music-info">
          <h4 id="title"></h4>
          <div class="progress-container" id="progress-container">
            <div class="progress" id="progress"></div>
          </div>
        </div>
   
        <audio src="music/sport.mp3" id="audio"></audio>
   
        <div class="img-container">
          <img src="img/cd-w3.jpg" alt="music-cover" id="cover">
        </div>
 
        <div class="navigation">
          <button id="prev" class="action-btn">
            <i class="fas fa-backward"></i>
          </button>
 
          <button id="play" class="action-btn action-btn-big">
            <i class="fas fa-play"></i>
          </button>
 
          <button id="next" class="action-btn">
            <i class="fas fa-forward"></i>
          </button>
        </div>
      </div>
 
    <script type="text/javascript">
        function gra(tytul) {
            var tytulGry = tytul.value;
            var songs = [];
             
            // Song titles
            if(tytulGry === "W") songs = ['The Trail', 'Kaer Morhen'];
            else if(tytulGry === "W1") songs = ['After The Storm', 'Spikeroog'];
            else if(tytulGry === "W2") songs = ['Trauma', 'Foxkids'];
            else if(tytulGry === "W3") songs = ['Myspace', 'Sport'];
         
            const musicContainer = document.getElementById('music-container');
            const playBtn = document.getElementById('play');
            const prevBtn = document.getElementById('prev');
            const nextBtn = document.getElementById('next');
 
            const audio = document.getElementById('audio');
            const progress = document.getElementById('progress');
            const progressContainer = document.getElementById('progress-container');
            const title = document.getElementById('title');
            const cover = document.getElementById('cover');
            const currTime = document.querySelector('#currTime');
            const durTime = document.querySelector('#durTime')
             
            // Keep track of song
            let songIndex = 1;
 
            // Initially load song details into DOM
            loadSong(songs[songIndex]);
 
            // Update song details
            function loadSong(song) {
            title.innerText = song;
            audio.src = `music/`+song+`.mp3`;
            cover.src = `img/`+tytulGry+`.jpg`;
            }
 
            // Play song
            function playSong() {
            musicContainer.classList.add('play');
            playBtn.querySelector('i.fas').classList.remove('fa-play');
            playBtn.querySelector('i.fas').classList.add('fa-pause');
 
            audio.play();
            }
 
            // Pause song
            function pauseSong() {
            musicContainer.classList.remove('play');
            playBtn.querySelector('i.fas').classList.add('fa-play');
            playBtn.querySelector('i.fas').classList.remove('fa-pause');
 
            audio.pause();
            }
 
            // Previous song
            function prevSong() {
            songIndex--;
 
            if (songIndex < 0) {
                songIndex = songs.length - 1;
            }
 
            loadSong(songs[songIndex]);
 
            playSong();
            }
 
            // Next song
            function nextSong() {
            songIndex++;
 
            if (songIndex > songs.length - 1) {
                songIndex = 0;
            }
 
            loadSong(songs[songIndex]);
 
            playSong();
            }
 
            // Update progress bar
            function updateProgress(e) {
            const { duration, currentTime } = e.srcElement;
            const progressPercent = (currentTime / duration) * 100;
            progress.style.width = `${progressPercent}%`;
            }
 
            // Set progress bar
            function setProgress(e) {
            const width = this.clientWidth;
            const clickX = e.offsetX;
            const duration = audio.duration;
 
            audio.currentTime = (clickX / width) * duration;
            }
 
            //get duration & currentTime for Time of song
            function DurTime (e) {
                const {duration,currentTime} = e.srcElement;
                var sec;
                var sec_d;
 
                // define minutes currentTime
                let min = (currentTime==null)? 0:
                Math.floor(currentTime/60);
                min = min <10 ? '0'+min:min;
 
                // define seconds currentTime
                function get_sec (x) {
                    if(Math.floor(x) >= 60){
                         
                        for (var i = 1; i<=60; i++){
                            if(Math.floor(x)>=(60*i) && Math.floor(x)<(60*(i+1))) {
                                sec = Math.floor(x) - (60*i);
                                sec = sec <10 ? '0'+sec:sec;
                            }
                        }
                    }else{
                        sec = Math.floor(x);
                        sec = sec <10 ? '0'+sec:sec;
                    }
                } 
 
                get_sec (currentTime,sec);
 
                // change currentTime DOM
                currTime.innerHTML = min +':'+ sec;
 
                // define minutes duration
                let min_d = (isNaN(duration) === true)? '0':
                    Math.floor(duration/60);
                min_d = min_d <10 ? '0'+min_d:min_d;
 
 
                function get_sec_d (x) {
                    if(Math.floor(x) >= 60){
                         
                        for (var i = 1; i<=60; i++){
                            if(Math.floor(x)>=(60*i) && Math.floor(x)<(60*(i+1))) {
                                sec_d = Math.floor(x) - (60*i);
                                sec_d = sec_d <10 ? '0'+sec_d:sec_d;
                            }
                        }
                    }else{
                        sec_d = (isNaN(duration) === true)? '0':
                        Math.floor(x);
                        sec_d = sec_d <10 ? '0'+sec_d:sec_d;
                    }
                } 
 
                // define seconds duration
                 
                get_sec_d (duration);
 
                // change duration DOM
                durTime.innerHTML = min_d +':'+ sec_d;
                     
            };
 
            // Event listeners
            playBtn.addEventListener('click', () => {
            const isPlaying = musicContainer.classList.contains('play');
 
            if (isPlaying) {
                pauseSong();
            } else {
                playSong();
            }
            });
 
            // Change song
            prevBtn.addEventListener('click', prevSong);
            nextBtn.addEventListener('click', nextSong);
 
            // Time/song update
            audio.addEventListener('timeupdate', updateProgress);
 
            // Click on progress bar
            progressContainer.addEventListener('click', setProgress);
 
            // Song ends
            audio.addEventListener('ended', nextSong);
 
            // Time of song
            audio.addEventListener('timeupdate',DurTime);
        }
    </script>
</body>
</html>

The songs are .mp3 files whose names are stored in the variable songs[]; Where is the source of the problem? I am kindly asking for an answer.

Regards.

How to publish continuous without blocking main NodeJS app with MQTT.JS

I have the following problem:
I have a Node JS application which should be controlled via Mqtt. It should use the callback function to evaluate messages as to whether the application should start or stop. This already works very well.
However, this application should publish its status every second. However, this should not block the main application. I have already implemented an application that does exactly this in Python. This uses a thread to send the status and does not block the main thread. I need a way to outsource a send state function to a background process.

Since JavaScript only knows single threads, is there a way to enable this?
I’ve already dealt with workers but don’t want to outsource the code to an external file.

thank you

How to integrate google map in react js

I’m using google-maps-react library for maps in my react application, and I’m adding search address functionality in my application and facing CORS error.

error:
enter image description here

Autocomplete.js

import React, { Component } from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px;
  text-align:center;
`;

class AutoComplete extends Component {
    constructor(props) {
        super(props);
        this.clearSearchBox = this.clearSearchBox.bind(this);
    }

    componentDidMount({ map, mapApi } = this.props) {
        const options = {
            // restrict your search to a specific type of result
            types: ['address'],
            // restrict your search to a specific country, or an array of countries
            // componentRestrictions: { country: ['gb', 'us'] },
        };
        this.autoComplete = new mapApi.places.Autocomplete(
            this.searchInput,
            options,
        );
        this.autoComplete.addListener('place_changed', this.onPlaceChanged);
        this.autoComplete.bindTo('bounds', map);
    }

    componentWillUnmount({ mapApi } = this.props) {
        mapApi.event.clearInstanceListeners(this.searchInput);
    }

    onPlaceChanged = ({ map, addplace } = this.props) => {
        const place = this.autoComplete.getPlace();

        if (!place.geometry) return;
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);
        }

        addplace(place);
        this.searchInput.blur();
    };

    clearSearchBox() {
        this.searchInput.value = '';
    }

    render() {
        return (
            <Wrapper>
                <input
                    className="search-input"
                    ref={(ref) => {
                        this.searchInput = ref;
                    }}
                    type="text"
                    onFocus={this.clearSearchBox}
                    placeholder="Enter a location"
                />
            </Wrapper>
        );
    }
}

export default AutoComplete;

MyGoogleMap.js

const MyGoogleMap = () => {
    const [apiReady, setApiReady] = useState(false);
    const [map, setMap] = useState(null);
    const [mapApi, setMapApi] = useState(null);
    const [address, setAddress] = useState();
    const [zoom, setZoom] = useState();
    const [center, setCenter] = useState([]);
    const [lat, setLat] = useState();
    const [lng, setLng] = useState();
    const [places, setPlaces] = useState();
    const [draggable, setDraggable] = useState();

    const setCurrentLocation = () => {
        if ('geolocation' in navigator) {
            navigator.geolocation.getCurrentPosition(position => {
                console.log('position.coords: ', position.coords.longitude);
                console.log("[position.coords.latitude, position.coords.longitude]: ", [position.coords.latitude, position.coords.longitude])
                setCenter([position.coords.latitude, position.coords.longitude]);
                setLat(position.coords.latitude);
                setLng(position.coords.longitude);
            });
        }
    };

    useEffect(() => {
        setCurrentLocation();
    }, []);

    const handleApiLoaded = (map, maps) => {
        console.log('map, maps: ', map, maps);
        // use map and maps objects
        if (map && maps) {
            setApiReady(true);
            setMap(map);
            setMapApi(maps);
        }
    };
    const _generateAddress = () => {
        const geocoder = new mapApi.Geocoder();

        geocoder.geocode({ location: { lat: lat, lng: lng } }, (results, status) => {
            console.log(results);
            console.log(status);
            if (status === 'OK') {
                if (results[0]) {
                    setZoom(12);
                    setAddress(results[0].formatted_address);
                } else {
                    window.alert('No results found');
                }
            } else {
                window.alert('Geocoder failed due to: ' + status);
            }
        });
    };

    const onMarkerInteraction = (childKey, childProps, mouse) => {
        setDraggable(true);
        setLat(mouse.lat);
        setLng(mouse.lng);
    };

    const onMarkerInteractionMouseUp = (childKey, childProps, mouse) => {
        setDraggable(true);
        _generateAddress();
    };

    const _onChange = ({ center, zoom }) => {
        setZoom(zoom);
        setCenter(center);
    };

    const _onClick = value => {
        setLat(value.lat);
        setLng(value.lng);
    };

    const addPlace = place => {
        setPlaces([place]);
        setLat(place.geometry.location.lat());
        setLng(place.geometry.location.lng());
        _generateAddress();
    };

    return (
        <div style={{ height: '442px', width: '100%' }}>
            {apiReady && <Autocomplete map={map} mapApi={mapApi} addplace={addPlace} />}
            <GoogleMapReact
                zoom={4}
                center={center}
                bootstrapURLKeys={{
                    key: 'API_KEY',
                    libraries: ['places', 'geometry'],
                }}
                yesIWantToUseGoogleMapApiInternals
                onGoogleApiLoaded={({ map, maps }) =>
                    handleApiLoaded(map, maps)
                }
            ></GoogleMapReact>
        </div>
    );
}

I’m following this article to integrate Google Maps with search

How to pass datetime from client(browser) to server

I want to pass datetime from client to server. I prefer to pass in ISO format using .toISOString() method. The challenge is while passing datetime(Javascript) to server, if I used C# DateTime then it tries to convert datetime in local datetime. So to get it as in UTC I am using DateTimeOffset. But by this I am not able to get exactly what was client’s offset.

In format I should pass datetime to server so I can retain offset of client or should I pass it separately?

How to draw High-Precision-Numbers in chartjs

My number precision is about 0.000001,

And the value range,
let’s take between 0.01 and 0.02,

it means the value of datasets are such as

[0.010005
,0.011111
,0.012222
,0.013333
,0.014444
,0.015555
,0.016666
,0.017777
,0.019888
,0.019999
];

when I plot with the datasets,
and then hover to point,
all of them show with precision of 0.001,
looks like all value run with ().toFixed(3),

but I want to show the real original value,
or better precision such as 0.000001

Is there any way to set float precision in chartjs?

MaterialUI SnackBar with Transition doesn’t work completely with Functional Component

I am using MaterialUi Snackbar with Slide transition.
Expected Behaviour: Snackbar should slide in the provided direction and retreat on close.

This code is working.
Here’s the code:

import React, { useEffect, useState } from "react";
import Snackbar from "@mui/material/Snackbar";
import Slide from "@mui/material/Slide";
import Alert from "@mui/material/Alert";

const Transition = (newprops) => {
  console.log("CustomMUISnackBar Transition props: ", newprops);
  return <Slide {...newprops} direction="up" />;
};

function CustomMUISnackBar(props) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    setOpen(props.open);
  }, [props.open]);

  return (
    <Snackbar
      autoHideDuration={1000}
      TransitionComponent={Transition}
      anchorOrigin={{ vertical: "top", horizontal: "center" }}
      open={open}
      onClose={() => {
        setOpen(false);
        props.onClose();
      }}
      key="Slide"
    >
      <Alert
        onClose={() => {
          setOpen(false);
          props.onClose();
        }}
        severity="success"
        sx={{ width: "100%" }}
      >
        <i style={{ color: "blue" }}>{props.updatedUserName}</i>'s details
        updated!
      </Alert>
    </Snackbar>
  );
}

export default CustomMUISnackBar;

But if I place Transition function inside the functional component’s body then only the first part of the Slide works as in it shows the snackbar opening with sliding but disappears without sliding.

function CustomMUISnackBar(props) {
  const [open, setOpen] = useState(false);
  const Transition = (newprops) => {
    console.log("CustomMUISnackBar Transition props: ", newprops);
    return <Slide {...newprops} direction="up" />;
  };

  return ();
}

export default CustomMUISnackBar;

It only happens when I use the Snackbar in a separate Component.js and then use it somewhere. If I use it directly it works whether I place the Transition function inside the component or outside it.
Below code works for both buttons:

import React, { useState } from "react";
import Snackbar from "@mui/material/Snackbar";
import Slide from "@mui/material/Slide";
import Alert from "@mui/material/Alert";

const OutsideTransition = (tprops) => {
  console.log("Outside Transition props: ", tprops);
  return <Slide {...tprops} direction="up" />;
};

function CustomMUISnackBar(props) {
  const [state, setState] = useState({
    open: false,
    transition: undefined
  });
  const InsideTransition = (tprops) => {
    console.log("Outside Transition props: ", tprops);
    return <Slide {...tprops} direction="up" />;
  };
  return (
    <div>
      <Snackbar
        autoHideDuration={1000}
        TransitionComponent={state.transition}
        anchorOrigin={{ vertical: "top", horizontal: "center" }}
        open={state.open}
        onClose={() => setState({ ...state, open: false })}
        key={state.transition?.name}
      >
        <Alert
          onClose={() => setState({ ...state, open: false })}
          severity="success"
        >
          <i style={{ color: "blue" }}>"Update Success!"</i>'s details updated!
        </Alert>
      </Snackbar>
      <button
        onClick={() => setState({ open: true, transition: OutsideTransition })}
      >
        SanckBar OutsideTransition
      </button>
      <button
        onClick={() => setState({ open: true, transition: InsideTransition })}
      >
        SanckBar InsideTransition
      </button>
    </div>
  );
}
export default CustomMUISnackBar;

If I use class Component in a separate component.js file, then also it works as expected.

This code works:

import React, { useEffect, useState } from "react";
import Snackbar from "@mui/material/Snackbar";
import Slide from "@mui/material/Slide";
import Alert from "@mui/material/Alert";

const Transition = (newprops) => {
  console.log("CustomMUISnackBar Transition props: ", newprops);
  return <Slide {...newprops} direction="up" />;
};

class CustomMUISnackBarClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { open: props.open };
  }
  TransitionMethod = (newprops) => {
    console.log("CustomMUISnackBar Transition props: ", newprops);
    return <Slide {...newprops} direction="up" />;
  };
  render() {
    return (
      <Snackbar
        autoHideDuration={1000}
        TransitionComponent={this.TransitionMethod}
        anchorOrigin={{ vertical: "top", horizontal: "center" }}
        open={this.state.open}
        onClose={() => {
          this.setState({ open: false });
          this.props.onClose();
        }}
        key="Slide"
      >
        <Alert
          onClose={() => {
            this.setState({ open: false });
            this.props.onClose();
          }}
          severity="success"
          sx={{ width: "100%" }}
        >
          <i style={{ color: "blue" }}>{this.props.updatedUserName}</i>'s
          details updated!
        </Alert>
      </Snackbar>
    );
  }
}

export default CustomMUISnackBarClass;

Above code works even if TransitionComponent={this.TransitionMethod} is replaced with TransitionComponent={Transition}.

So, my question is how the functionality is getting differed in functional and class component. What is changing if a function is declared inside a functional component or outside as compared to behaviour when a functional component is defined in a component.js file?

Here’s the code at codesandbox: https://codesandbox.io/s/transitionsnackbar-eillp. Wait for few seconds before clicking on other buttons.

Popup Display once in homepage

Hi i have a popup script for blogger but ,i dont want it again to be apperaed once again when returning to homepage when he seen it before like it should present only once for the user

  <b:if cond='data:blog.url == data:blog.homepageUrl'> 
  <div class='popup-overlay'>
  <div class='popup-container'>
    <div class='popup-close'>+</div>
    <b> <h2 class='popup-title'>Welcome to Free Community!</h2></b>
    <p class='popup-description'>
     Hi,
   Thank you for Visiting up for our Website. We appreciate your interest.
   We will do our best to Bring you More Fun Videos for GTA 5 ,Thank You!
    </p>
   

    </div>
    </div>
    <script>
    const popupOverlay = document.querySelector(&quot;.popup-overlay&quot;);
   const popupClose = document.querySelector(&quot;.popup-close&quot;);

   popupClose.addEventListener(&quot;click&quot;, () =&gt; {
   popupOverlay.style.display = &quot;none&quot;;
    });

   setTimeout(() =&gt; {
   popupOverlay.style.display = &quot;block&quot;;
   }, 3000);
   </script>
   </b:if>

Video is showing but not playing

I am currently importing my mp4 video like this

import CatVideo from '../../../../../assets/videos/placeholder.mp4'

and then displaying it like this

   <RightContainer>
            <Video src={CatVideo} width="100%" height="100%" controls>
                <source src={CatVideo} type="video/mp4" />
            </Video>
   </RightContainer>

I can see my video in the page and can fast forward. When I click the play button the active state changes but the video does not play and remains on the part you have fast forwarded to.

moving images with their containers

This one is hard for me, so I need your opinion (idea).

I have on an HTML page multiple images let’s say 20 and all images are in their containers (DIV). When the user needs to change their order, in TinyMCE editor, it’s not possible. If the user drags an image he will move it outside of its parent DIV. Is it possible to somehow move the parent DIV with the image too? I mean when the user selects an image and starts dragging it over TinyMCE editor that he actually drags and parent DIV too with that image.

Map function in react Hooks

In my react project am try get a static data from the array to my table using map function but after try to use each data as favorite but my hole data table is choose automatically but am need on data of the table Can any one help solve my issue?
[enter image description here][1]

inserting data into mongodb using node js

I am on a computing course and have an issue trying to insert data into mongodb. we are using visual studio code and node js. When i post data using postman i dont get any return result and no data gets inserted into db. I have literally gone over the code a hundred times and the lecturer has even given me his code which mine matches. yet his gets a result and mine doesnt. we cannot go into university atm and i just cant get help online so have come here! can someone advise what is going wrong pls?

Here is my code:
app.js

const express = require('express')
const app = express()

const mongoose =require('mongoose')
require('dotenv/config')

const bodyParser = require('body-parser')
const postsRoute = require('./routes/posts')

app.use(bodyParser.json())
app.use('/posts',postsRoute)

app.get('/', (req,res) =>{
    res.send('Homepage')
})

mongoose.connect(process.env.DB_CONNECTOR, ()=>{
    console.log('DB is now connected!')
})

app.listen(3000, ()=>{
    console.log('Server is up and running...')
})

posts.js (Sits in the routes folder:

const express =require('express')
const router = express.Router()

const Post = require('../models/Post')

// POST (Create data)
router.post('/',async(req,res)=>{
    //console.log(req.body)

    const postData = new Post({
        user:req.body.user,
        title:req.body.title,
        text:req.body.text,
        hashtag:req.body.hashtag,
        location:req.body.location,
        url:req.body.url
    })
    // try to insert...
    try{
        const postToSave = await postData.save()
        res.send(postToSave)
    }catch(err){
        res.send({message:err})
    }
})

// GET 1 (Read all)
router.get('/', async(req,res) =>{
    try{
        const getPosts = await Post.find().limit(10)
        res.send(getPosts)
    }catch(err){
        res.send({message:err})
    }
})

// GET 2 (Read by ID)
router.get('/:postId', async(req,res) =>{
    try{
        const getPostById = await Post.findById(req.params.postId)
        res.send(getPostById)
    }catch(err){
        res.send({message:err})
    }
})

// PATCH (Update)
router.patch('/:postId', async(req,res) =>{
    try{
        const updatePostById = await Post.updateOne(
            {_id:req.params.postId},
            {$set:{
                user:req.body.user,
                title:req.body.title,
                text:req.body.text,
                hashtag:req.body.hashtag,
                location:req.body.location,
                url:req.body.url
                }
            })
        res.send(updatePostById)
    }catch(err){
        res.send({message:err})
    }
})

// DELETE (Delete)
router.delete('/:postId',async(req,res)=>{
    try{
        const deletePostById = await Post.deleteOne({_id:req.params.postId})
        res.send(deletePostById)
    }catch(err){
        res.send({message:err})
    }
})

module.exports = router

Post.js (data model) sits in the models folder:

const mongoose = require('mongoose')

const PostSchema = mongoose.Schema({
    user:{
        type:String,
        required:true
    },
    title:{
        type:String,
        required:true
    },
    text:{
        type:String,
        required:true
    },
    hashtag:{
        type:String,
        required:true
    },
    location:{
        type:String,
        required:true
    },
    url:{
        type:String,
        required:true
    },
    date:{
        type:Date,
        default:Date.now
    }
})

module.exports = mongoose.model('posts',PostSchema)

Here is the data format I am putting into postman :

{
“user”: “Safi”,
“title”: “mr”,
“text”: “Hello, this is my first message”,
“hashtag”: “#VideoGames”,
“location”: “london”,
“url”: “htpps://safi.com”
}

I am meant to get a response on postman with the data and a unique id. however nothing is returned and nothing is inserted into mongodb.

a JSON package is definitely being created as (even though it is commented out) I have a line //console.log(req.body) that when I “uncomment” it the terminal on VS shows the JSON data.

I have tried on another pc and get the same issue.

Why can’t slack activate the google apps script?

So I am trying to create a Slack app that asks users to choose from two options let say option 1 and option 2. Now sending the options is going fine however if the button is pressed there is no response from slack to the google apps script I am using.

const options = {
    "method": "post",
    "charset" : 'UTF-8',
    "contentType": "application/json",
    "payload": JSON.stringify({
    token: auth,
    channel: channel,
    as_user: true,
    "text": text,
    attachments: [
    {
        "fallback" : "This did not work.",
        "callback_id": randomId,
        "attachment_type": "default",
        "actions": [
                {
                    "name": "ButtionOption1",
                    "text": "Option 1",
                    "type": "button",
                    "value": "Option1"
                }, 
                 {
                    "name": "ButtionOption2",
                    "text": "Option 2",
                    "type": "button",
                    "value": "Option2"
                }
              ]
    }
  ]
  })};
  options.headers = { "Authorization": "Bearer " + auth }
  var response = JSON.parse(UrlFetchApp.fetch(url, options));
  console.log(response)

However when I try to respond there is just a nothing. I can see that the script is also not called.

My doPost(e) function looks like:

function doPost(e) {
  console.log("Started and writing reaction")
  var e_payload = e.parameter.payload;
  var parsed_payload = (e_payload !== undefined) ? JSON.parse(e_payload) : null;
  console.log(parsed_payload)

  try {
    if (parsed_payload != null && parsed_payload.type == "url_verification") {
      console.log("Verify the Challenge")
      var v = JSON.parse(e.postData.contents); 
      return ContentService.createTextOutput(v.challenge); 
    }
  } catch (e) {
  }

If I try to let Slack enable events there is also no response if I want to verify. There appears an error saying:

Your URL didn’t respond with the value of the challenge parameter.

However I can see the script did not run in the logs.

Text doesn’t break in special case

I have a problem that the text doesn’t break in a popup made with Vue.js which is included in the header like this:

enter image description here

The text breaks normally if I include the popup into the main screen, but doesn’t if I include it into the header. I have also drawn border around the <p> element which contains the text and the border is drawn correctly.

Here is the sample code: https://codesandbox.io/s/cold-feather-3zi3d?file=/src/components/BasicModal.vue

Components are accessable via console on production?

I recently deployed a website for a friend of mine, written in react, express, mongodb, etc…
And I can see that I have a console.log on one of the components and wanted to ask if that’s normal that a component is accessable via a console.log? (I can access the source code because of that).

And is there a solution for that or just removing ALL console.log before production?

Thank you very much, God bless.