Blancer.com Tutorials and projects

I am using Placekit for the forward geocoding and so far it works good, but I have an issue with the autocomplete. When I click on the suggestion from the autocomplete dropdown, it does not use this choice for the request. Instead it still makes a request for the input I typed in. How could I change this?
I created a stackblitz for this purpose. Public API inlcuded. Please use with caution.
https://stackblitz.com/edit/vitejs-vite-bovfbecx?file=src%2FApp.vue

I am using the basic Jqueryui datepicker, i need the date range with check in and check out but i need to add date + X days to the check out input.

How can i add X days to $.datepicker.parseDate( dateFormat, element.value

Here is the code

`

        $( function() {

        function getDate( element ) {
          var date;
          try {
            date = $.datepicker.parseDate( dateFormat, element.value  );
          } catch( error ) {
            date = null;
          }

          return date;
        }
          var dateFormat = 'dd MM yy',
            from = $( '#CheckIn' )
              .datepicker({
                minDate: 0,
                dateFormat: 'dd MM yy',
                defaultDate: '+1w',
                changeMonth: false,
                numberOfMonths: 1
              })
              .on( 'change', function() {
                to.datepicker( 'option', 'minDate', getDate( this ) );
              }),
            to = $( '#CheckOut' ).datepicker({
              dateFormat: 'dd MM yy',
              defaultDate: '+1w',
              changeMonth: true,
              numberOfMonths: 1
            })
            .on( 'change', function() {
              from.datepicker( 'option', 'maxDate', getDate( this ) );
            });
        } );`

When I select a date from Check In i want Check Out to only enable date + X days from the From selected day

Any help would be much appreciated

Thanks in advance

I’d like to consume data from a webservice and display it. The data has some dependencies on each other so that only one group of data can be displayed once all data of this group is read. All requests should start as fast as possible.

My code so far:

function asyncFetch(url = "", data = {}) {
  return fetch(url, {
      method: "POST",
      mode: "cors",
      cache: "no-cache",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    })
    .then(response => (response.json()))
    .catch(console.error);
}

const fetchOPDebitoren = () => {
  console.log(" fetch fetchOPDebitoren");

  return asyncFetch("http://server:3000/readOP", {
    token: "mytoken",
    options: {
      vpkt: "1000",
      bpkt: "6999"
    }
  });
};

const fetchOPKreditoren = () => {
  console.log("fetch fetchOPKreditoren");

  return asyncFetch("http://server:3000/readOP", {
    token: "mytoken",
    options: {
      vpkt: "7000",
      bpkt: "9999"
    }
  });
};

const fetchSalesData = () => {
  console.log(" fetch SalesData");

  return asyncFetch("http://server:3000/sales", {
    token: "mytoken",
    options: {
      von_pkt: "10000",
      bis_pkt: "99999"
    }
  });
};

const displayDueBarDashboard = () => {
  Promise.all([fetchOPDeb(), fetchOPKred()])
    .then(([op_data_deb, op_data_kred]) => {
      console.log(" fetch OPs completed");

      return new Promise((resolve) => {
        /* display the data */
        console.log("display op data");
      });
    })
    .catch((error) => console.error('Error display DueBarChart:', error))
};

const displaySalesChart = () => {
  Promise.all([fetchSalesData()])
    .then(([sales_data]) => {
      console.log("fetch SalesChart completed");

      return new Promise((resolve) => {
        /* display the data */
        console.log("display sales data");

      });
    })
    .catch((error) => console.error('Error display SalesChart:', error));
};


await Promise.all([
    displayDueBarDashboard(),
    displaySalesChart()
  ])
  .then(() => {
    console.log("All done, cleanup");
  });

As you can see, to display the DueBars the data of both fetchOP functions is needed.

With this code, the problem is now that the cleanup is called before all fetches are done and the display output is never shown.

fetch fetchOPDebitoren index.html:442:13
fetch fetchOPKreditoren index.html:465:13
fetch SalesData index.html:488:13
All done, cleanup index.html:563:13
fetch OPs completed index.html:539:14
fetch SalesChart completed

What am I doing wrong?

Also, in the fetch functions I must present a token. This token is requested with another call of asyncFetch which I have to wait for.

How can I implement that in the fetch functions without making them async?

We have a holiday booking system for employees and when somebody make a request, system generate an email to their manager. This email contains two buttons Approve and Reject so the manager can review and approve or reject it from the email rather than going to the system. This part is working as expected.

In some cases, managers forward the messages to holiday requester explaining the reason they cannot approve it (before rejecting the holiday request). When manager select forward message option, it seems the Approve button onclick event trigger automatically. not sure what is triggering this. Before they complete the forward message, they get a confirmation to say the holidays has been approved.

We tried this on number of computers with different AV software suspecting anti-virus tools responsible for this.

1. What could be triggering this onclick event when forwarding the message?
2. How to prevent it?

Any help would be appreciated

sample Php code for the message

        $headers = 'MIME-Version: 1.0' . "rn";
        $headers .= 'Content-type: text/html; charset=iso-8859-1' . "rn";
        $headers .= 'From: Holiday System <[email protected]>' . "rn";

   $href_path = 'http:\\example.com\rauthpage.php'; 

        $style = '<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><title>HUB</title></head>';

  $booking_ref = "8811624894907"; // example

            //$authkey = self::mdlProcessAuthenticateKey($booking_ref);
            $authkey = 123456789321654987; // example

            $subject = 'Mail Module Tester';
            $message = '<html lang="en">';
            $message .= $style;
            $message .= '<body>';
            $message .= 'Hi Manager,</br>';
            $message .= '<p>A holiday request has been made. please chose one of these</p>';
            $message .= '<h3>ACTIONS:</h3>';
            $message .= '<table>
                            <tr>
                                <td style="border-radius: 5px;" bgcolor="mediumseagreen">
                                <a href="' . $href_path . '?act=1&rauth=' . $authkey . '" target="_blank" style="padding: 8px 12px; border: 1px solid mediumseagreen;border-radius: 2px;font-family: Helvetica, Arial, sans-serif;font-size: 14px; color: #000000;text-decoration: none;font-weight:bold;display: inline-block;">Accept</a>
                                </td>
                                <td style="border-radius: 5px;" bgcolor="orangered">
                                <a href="' . $href_path . '?act=2&rauth=' . $authkey . '" target="_blank" style="padding: 8px 12px; border: 1px solid orangered;border-radius: 2px;font-family: Helvetica, Arial, sans-serif;font-size: 14px; color: #FFFFFF;text-decoration: none;font-weight:bold;display: inline-block;">Reject</a>
                                </td>
                            
                               
                            </tr>
                         </table>';
            $message .= '</body></html>';

            $to = '[email protected]';
            if (!is_null($to)) {
                mail($to, $subject, $message, $headers);
            }

Can someone please tell me how to create basic calculator in pure javascript? with just an addition feature.

Function Calculator(){}

function Calculator() {
    var calculatorEl = document.getElementById('calculator');
    this.displayEl = calculatorEl.querySelector('#display');
    this.displayText = '';
    this.equation = [];

    // Bind event listener
    calculatorEl.addEventListener('click', this.handleButtonClick.bind(this));
  }

Basic Html:

<div id="calculator">
  <div id="display"></div>
  <div class="row">
    <button class="num-key">1</button>
    <button class="num-key">2</button>
    <button class="num-key">3</button>
  </div>
  <div class="row">
    <button class="num-key">4</button>
    <button class="num-key">5</button>
    <button class="num-key">6</button>
  </div>
  <div class="row">
    <button class="num-key">7</button>
    <button class="num-key">8</button>
    <button class="num-key">9</button>
  </div>
  <div class="row">
    <button class="num-key">0</button>
    <button class="op-key">+</button>
    <button id="solve-key">=</button>
  </div>
</div>

With the above basic html and function variable how can i create the basic calculator function?

i install react-helmet-async here is my main.jsx file

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import HomeScreen from "./screens/HomeScreen.jsx";
import {
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
  Route,
} from "react-router-dom";
import ProductDetailsScreen from "./screens/ProductDetailsScreen.jsx";
import { Provider } from "react-redux";
import { store } from "./store.js";

import { HelmetProvider } from "react-helmet-async";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />}>     
      <Route path="/product/:id" element={<ProductDetailsScreen />} />
    </Route>
  )
);

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <HelmetProvider>
      <Provider store={store}>
        <RouterProvider router={router} />
      </Provider>
    </HelmetProvider>
  </StrictMode>
);

