Category: javascript

I have two chat message arrays, each representing messages for a given date. I must merge these two arrays into a single object with the same date format. The object should contain all messages from both arrays, with the messages for each date merged.

Here is the data:

const data1 = {
  messages: {
    "27-04-2023": [
      {
        id: "SOkXFGtTwh",
      },
      {
        id: "i3NrqNyG9P",
      },
      {
        id: "lCmxr4rc5T",
      },
    ]
  }
};

const data2 = {
  messages: {
    "27-04-2023": [
      {
        id: "V9QzRgl6ji",
      },
      {
        id: "K5wfD-kX8W",
      }
    ],
    "24-04-2023": [
      {
        id: "tuarzhHPwH",
      },
      {
        id: "cbxu_dAeAj",
      },
      {
        id: "9xJpEJGUnm",
      }
    ]
  },
};

How to merge them to get the following output?

const data1 = {
  messages: {
    "27-04-2023": [
      {
        id: "SOkXFGtTwh"
      },
      {
        id: "i3NrqNyG9P"
      },
      {
        id: "lCmxr4rc5T"
      },
      {
        id: "V9QzRgl6ji"
      },
      {
        id: "K5wfD-kX8W"
      }
    ],

    "24-04-2023": [
      {
        id: "tuarzhHPwH"
      },
      {
        id: "cbxu_dAeAj"
      },
      {
        id: "9xJpEJGUnm"
      }
    ]
  }
};

What would be the best way to perform such task?

I dont why I keep getting this error and I cant trace the constraint that I am violating.
My two tables are Token and User and as you can see from the code below, they linked together through userId

TOKEN TABLE

Token.init(
        {
            id: {
                type: DataTypes.UUID,
                defaultValue: DataTypes.UUIDV4,
                primaryKey: true,
            },
            userId: {
                type: DataTypes.UUID,
            },
            refreshToken: {
                type: DataTypes.TEXT,
            },
            createdAt: {
                type: DataTypes.DATE,
                defaultValue: Date.now(),
            },
            updatedAt: {
                type: DataTypes.DATE,
                defaultValue: Date.now(),
            },
        },
        {
            sequelize,
            modelName: 'token',
        }
    );

USER TABLE

User.init(
        {
            id: {
                type: DataTypes.UUID,
                defaultValue: DataTypes.UUIDV4,
                unique: true,
                primaryKey: true,
            },
            username: {
                type: STRING,
                allowNull: false,
            },
            email: {
                type: STRING,
                allowNull: false,
            },
            password: {
                type: STRING,
                allowNull: false,
            },
            inactive: {
                type: BOOLEAN,
                defaultValue: true,
            },
            activationToken: {
                type: STRING,
            },
            passwordResetToken: {
                type: STRING,
            },
            image: {
                type: STRING,
            },
            createdAt: {
                type: DataTypes.DATE,
                defaultValue: Date.now(),
            },
            updatedAt: {
                type: DataTypes.DATE,
                defaultValue: Date.now(),
            },
        },
        {
            sequelize,
            modelName: 'user',
        }
    );

RELATIONSHIP

    User.hasMany(Token, { foreignKey: 'userId' });
    Token.belongsTo(User);

Could you please help me with the code below?
When the popup opens I want the body to blurred or grey transparent with less opacity.

`$(function() {

// contact form animations
$('#contact').click(function() {
  $('#contactForm').fadeToggle();
 
})
$(document).mouseup(function (e) {
  var container = $("#contactForm");

  if (!container.is(e.target) // if the target of the click isn't the container...
      && container.has(e.target).length === 0) // ... nor a descendant of the container

  {
      container.fadeOut();
  }
});

});`

I tried to add $(“body”).css(“opacity”,”0.25″); to change only the opacity, but the form is also changed…

I am currently coding a web app in React that fetches data from an API. I am trying to display the timestamp data in a user-friendly format by converting it to a new date using the toLocaleString function.

