Getting Internal Server Error (HTTP 500) when Trying to Query Smart Bin by binId in Node.js Application

I’m encountering an issue with my Node.js application, which serves as an API for querying smart bins. I recently updated the route to allow querying by binId instead of id, and I’m now facing an “Internal Server Error” (HTTP 500) when making GET requests.

Here’s what my route and controller look like:

Route (Express.js):

router.get('/:binId', smartBinController.getSmartBinByBinId);

Controller (Node.js):

const getSmartBinByBinId = async (req, res) => {
  try {
    const { binId } = req.params;
    const { binLevel, binOrientation, binLocation, binName } = req.query;

    const smartBin = await SmartBin.getSmartBinByBinId(binId);

    if (!smartBin) {
      return res.status(404).json({ error: 'Smart bin not found' });
    }

    if (binLevel) {
      smartBin.binLevel = binLevel;
    }
    if (binOrientation) {
      smartBin.binOrientation = binOrientation;
    }
    if (binLocation) {
      smartBin.binLocation = binLocation;
    }
    if (binName) {
      smartBin.binName = binName;
    }

    await smartBin.save();

    res.status(200).json({ message: 'Smart bin updated successfully', smartBin });
  } catch (error) {
    console.error('Error updating smart bin:', error);
    res.status(500).json({ error: 'Failed to update smart bin' });
  }
};

Model:

const smartBinSchema = new mongoose.Schema({
  binId: {
    type: String,
    required: true,
    unique: true,
  },
  binLevel: {
    type: Number,
    required: true,
  },
  binOrientation: {
    type: String,
    required: true,
  },
  binLocation: {
    type: String,
    required: true,
  },
  binName: {
    type: String,
    required: true,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
  updatedAt: {
    type: Date,
    default: Date.now,
  },
});


const getSmartBinByBinId = async (binId) => {
  try {
    const smartBin = await SmartBin.findOne({ binId });
    return smartBin;
  } catch (error) {
    throw error;
  }
};

module.exports = {
  getSmartBinByBinId,
};

It’s works well with querying by id:
https://iot-smart-bin.onrender.com/api/smartbin/64a9a7d7fbde3940ba8f132f?binId=bin001&binLevel=90&binOrientation=Upright&binLocation=Kuje%prison&binName=Kuje%Prison.

Querying by binId that’s not working: https://iot-smart-bin.onrender.com/api/smartbin/bin001?binLevel=80&binOrientation=Upright&binLocation=Kuje%prison&binName=Kuje%Prison

Github Link: https://github.com/blcdevs/smart-iot-bin

I’ve checked my server logs, but the error message is not very descriptive. I suspect there might be an issue in my route, controller, or possibly with my MongoDB database. Can anyone help me diagnose and resolve this “Internal Server Error” issue?

Any insights, suggestions, or debugging tips would be greatly appreciated!

How can I use Markdown in JSON on a Quarto website?

I implemented a simple flashcard app for my Quarto website, following a nice YouTube tutorial. The app works, but I want to use Markdown for the flashcard contents (to format LaTeX equations, links etc.).

My current implementation: I store the data for my flashcards in JSON format in the file flashcards.js and naively use Markdown here, but this is not interpreted when I render my Quarto website:

var flashcards = [
  {
    "Q":"**front1** $a^2$ [link](destination.qmd)",
    "A":"back1"
  },
  {
    "Q":"front2",
    "A":"back2"
  },
  {
    "Q":"front3",
    "A":"back3"
  },
]

My .qmd is

---
format: 
  html:
    include-after-body: 
      - text: |
          <script src = "flashcards.js"></script>
          <script src = "reveal.js"></script>
---

<body onload = "getRandomCard()">
<div class = "question"></div>
<div class = "flashcard-button">
<button class = "check">Show solution</button>
<button class = "next">Next Card</button>
</div>
<div class = "answer"></div>
</body>

and the JavaScript to show a new flashcard and reveal the back is inside reveal.js:

const question = document.querySelector('.question');
const answer = document.querySelector('.answer');
const check = document.querySelector('.check');
const next = document.querySelector('.next');
let card = -1;
let solution = false;

function getRandomCard() {
  let random;
  do {
    random = Math.floor(Math.random() * flashcards.length);
  }
  while (card == random);
  card = random;
  question.innerHTML = `${flashcards[card].Q}`
  answer.innerHTML = `${flashcards[card].A}`
}

check.addEventListener('click', function() {
  if (solution) {
    answer.style.display = 'none';
    solution = false;
  } else {
    answer.style.display = 'block';
    solution = true;
  }
});

next.addEventListener('click', function() {
  answer.style.display = 'none';
  solution = false;
  getRandomCard();
});

So my question is: Is it possible (and if yes, how) to use Markdown (for math equations, links) in my file flashcards.js? I feel like I am missing something simple here and hope that someone can point me in the right direction.

Generic typing of callback functions in classes

This is a follow up from my last post Generic types in classes which has been perfectly answered by @jcalz. Since playing around with this solution, I highly doubt my understanding of Typescript in general. I simply can’t get my head around of what is going on and why certain things “are not working”.

However, I recently wanted to know how I could achieve a typed mapping of taskIds to their callback back functions and get a typed result. See here. I have now extended the code to

type Values<T extends string> = {[K in T]: any}
type Results<T extends string, R> = {[K in T]: R}
type Callback<T extends string> = (prev?: any, values?: Values<T>) => any


type Task<
  K extends string,
  V extends Callback<K>
> = {
  taskId: K;
  callback: V;
};


class Taskmanager<
  S extends string,
  const T extends Task<
    S,
    Callback<S>
  >
> {

  private prevTaskId?: T["taskId"];
  private values!: Values<T["taskId"]>;
  private tasks = new Map<T["taskId"], T>


  public constructor(tasks: readonly T[]) {
    tasks.forEach((task) => {
      this.tasks.set(task.taskId, task);
      this.values = {...this.values, [task.taskId]: undefined};
    });
  }


  public run<K extends T["taskId"]>(): {[ID in K]: ReturnType<Extract<T, { taskId: ID }>["callback"]>} {
    let result = {}

    this.tasks.forEach(task => {
      const prev = this.prevTaskId ? this.values[this.prevTaskId] : undefined;
      const res = task.callback(prev, this.values);
      this.values[task.taskId] = res;
      this.prevTaskId = task.taskId;
      result = {...result, [task.taskId]: res};
    })

    // Is there a better way than casting the return type?
    return result as {[ID in K]: ReturnType<Extract<T, { taskId: ID }>["callback"]>};
  }
}

// ---------------
//  TEST
// ---------------
const tm = new Taskmanager([
  {
    taskId: "defineValue",
    callback: (prev, values) => {
      return 1;
    },
  },
  {
    taskId: "usePrev",
    callback: (prev) => {
      return "hello " + prev;
    },
  },
  {
    taskId: "useValue",
    callback: (prev, values) => {
      // How could I achieve type hints for `values`? Currently values: { [x: string]: any }
      // eg. values?.defineValue or values?.useValue
      // Since I have return types from the callback functions, could I also infer those? E.g. typeof values?.useValue === 'object' --> true
      return {
        prev: prev,
        usePrevVal: values?.usePrev
      }
    },
  }
]);

const results = tm.run();
// results → { defineValue: number, usePrev: string, useValue: { prev: any, useDefineVal: any } } --> this is perfect!

console.log("Results", results)
// LOG → "Results", { "defineValue": 1, "usePrev": "hello 1",  useValue: { "prev": "hello 1", "useDefineVal": 1 }} --> works as intended

Here’s a link to TS Playground

How could I get type hints for the callback values parameter? Preferably including the return type of the associated callback but having the taskIds as keys would already be good enough.

Thanks!

Swiper Coverflow Alignment Issues in React

I am implementing a coverflow effect in my carousel using swiper library. But its not working the way i need.

Here’s what i get:
enter image description here

but I need like this
enter image description here

Code I tried:

import React, { useRef } from "react";
import { EffectCoverflow } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

export default function App() {
  const swiperRef = useRef(null);

  const goNext = () => {
    if (swiperRef.current && swiperRef.current.swiper) {
      swiperRef.current.swiper.slideNext();
    }
  };

  const goPrev = () => {
    if (swiperRef.current && swiperRef.current.swiper) {
      swiperRef.current.swiper.slidePrev();
    }
  };

  const Box = ({ item }) => {
    return (
      <div style={{ width: "150px", height: "200px", background: "red" }}>
        Slide {item}
      </div>
    );
  };

  return (
    <div>
      <Swiper
        ref={swiperRef}
        modules={[EffectCoverflow]}
        spaceBetween={50}
        slidesPerView={5}
        centeredSlides={true}
        effect={"coverflow"}
        grabCursor={true}
        EffectCoverflow={{
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true
        }}
      >
        {[1, 2, 3, 4, 5, 6, 7, 8].map((item, index) => (
          <SwiperSlide>
            <Box item={item} />
          </SwiperSlide>
        ))}
      </Swiper>
      <button onClick={goPrev}>Previous</button>
      <button onClick={goNext}>Next</button>
    </div>
  );
}

i can change slidesPerView={5}. It comes like this
enter image description here

I made auto to adapt to screen sizes

File System API – Adding text instead of replacing

Say I have a text file with the following content:

AAA
BBB
CCC

And I want to use the File System API to insert a new row in this file, in order to get the following:

AAA
XXX
BBB
CCC

For that I have the following code:

const [fileHandle] = await window.showOpenFilePicker()

const writable = await fileHandle.createWritable({ keepExistingData: true })
await writable.write({
  type: "write",
  position: 4,
  data: "XXX",
})
await writable.close()

However the result is the following:

AAA
XXX
CCC

Is there a way to achieve this without loading the whole content of the file in memory and then overwriting?

Facing problems in aligning horizontal scrolling website

I have build a horizontal scrolling website. live link.

NOTE: “THE WEBSITE ISN’T RESPONSIVE YET”

how to replicate the issue:
(you might be able to see a thin white line at the bottom of the home screen as well)

  1. open dev tools, there will be a white space on the top part of the website.
  2. also by resizing width in dev tools, you can see the website behaves very strangely

basic idea of How i got till here:

  1. rotated the outer wrapper div by 90deg anti-clockwise.
  2. rotated to inner-wrapper div by 90deg clockwise.

here is the code of this part of the website which contains all of the horizontal scroll logic. But if you need the complete website code i can add that as well. website is only using react no other library or framework


import React from "react";
import "./App.css"
import Intro from "./pages/Intro";
import LandingPage from "./pages/LandingPage";
import Skills from "./pages/Skills";

function App() {
  return (
    <div className="outer-wrapper">
      <div className="wrapper">

      <section className="first">
        <LandingPage />
      </section>
      <section className="second">
        <Skills />
      </section>
      <section className="third">
        <Intro />
      </section>
      <section className="fourth">
        <Intro />
      </section>
      </div>
    </div>
  );
}

export default App;

*{
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}
::-webkit-scrollbar{
  display: none;
/* overflow:-moz-hidden-unscrollable */
}
.outer-wrapper{
  /* padding: 10%; */
  height: 100vw;
  background-color: black;
  transform: rotate(-90deg) translateX(-59rem);
  transform-origin: top left;
  width: 100vh;

  overflow-y: scroll;
  overflow-x: hidden;
  
}
.outer-wrapper::-webkit-scrollbar{
  /* display: none; */
  overflow: hidden;
}
.wrapper{
  height: 100vh;
  width: 400vw;
  display: flex;
  transform: rotate(90deg) translateY(-59rem);
  transform-origin: top left;
}


section{
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.first{
  background-color: #ebe8e0 ;
}
.second{
  background-color: #ebe8e0;
}
.third{
  background-color: silver;
  /* transform: rotate(-90deg); */
  /* transform-origin: top left; */
}
.fourth{
  background-color: mediumaquamarine;
}

I was trying to build a horizontal scrolling portfolio to get my first job. I tried increasing/decreasing the translate values but the alignment is still not matching properly.

how to add vlc media player into your html website

I’m facing an issue where I’d like to integrate VLC media player into my website due to its numerous features that surpass other players. However, I’m unsure about the process of adding it. I would greatly appreciate your assistance in guiding me through the step-by-step procedure. Thank you for your help.”

“I attempted to add it in a certain manner, but I encountered difficulties because I’ve never encountered the challenge of integrating VLC media player into my website before.”

zola ssg dark/light dynamic svg icons

On my Zola based site using serene theme, there are icons on the front page top right. They are supplied by the theme and change dynamically for dark/light modes.

I want to introduce a new icon (donate/heart shape) that has this dual colour functionality. According to the theme docs the icon set comes from https://remixicon.com/.

When I downloaded SVG files from there myself the icon was statically black colour.

Creating a resulting set of numbers which is “filled” to fit a certain width based on the input set

I’m trying to figure out a way to “fill” an array of audio meters to to fit a certain width. For instance, if I say that I need the resulting array to have 12 elements, then,

const input = [ -160, -140, -100, -80 ]

would become

const result = [ -160, -160, -160, -140, -140, -140, -100, -100, -100, -80, -80, -80, ]

Likewise, if the input has more than 12 elements, for instance:

// 20 elements
const input = [ -160, -160, -160, -140, -140, -140, -100, -100, -100, -80, -80, -80, -80, -80, -80, -80, -80, -80, -80, -80, ]

then here we know that each meter value represents 1.67 bars (20 elements / 12 required width contraint), so the result should be something like this:

const result = [ -160, -160, -140, -140, -100, -80, -80, -80, -80, -80, -80, -80, ]

Here’s my attempt at the following:

const MAX_BARS_FOR_AMPLITUDE = 12;
const metersPerBar = input.length / MAX_BARS_FOR_AMPLITUDE;
const barsPerMeter = 1 / metersPerBar;

const { result } = input.reduce(
    (
        acc,
        meter,
    ) => {
        if (barsPerMeter < 1) {
            if (acc.chunkAccumulator.chunks < 1) {
                acc.chunkAccumulator.meterValue ||= meter;
                acc.chunkAccumulator.chunks += barsPerMeter;
            } else {
                acc.result.push(acc.chunkAccumulator.meterValue);

                acc.chunkAccumulator.meterValue = 0;
                acc.chunkAccumulator.chunks = 0;
            }
        } else {
            if (acc.chunkAccumulator.chunks < barsPerMeter) {
                acc.chunkAccumulator.meterValue ||= meter;
                acc.chunkAccumulator.chunks += barsPerMeter;
            } else {
                acc.result.push(acc.chunkAccumulator.meterValue);

                acc.chunkAccumulator.meterValue = 0;
                acc.chunkAccumulator.chunks = 0;
            }
        }

        return acc;
    },
    {
        result: [],
        chunkAccumulator: {
            meterValue: 0,
            chunks: 0,
        },
    },
);

I’ve tried fiddling around, but the above solution never returns a resulting array of required length (MAX_BARS_FOR_AMPLITUDE), and I feel like I’m taking the wrong approach altogether. I’m also unsure of how I should be handling the case when, for instance, 1.67 meter values represent 1 whole bar.

The idea here is to draw out an audiowave with an always-set number of bars, regardless of the number of meter values in the input set. For instance, input could be const input = [-20], and this would result in an array of length MAX_BARS_FOR_AMPLITUDE, where each element would be equal to -20. Metering is recorder every 50ms, so this particular input array would represent a 50ms audio recording.

By audiowave, I mean something like this:

img1

What am I doing wrong here or is there a better way to handle this altogether?

Is array.forEach(callback) with async/await inside each iteration asynchronous?

I am working with react and I have the following code:

    const [avatarURLs, setAvatarURLs] = useState({});
    const [currentTutorProfile, setCurrentTutorProfile] = useState({});
    const [avatarURLsLoaded, setAvatarURLsLoaded] = useState(false); // New state

    useEffect(() => {
        const avatarObject = {};
        const fetchAvatar = async (tutorProfile) => {
            try {
                if (tutorProfile) {
                    const response = await axios.get(
                        `${process.env.REACT_APP_BASE_URL}/users/${tutorProfile.owner}/avatar`,
                        { responseType: "arraybuffer" }
                    );
                    const blob = new Blob([response.data], {
                        type: "image/png",
                    });
                    const imageUrl = URL.createObjectURL(blob);

                    avatarObject[tutorProfile.owner] = "imageUrl";
                }
            } catch (error) {
                // console.error("Error fetching user avatar:", error);
            }
        };
        tutorProfilesArray.forEach(fetchAvatar);
        console.log(avatarObject); // THIS ONE

        setAvatarURLs(avatarObject);
        setAvatarURLsLoaded(true); // Mark that avatarURLs are loaded
    }, [tutorProfilesArray]);

I have a console.log(avatarObject) // THIS ONE, line that tests the avatarObject and I get empty objects and then the objects values get filled after some time.

empty objects then filled after some time

I noticed that this behavior was only present when the api call is used with await (ex: await axios.get()). When the api call is used without the await (ex: axios.get()), the avatarObject was updated immediately. So here are what I don’t understand; Since await is used, shouldn’t the line be executed in a sequential (synchronous) way even the api calls are done?

This is my side project that I have been working on for months and I have been struggling to solve this issue for a week and could not figure out why and how to fix this issue. If this happens to be something you might know the solution to, I would greatly appreciate if I could hear some explanations.

Thank you

What I was trying was this: loop over an array and fetch profile picture for each element of the array and using an object store it to a react useState variable.

Problem: It did store profile pictures to the useState variable but, it was done after some time (I assume) so that when the frontend gets rendered initially, it does not see any profile pictures so it renders no profile pictures.

what is the output for the below expression in javascript [closed]

function outer() {

  var x = 10;

  function inner() {
    console.log(x);
  }
  return inner;

}
var innerFunc = outer();
innerFunc();

what is the output of the console.

when i call the innerFunc then what should be the output of the above and why can anyone explain for this. it is related to the closure concept and is there any possibility then output will defer in different browser and version also?

How to use useImperative Handle react

I’m new in react and i’m still learn react hook, i have done knowing
the purpose of useImperativeHandle. But i have an problem with the syntax below is the code example:

import ReactDOM from 'react-dom/client'
import {forwardRef,useRef,useImperativeHandle} from 'react'

const ChildComponent = forwardRef(
  function reference(props,ref){
    const refs = useRef(null);
    useImperativeHandle(ref,() => ({
      sayHi: () => {
        console.log("hello world");
        refs.current.sayHi();
      }
    }));
    return(
      <div ref={refs}>{refs.current}</div>
    );
  }
);

function ParentComponent(){
  const refs = useRef("HELLO World");
  function sayHello(){
    refs.current.sayHi("hello world");
  }
  sayHello();
  return(
    <ChildComponent ref={refs}/>
  );
}
const div_root = ReactDOM.createRoot(document.getElementById("root"));
div_root.render(<ParentComponent/>);

from about code i got an error where sayHi is not a function, which part in my code that have a wrong syntax

Algrand Smart Contract Method Calling

So I am working with an Algorand smart contract in nextjs. I am using Pera wallet to sign transactions. And currently, I am running into a problem where I want to call methods from the contract from the front end using the ABI, and AtomicTransactionComposer, however I get this error

URLTokenBaseHTTPError: Network request error. Received status 400 (): TransactionPool.Remember: transaction BCJJTOCFMIZOJZNRKDFCIOPMXWRFUUQ24DDJWGJWRD46UXUYSZ7A: logic eval error: invalid Box reference 0x3239303135313533. Details: pc=587, opcodes=frame_dig -1; extract 2 0; box_get

Here is my code, assume that anything before this code is unrelated to calling the method

const algodToken = '';
    const algodServer = 'https://testnet-api.algonode.cloud';
    const algodPort = undefined;
    const algodClient = new algosdk.Algodv2(algodToken, algodServer, algodPort);
const suggestedParams = await algodClient.getTransactionParams().do();
    console.log('suggestedParams:', suggestedParams);

    const contract = new algosdk.ABIContract(myabi);
    const atc = new algosdk.AtomicTransactionComposer();

    atc.addMethodCall({
        suggestedParams,
        sender: account,
        // Signer is a function that takes in unsigned txns and returns signed txns
        signer: async (unsignedTxns) => {
            // Create an array of transaction groups with the unsigned transactions and the signers
            const txnGroups = unsignedTxns.map((t) => ({txn: t, signers: [t.from]}));
            // Call the signTransaction method of the peraWallet instance and return the signed transactions
            return await peraWallet.signTransaction([txnGroups]);
        },
        appID: 468709015,
        method: algosdk.getMethodByName(contract.methods, 'readFundsWithdrawnStatus'),
        // Note how we don't have to manually encode the string
        methodArgs: [APN],
    });

    const results = await atc.execute(algodClient, 3);
    console.log(`Contract read success ` + results.methodResults);
    return results.methodResults

This is the method i want to call in the smart contract

@app.external
def readFundsWithdrawnStatus(item_name: abi.String, *, output: abi.Bool) -> Expr:
    existing_sender_funds_item = SenderFundsContract()
    return Seq(
        existing_sender_funds_item.decode(app.state.sender_funds_item[item_name.get()].get()),
        output.set(existing_sender_funds_item.fundsWithdrawn) 
    )

Does anyone know why I cam getting that network error. I have a feeling its becasue of the methodArg I am passing in or is it the AppID is not deploying.

How to change color of text based on user input in Javascript

I would like to change color of the header based on what color the user chooses and types in in the input box provided.

I just can’t figure out how to type correctly

if (user input === color){

document.getElementById("header").style.color ="that color"

in other words if user input equals a color type, change the header color to the color specified.

I’m not sure if adding ids to the list helps in any way, sorry this is one of my first exercises in JS

This is the HTML:

    <h1 id="header"> Hi There </h1>

    <p>Choose from one of the following options!</p>

<ul>
    <li id="darkred">Dark red</li>
    <li id = "darkorange">Dark orange</li>
    <li id = "yellow">Yellow</li>
    <li id = "darkgreen">Dark Green</li>
    <li id = "teal">Teal</li>
    <li id = "navy">Navy</li>
    <li id = "indigo">Indigo</li>
    <li id = "fuchsia">Fuchsia</li>
    <li id = "lavender">Lavender</li>
    <li id = "pink">Pink</li>
</ul>
<input type-"text" id="inp"/>

I mean i could write functions for every one of those colors and that would work, but that would be also be unnecessarily long and dumb and I’m trying to make more general functions here

TypeScript: How to have object within a class and then use it in constructor

The Issue

I’m creating a Class which will have a lot of variables. Most of them are logically grouped and I want to utilise the IDE (VS Code) benefits of auto suggesting.

The issue is that there are a lot of variables and I don’t want to list all of them upfront, I want to have nesting so if I create const movie1 = new Movie(1, 101);, then when I start typing movie1. the IDE to start autosuggest all thins on the first level, like id, title … etc.

And then when I go further with typing movie1.title, the IDE to give me hints that object have, like bg, en, and original.

Actual result

The VS Code gives me hints. But when I run the script I’m getting an runtime error

this.id.googlesheet.row = rowID;
        ^


TypeError: Cannot read properties of undefined (reading 'googlesheet')
    at Movie (~/src/classes/Movie.ts:12:17)
    at <anonymous> (~/src/index.ts:5:16)
    at Object.<anonymous> (~/src/index.ts:8:44)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Object.j (~/dist/cjs/index.cjs:1:1197)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at cjsLoader (node:internal/modules/esm/translators:283:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:233:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)

I think I’m doing something fundamentally wrong, I tried utilising interfaces but I ended in a dead-end.

Files

src/index.ts

import { Movie } from "./classes/Movie";

const movieList: Movie[] = [];

const movie1 = new Movie(1, 101);
const movie2 = new Movie(2, 102);

console.log(movieList[0].id.googlesheet.row);

src/classes/Movie.ts

export class Movie {
    id: { googlesheet: { row: number; movie: number; }; wordpress?: { bg?: number; en?: number; }; };
    title: { bg: string; en: string; original?: string; };
    metadata: { duration: string; yearOfProduction: string; };
    country: { bg: string; en: string; };
    description: { bg: string; en: string; };
    director: { bg: string; en: string; };
    trailer: { url: string; };
    featuredImage: { url: string; };

    constructor(rowID: number, movieID: number) {
        this.id.googlesheet.row = rowID;
        this.id.googlesheet.movie = movieID;
    }
}