in my productDetailsscreen i am using this component Meta.jsx

import { Helmet } from "react-helmet-async";

const Meta = ({ title, description, keywords }) => {
  return (
    <Helmet>
      <title>{title}</title>
      <meta name="description" content={description} />
      <meta name="keywords" content={keywords} />
    </Helmet>
  );
};


export default Meta;

in my product details screen i am passing name description keywords but it doesn’t update my title etc

<Meta title="Title" description="description" keywords="keywords" />

I was following this guide https://youtu.be/hpgh2BTtac8?si=X6rZX3tMHl8yBgh4&t=52686 and on My orders page i have an error, orders dont loading. Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘message’). Im new at learning JavaScript and reduxjs and want ask for help. My code:

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { fetchUserOrders } from "../redux/slices/orderSlice";

  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { orders, loading, error } = useSelector((state) => state.orders);

  useEffect(() => {
    dispatch(fetchUserOrders());
  }, [dispatch]);

  const handleRowClick = (orderId) => {
    navigate(`/order/${orderId}`);
  };

  if (loading) return <p>Loading ...</p>;
  if (error) return <p>Error: {error}</p>;

orderSlice

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

export const fetchUserOrders = createAsyncThunk(
  "orders/fetchUserOrders",
  async (_, { rejectWithValue }) => {
    try {
      const response = await axios.get(
        `${import.meta.env.VITE_BACKEND.URL}/api/orders/my-orders`,
        {
          headers: {
            Authorization: `Bearer ${localStorage.getItem("userToken")}`,
          },
        }
      );
      return response.data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);

export const fetchOrderDetails = createAsyncThunk(
  "orders/fetchOrderDetails",
  async (fetchOrderDetails, { rejectWithValue }) => {
    try {
      const response = await axios.get(
        `${import.meta.env.VITE_BACKEND.URL}/api/orders/${orderId}`,
        {
          headers: {
            Authorization: `Bearer ${localStorage.getItem("userToken")}`,
          },
        }
      );
      return response.data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);

const orderSlice = createSlice({
  name: "orders",
  initialState: {
    orders: [],
    totalOrders: 0,
    orderDetails: null,
    loading: false,
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserOrders.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchUserOrders.fulfilled, (state, action) => {
        state.loading = false;
        state.orders = action.payload;
      })
      .addCase(fetchUserOrders.rejected, (state, action) => {
        state.loading = false;
        console.log(action);
        state.error = action.payload.message;
      })
      .addCase(fetchOrderDetails.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchOrderDetails.fulfilled, (state, action) => {
        state.loading = false;
        state.orderDetails = action.payload;
      })
      .addCase(fetchOrderDetails.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload.message;
      });
  },
});

export default orderSlice.reducer;

Backend

const orderItemSchema = new mongoose.Schema(
  {
    productId: {
      type: mongoose.Schema.Types.ObjectId,
      ref: "Product",
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
    image: {
      type: String,
      required: true,
    },
    price: {
      type: Number,
      required: true,
    },
    size: String,
    color: String,
    quantity: {
      type: Number,
      required: true,
    },
  },
  { _id: false }
);

const orderSchema = new mongoose.Schema(
  {
    user: {
      type: mongoose.Schema.Types.ObjectId,
      ref: "User",
      required: true,
    },
    orderItems: [orderItemSchema],
    shippingAddress: {
      address: { type: String, required: true },
      city: { type: String, required: true },
      postalCode: { type: String, required: true },
      country: { type: String, required: true },
    },
    paymentMethod: {
      type: String,
      required: true,
    },
    totalPrice: {
      type: Number,
      required: true,
    },
    isPaid: {
      type: Boolean,
      default: false,
    },
    paidAt: {
      type: Date,
    },
    isDelivered: {
      type: Boolean,
      default: false,
    },
    deliveredAt: {
      type: Date,
    },
    paymentStatus: {
      type: String,
      default: "pending",
    },
    status: {
      type: String,
      enum: ["Processing", "Shipped", "Delivered", "Cancelled"],
      default: "Processing",
    },
  },
  { timestamps: true }
);

module.exports = mongoose.model("Order", orderSchema);

orderRoutes

const express = require("express");
const Order = require("../models/Order");
const { protect } = require("../middleware/authMiddleware");

const router = express.Router();

router.get("/my-orders", protect, async (req, res) => {
  try {
    const orders = await Order.find({ user: req.user._id }).sort({
      createdAt: -1,
    });
    res.json(orders);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: "Server error" });
  }
});

router.get("/:id", protect, async (req, res) => {
  try {
    const order = await Order.findById(req.params.id).populate(
      "user",
      "name email"
    );
    if (!order) {
      return res.status(404).json({ message: "Order not found" });
    }
    res.json(order);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: "Server error" });
  }
});