I notice that there is a two-hour difference between the timestamp and the displayed time. Sometimes, there is only a one-hour difference.

but look what happens when I console.log this:

console.log(new Date(tData).toLocaleString("fr-FR") + " --- " + tData)

26/04/2023 14:22:22 --- 2023-04-26T12:22:22.985+00:00

We have a component made in StencilJS which has a Prop() that is being set by the parent that uses it and we want the UI to be updated every time the parent changes this Prop(), because depending on the value of this prop the UI will be different.

@Prop()
public field!: Field;

The problem is that our Prop is a complex object (Field) and we are not changing the prop entirely from the parent, we are just changing a property inside this object.

The type of the Prop() looks like this, and we are changing the properties required and readOnly.:

export interface Field {
    id: string;
    required: boolean;
    readOnly: boolean;
}

We tried different things to make this work:

We created states and linked them to the properties we want to be updated:

    @State()
    private readOnly: boolean = this.field.readOnly;

    @State()
    private required: boolean = this.field.required;

We tried also with Watch() but it was not called when the Prop changed:

    @Watch('field')
    watchFieldChange(newValue: Field) {
        this.readOnly = newValue.readOnly;
        this.required = newValue.required;
    }

And finally we tried using mutable and reflect on the Prop() and reassigning the entire value on the parent:

    @Prop({mutable: true, reflect: true})
    public field!: Field;
    component.field.required = !component.field.required;
    component.field.readOnly = !component.field.readOnly;
        
    component.field = { ...component.field};

This final workaround worked in our project context but our stencil project works as a library so when we tried importing this library in another project and use the workaround it didn’t work.

We have no idea how to fix this without having to use separate Props for each variable we want to be updated in the view. If anyone has any idea or has faced this before and knows a workaround to make this work please let us know!

I have posted the same problem here in ionic Forums but nobody answered (so if you prefer you can answer there instead, as you wish): https://forum.ionicframework.com/t/how-to-refresh-ui-when-parent-changes-a-property-inside-a-prop/232993/1

Thank you so much!

My code does not show in the x axis the timestamp data in the firebase
Instead of showing the timestamp in the firebase which is 11:27:47, it shows 8:00:00

This is my code in array:

if (is_array($data)) {
    foreach ($data as $user) {
        $dataPointsx[] = array("x" => $user['Timestamp'], "y" => $user['Luminosity']);
        array_push($dataPointsy, array("y" => $user['Luminosity']));
    }
}

While this is the graph:

window.onload = function() {


var dataPointsy= <?php echo json_encode($dataPointsy); ?>;
var dataPointsx= <?php echo json_encode($dataPointsx); ?>;
 
var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title: {
        text: "Luminosity"
    },
    axisX:{
    title: "Timestamp",
    valueFormatString: "HH:mm:ss",
    labelFormatter: function(e){
        return new Date(e.value).toLocaleTimeString();

    },
    interval: 1
},
    axisY:{

        suffix: " Luminosity"
    },
    data: [{
    type: "line",
    toolTipContent: "{y} L⊙ {x}",
    dataPoints: dataPointsy,
}]
});
chart.render();
}

I would like to run and debug a simple (plain) Javascript I created over the Ctrl + Shift + Alt + Insert shortcut in my IntelliJ Idea Ultimate.

I’d like to prevent to have to implement any boilerplate like a HTML file or npm project.

What is the easiest way to do it? Am I just overlooking any obvious feature?

I searched for a run feature similar to the Java launch configuration and tried it over a plain node project using npm init --yes and npm run in the same folder, but to no avail.

Please someone can help me, how to set a name of file in printing dialog of browser?

I use Mozilla PDF.js version v3.5.141

PDF files is send to default viewer.html as base64.

I can change title in browser with function, after creating objects:

setTimeout(() => { // Wait for PDFViewerApplication object to exist PDFViewerApplication.setTitleUsingUrl(name_of_pdf_file); }, 1000);

Thats work fine.

But when user click on print button, and for example change print to PDF, then always default name is:

“PDF.js viewer.pdf”

Many thx for advice for all

I’m doing a task which converting docx to html and the Mammoth library works well. However, I want to convert doc file to html but Mammoth doesn’t support it. I tried to convert doc to docx using docx library but it didn’t work
Here is the code that I tried

const docBuffer = await file.arrayBuffer();
const docString = new TextDecoder("utf-8").decode(docBuffer);

The result of docString is ��ࡱ� which is not what I’m expecting.
How can I get the string of doc file to pass it to the docx.Document method?

const docxFile = new docx.Document({
                                    sections: [
                                        {
                                            properties: {},
                                            children: [
                                                new docx.Paragraph({
                                                    children: [
                                                        new docx.TextRun({
                                                            text: "sadas" //here
                                                        })
                                                    ]
                                                })
                                            ]
                                        }
                                    ]
                                });

None of the “Similar quiestons” helped me

I have a button that I need to disable once it was clicked:

<button class="button" type="submit" id="saveButton" hidden="hidden" style="display:none">submit</button>
<input onclick="validator()" id="handleSaveButton" class="button" type="button" value="my button value">

Here’s how I do it:

function validator(){
    $(".buttons :input[value:'my button value']").prop("disabled",true)
    ...
    //something else goes here
    ...
    document.getElementById("saveButton").click();
}

Now this works but my page also has required fields. And if those aren’t filled, you have to refresh the whole page to make save button available again.

I’m looking for a solution to

• Make my button disabled once clicked
• Make it endabled again if required fields are not filled

Thanks. Please note that I cannot change the structure with hidden submit and actual button

I have been trying to get my 3D earth to work properly, every time I refresh the page it zooms in even after I set enableZoom to false.

When I add Stars into the mix, it won’t allow me to adjust earth at all – zooming in or out.

I have tried rearranging stars and canvas component hoping it would make a difference but so far no matter what I do, Earth and Star components won’t budge. I thought it could be a z-index issue but it did nothing.

import React from "react";
import styled from "styled-components";
import Navbar from "./Navbar";
import Earth from "./Earth";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Stars } from "@react-three/drei";




const Section = styled.div`
  height: 100vh;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  justify-content: space-between;

  @media only screen and (max-width: 768px) {
    height: 200vh;
  }
`;

const Container = styled.div`
  height: 100%;
  scroll-snap-align: center;
  width: 1400px;
  display: flex;
  justify-content: space-between;

  @media only screen and (max-width: 768px) {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
`;

const Left = styled.div`
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  margin-left: 70px;
  align-items: center;
  justify-content: center;

  @media only screen and (max-width: 768px) {
    flex: 1;
    align-items: center;
  }
`;

const Title = styled.h1`
  font-size: 74px;
  color: white;
  line-height: 0.7;

  @media only screen and (max-width: 768px) {
    text-align: center;
  }
`;

const WhatWeDo = styled.div`
  display: flex;
  align-items: center;
  gap: 10px;
`;


const Subtitle = styled.h2`
  color: #da4ea2;
`;

const Desc = styled.p`
  font-size: 24px;
  color: lightgray;
  line-height: 1.3;
  text-align: center;

  @media only screen and (max-width: 768px) {
    padding: 20px;
    text-align: center;
  }
`;

const Button = styled.button`
  background-color: #da4ea2;
  color: white;
  font-weight: 500;
  width: 100px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;


const Right = styled.div`
  flex: 3;
  position: relative;
  @media only screen and (max-width: 768px) {
    flex: 1;
    width: 100%;
  }

`;

const CanvasContainer = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
`;


const EarthCanvas = styled.div`
  flex: 2;
  width: 800px;
  height: 600px;
  object-fit: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

  @media only screen and (max-width: 768px) {
    width: 300px;
    height: 300px;
  }
`;



const Hero=()=> {
  return (

    <>
     <CanvasContainer>
      <Canvas >
          <Stars />
          <OrbitControls enableZoom={false} />
        </Canvas>
     </CanvasContainer>


    <Section id='hero'>
      <Navbar />
      <Container>
        <Left>
          <Title></Title>
          <WhatWeDo>
            <Subtitle>Software Developer</Subtitle>
          </WhatWeDo>
          <Desc>
          </Desc>
          <Button onClick={() => pageSelect('#Contact')}>Contact Me</Button>
        </Left>


        <Right>
          <EarthCanvas>
            <Canvas>
                <OrbitControls enableZoom={false} autoRotate={true} autorotateSpeed={2.0} />
                <ambientLight intensity={0.5} />
                <pointLight position={[10, 5, 10]} />
                <Earth />
            </Canvas>
          </EarthCanvas>
        </Right>
      </Container>
    </Section>
  </>
  );
};


export default Hero;

I want a button in gmail that when you select an email, you can click a button and it will automatically forward the email to “[email protected]” or so. The email address with be assigned in the script. How would I go about making this?

The Google App Script is a bit confusing to me and I’m not sure how to test any scripts I have tried.

I’m having a map method and expecting it to return a new array. And I’m having an error “Property ‘id’ does not exist on type ‘never'” . I think it’s because I didn’t type the map method variables. How can I do it ?

type Props = {
  authors: [];
  onFinish: () => {};
};

    const NewTask: FC<Props> = ({ authors, onFinish }) => {
    return (
      <select
        onChange={(e) => setAuthor(e.target.value)}
        defaultValue="select"
      >
        <option value="select" disabled>
          Select Author
        </option>
        {authors.map((author) => (
          <option key={author.id} value={author.author_name}>            // author keys are error sublimed
            {author.author_name}
          </option>
        ))}
      </select>
      )
    }

Receive all values through one parameter of props.

const props = defineProps({
    customSearchConfig: {
      type: Object,
      default: () => ({})
    }
  })

  const backgroundColor = computed(() => {
    return props.customSearchConfig.backgroundColor
  })

separate use

const props = defineProps({
    placeholder: {
      type: String,
      default: '请输入'
    },
    backgroundColor: {
      type: String,
      default: '#f4f5f7'
    }
  })

I saw the usage of “computed” in someone else’s code, but I don’t understand the advantages of doing so.Because I don’t know what parameters the current component needs, I have to look at the documentation for all of them.

Which of the above two methods is better, what are the advantages and disadvantages, and which one do you all use?

I have a button that toggles my background, how would i be able to save the opacity of the background so you dont have to push the button to disable/enable it every time you load the a new page/refresh the page.

<div id="bg" style="transition: all 0.2s ease-in-out;" class="bg"></div>
<button class="bg-toggle" id="test-button">
    </button>

    <button class="bg-toggle" style="background-color: red; left: 95%;" id="test-button2">
    </button>
</body>

<script>
    const bg = document.querySelector('#bg');

    console.log(bg.style);
    bg.style.opacity = '100%';

    const testBtn = document.querySelector('#test-button');
    const testBtn2 = document.querySelector('#test-button2')

    console.log(testBtn.style);

    testBtn2.style.opacity = '0';
    
    testBtn.addEventListener('click', () => {
        bg.style.opacity = '0%';
        testBtn.style.opacity = '0%';
        testBtn.style.top = '-10000%';
        testBtn2.style.opacity = '100%';
        testBtn2.style.top = '92%';
    });

    testBtn2.addEventListener('click', () => {
        bg.style.opacity = '100%';
        testBtn.style.opacity = '100%';
        testBtn.style.top = '92%';
        testBtn2.style.top = '-10000%';
        testBtn2.style.opacity = '0';
    });
</script>

I have no idea where to start