module.exports = router;

Backend works perfectly I checked through Postman.
I also debugged the action with console.log(action) and it gives this error
{type: ‘orders/fetchUserOrders/rejected’, payload: undefined, meta: {…}, error: {…}}

Looks like the problem is that payload is undefined, but i cant find an issue. Will be glad for any help

I am building a POS system in Electron JS 35.0.1 and Angular 19. I have installed electron-pos-printer 1.3.6. The printer is triggered by a websocket notification from my backend. Currently the printer does not print the entire receipt. Rather it starts printing and then immediately stops with more than half the receipt stuck in the printer.
The printer is a standard thermal printer, POS80CUT model with USB interface.

Here is my print-receipt handler in my main.js

const { PosPrinter } = require("electron-pos-printer");

ipcMain.on("print-receipt", async (_, order) => {
  const options = {
    preview: false,
    margin: "0 0 0 0",
    copies: 1,
    printerName: printerName,
    timeOutPerLine: 400,
    pageSize: "80mm",
    silent: true,
  };

  const now = new Date().toLocaleString();
  const divider = "-".repeat(42);

  const items = order.items.map((item) => {
    const name = item.itemName.length > 25
      ? item.itemName.slice(0, 25) + "…"
      : item.itemName;
    const line = `${item.quantity.toString().padEnd(5)} ${name}`;
    return {
      type: "text",
      value: line,
      style: {
        fontSize: "12px",
        fontFamily: "monospace",
        lineSpace: "300px"
      },
    };
  });

  const data = [
    {
      type: "text",
      value: `ORDER ID: ${order.uuid}`,
      style: {
        fontSize: "20px",
        fontWeight: "bold",
        textAlign: "center",
      }
    },
    {
      type: "text",
      value: `Waiter: ${order.waiter.username}`,
      style: {
        fontSize: "12px",
        fontFamily: "monospace",
        fontWeight: "bold"
      },
    },
    {
      type: "text",
      value: `Date: ${now}`,
      style: {
        fontSize: "12px",
        fontFamily: "monospace",
        fontWeight: "bold"
      },
    },
    {
      type: "text",
      value: `Table: ${order.tableNumber}`,
      style: {
        fontSize: "12px",
        fontFamily: "monospace",
        fontWeight: "bold"
      },
    },
    {
      type: "text",
      value: divider,
      style: {
        fontSize: "12px",
        fontFamily: "monospace",
        textAlign: "left"
      },
    },
    {
      type: "text",
      value: "QTY                ITEM",
      style: {
        fontSize: "12px",
        fontFamily: "monospace",
        fontWeight: "bold",
        textAlign: "left"
      },
    },
    {
      type: "text",
      value: divider,
      style: {
        fontSize: "12px",
        fontFamily: "monospace",
        textAlign: "left"
      },
    },
    ...items
  ];

  try {
    await PosPrinter.print(data, options);
    console.log("✅ Receipt printed successfully");
  } catch (error) {
    console.error("❌ Print failed:", error);
  }
});

I have tried adding line spacing, line breaks, padding. They don’t work. And the printer doesn’t print for any other type other than text. So using table, html etc. is out of the question.

This is the format of the structure and each column has about 500 items.

<div class="row">
  <div class="col-md-6">
    <div><p>content</p></div>
    <div><p>content</p></div>
    ...
  </div>
  <div class="col-md-6">
    <div><p>content</p></div>
    <div><p>content</p></div>
    ...
  </div>
</div>

As it is quite long, I want to add 3-4 read more buttons at equal intervals to hide portion of the list and show it only when clicked. The “read more” button needs to be in the center for the entire row and not just each column.

I know how to build the functionality if it was a single column structure but in this case there are two columns and I am unsure of how to go around it.

Is it possible? How do I insert the “read more” button and where? How do implement the hide/show functionality?

Any pointers?

after compiling my ts files when I ran my script.js file in the VS Code terminal, I received this error:

node:internal/modules/cjs/loader:1228
  throw err;
  ^

Error: Cannot find module '/Users/<username>/projects/course tree/course_tree/scripts/script.js'
    at Function._resolveFilename (node:internal/modules/cjs/loader:1225:15)
    at Function._load (node:internal/modules/cjs/loader:1055:27)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:170:5)
    at node:internal/main/run_main_module:36:49 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

Node.js v22.14.0

I honestly don’t know what is causing this error. I tried searching on Stack but I couldn’t find a solution to my problem.

I’m new to using TypeScript and I’m not too familiar with modules and modifying tsconfig.json.

My project folders is organized like this:

screenshot of project folders

My tsconfig.json is this:

{
  "compilerOptions": {
     "target": "es2016",
     "module": "Node16", 
     "moduleResolution": "nodenext",  
     "outDir": "./ts-out", 
     "esModuleInterop": true, 
     "forceConsistentCasingInFileNames": true,
     "strict": true, 
     "skipLibCheck": true  
  }, 
  "type": "module",
  "include": ["./ts-in"], 
  "exclude": [],
}

At the beginning I tried creating a d.ts file for each of my .ts files since I was receiving syntax errors in my import statements. Weirdly, the errors only went away when I replaced the relative path statements ../ts-out/<name-of-js-file>.js with ./<name-of-js-file>.js. However, I was able to compile the .ts files without any issues.

The error appears after I input node script.js. I’ve tried rm -rf node_modules npm install but it did not work. All modules are local and created by me so I’ve been using relative paths in all my import statements.

Theses errors didn’t occur at all when I initially placed all my .js and .ts files in a single folder with my tsconfig.json (My problems only started once I started to organize my files).

I’d be grateful if someone could point me in the right direction on how to fix this.