Category: javascript

Category Added in a WPeMatico Campaign

Is it possible to pause celery tasks during execution

I have an app that does transcription. I want that if the user tries to reload they are alerted that reloading will stop their task from completing. I tried to use it with unload but it didn’t work most of the time and I know that it is inconsistent. I would like to pause the task if the user tries to reload. They will get the browser warning alert and if they decide that they still want to reload the task will be terminated.

The idea I have is to trigger a beforeunload which will give them a warning and trigger the pausing of the celery task. I have a polling function on the frontend set up using JS that polls if the task is still running every 5 seconds. If the user reloads this polling function will stop running and so the backend will stop being polled which will trigger the celery task termination.

Otherwise, the function will receive the poll if the user cancels or hasn’t reloaded and the task is unpaused.

Here is my polling function:

function pollTaskStatus(taskId) {
    currentTaskId = taskId;
    console.log(currentTaskId)
    pollInterval = setInterval(() => {
        const xhr = new XMLHttpRequest();
        xhr.onload = function() {
            if (xhr.status == 200) {
                const response = JSON.parse(xhr.responseText);
                if (response.status === 'completed') {
                    console.log('completed');
                    if (response.reload) {
                        // Reload the page to load the correct HTML template
                        window.location.reload();
                    }
                    clearInterval(pollInterval); // Stop polling once completed
                    isTranscribing = false; // Set to false when transcription is complete
                }
            } else {
                showError('An error occurred.');
                clearInterval(pollInterval); // Stop polling on error
                isTranscribing = false; // Set to false on errors
            }
        };
        xhr.onerror = function() {
            showError('Connection error. Please check your network connection and try again.');
            clearInterval(pollInterval); // Stop polling on network error
            isTranscribing = false; // Set to false on network error
            
        };
        xhr.open('GET', `/transcribe/poll_task_status/${taskId}/`, true);
        xhr.send();
    }, 5000); // Poll every 5 seconds
}

I’m also open to any better ideas for dealing with potential customer reload during a running task. My backend is django and I am running celery[redis].

Working with React: Question on deconstructing components

So, I’m going through some React studying and I’m current just doing small code. I was writing two files. The first is where my data is in my variable. I’m using a basic map method to loop through my array of objects and displaying the information as is. Extremely simple and makes perfect sense. screenshot of my code from my gitHub repository.

However, after that I wanted to try practicing with props and deconstructing my array of objects. So, i created a new file component labeled as Movie and passed it through to my Movies map method. Using props, I pass through the movie name and release year through to render. I understand that using this method turns each list item into it’s own component, but I’m not understanding exactly why this can be useful? Can someone give me some examples of this being used in a practical situation or point me to some repository’s where it’s being used better so I can better understand this use of deconstructing an array of objects? Thank you!

I think the most confusing part for me is I’m still calling Movies in my App.jsx to render the data, so it feels like I could just not have the Movie component at all and have kept them within the one component.

Movie File
Movies file after using props to pass information along to the Movie file.

Code works as intended. Just curious on the logic behind why it works.

Can’t make dynamic page changes

I want to make a dynamic page, but when I make a request the page just refreshes, although it should return an alert when no data is entered (I have not entered any).

views.py

def adding(request):
    return render(request, 'matrix_app/adding_matrix.html')

create_matrix.js

function create_matrix(){
    let rows1 = document.getElementById("rows_1_matrix").textContent;
    let columns1 = document.getElementById("columns_1_matrix").textContent;
    let rows2 = document.getElementById("rows_2_matrix").textContent;
    let columns2 = document.getElementById("columns_2_matrix").textContent;

    nums = [rows1, rows2, columns1, columns2];
    for(let i = 0; i < 4; i++){
        if (nums[i] === false || nums[i] === '0') {
           return alert("All fields are ruqired");
        }
    }
}

adding_matrix.html

% extends 'base.html' %}
{% load static %}
{% block content %}
<script src="{% static 'js/create_matrix.js' %}"></script>
<form onsubmit="create_matrix()" id="matrix" method="post">
  {% csrf_token %}
  <div>
    <label>text</label>
    <input type="number" id="rows_1_matrix"/>
  </div>
  <div>
    <label>text</label>
    <input type="number" id="columns_1_matrix"/>
  </div>
  <div>
    <label>text</label>
    <input type="number" id="rows_2_matrix" />
  </div>
  <div>
    <label>text</label>
    <input type="number" id="columns_2_matrix"/>
  </div>
  <input type="submit" value="generate"/>
</form>


<a href="/operations"><button>Back</button></a>
{% endblock %}

Arrows are not working or showing for table content that is not displayed in the initial viewport

Some of the content career route connections do not work for the table’s last row. So, I’m wondering that the information that we need to scroll to click on is experiencing arrow pathway connection issues. Because the first viewport content arrow for both the second and third columns works exceptionally well. However, those material that are outside of the first view port or that require us to scroll down to view are experiencing problems.

When I select Entry-level Positions, Research Roles, Doctorate or PhD in Science. Issues are evident more clearly.
To further understand the issues, following screenshots are supplied – enter image description hereenter image description here

I tried to remedy it by updating the route positions dynamically based on the scroll event to guarantee that your items are precisely positioned, but it didn’t work either.

My code –

document.addEventListener("DOMContentLoaded", () => {
  const credentials = document.querySelectorAll(".credential li");
  const careers = document.querySelectorAll(".career li");
  const table = document.querySelector(".table-container");

  function resetUI() {
    // Reset all elements
    credentials.forEach((c) => {
      c.classList.remove("selected");
      c.classList.remove("disabled");
    });
    careers.forEach((c) => {
      c.classList.remove("selected");
      c.classList.remove("disabled");
    });

    // Clear all arrows from the SVG
    const svg = document.getElementById("arrows");
    while (svg.firstChild) {
      svg.removeChild(svg.firstChild);
    }

    // Update the SVG dimensions to cover the entire table
    const tableRect = table.getBoundingClientRect();
    svg.setAttribute("width", tableRect.width);
    svg.setAttribute("height", tableRect.height);

    // Re-append the arrowhead marker
    const marker = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "marker"
    );
    marker.setAttribute("id", "arrowhead");
    marker.setAttribute("markerWidth", "10");
    marker.setAttribute("markerHeight", "7");
    marker.setAttribute("refX", "0");
    marker.setAttribute("refY", "3.5");
    marker.setAttribute("orient", "auto");
    const arrowhead = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "polygon"
    );
    arrowhead.setAttribute("points", "0 0, 10 3.5, 0 7");
    arrowhead.setAttribute("fill", "orange");
    marker.appendChild(arrowhead);
    svg.appendChild(marker);
  }

  function drawArrowFromCertificateToCareer(fromElement, toElement) {
    const svg = document.getElementById("arrows");
    const fromRect = fromElement.getBoundingClientRect();
    const toRect = toElement.getBoundingClientRect();
    const svgRect = svg.getBoundingClientRect();

    // Calculate positions relative to the table container
    const fromX = fromRect.right - svgRect.left; // Right side of the certificate
    const fromY = fromRect.top + fromRect.height / 2 - svgRect.top; // Middle of the certificate
    const toX = toRect.left - svgRect.left; // Left side of the career
    const toY = toRect.top + toRect.height / 2 - svgRect.top; // Middle of the career

    const arrow = document.createElementNS("http://www.w3.org/2000/svg", "line");
    arrow.setAttribute("x1", fromX);
    arrow.setAttribute("y1", fromY);
    arrow.setAttribute("x2", toX);
    arrow.setAttribute("y2", toY);
    arrow.setAttribute("stroke", "orange");
    arrow.setAttribute("stroke-width", "1.0");
    arrow.setAttribute("marker-end", "url(#arrowhead)");

    svg.appendChild(arrow);
  }

  function drawCircularArrows(fromCareer, credentialIds) {
    const svg = document.getElementById("arrows");
    const svgRect = svg.getBoundingClientRect();
    const careerRect = fromCareer.getBoundingClientRect();

    // Sort credentials by their vertical position
    const sortedCredentials = credentialIds
      .map((id) => document.getElementById(id))
      .filter((el) => el !== null)
      .sort(
        (a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top
      );

    // Draw arrows between credentials
    for (let i = 0; i < sortedCredentials.length - 1; i++) {
      const fromRect = sortedCredentials[i].getBoundingClientRect();
      const toRect = sortedCredentials[i + 1].getBoundingClientRect();

      const arrow = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "line"
      );
      arrow.setAttribute(
        "x1",
        fromRect.left - svgRect.left + fromRect.width / 2
      );
      arrow.setAttribute("y1", fromRect.bottom - svgRect.top);
      arrow.setAttribute("x2", toRect.left - svgRect.left + toRect.width / 2);
      arrow.setAttribute("y2", toRect.top - svgRect.top);
      arrow.setAttribute("stroke", "orange");
      arrow.setAttribute("stroke-width", "2");
      arrow.setAttribute("marker-end", "url(#arrowhead)");

      svg.appendChild(arrow);
    }

    // Draw arrow from last credential to career
    if (sortedCredentials.length > 0) {
      const lastCredRect =
        sortedCredentials[sortedCredentials.length - 1].getBoundingClientRect();

      const arrow = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "line"
      );
      arrow.setAttribute(
        "x1",
        lastCredRect.left - svgRect.left + lastCredRect.width / 2
      );
      arrow.setAttribute("y1", lastCredRect.bottom - svgRect.top);
      arrow.setAttribute("x2", careerRect.left - svgRect.left); // Point to the left edge of the career span
      arrow.setAttribute(
        "y2",
        careerRect.top - svgRect.top + careerRect.height / 2
      ); // Point to the vertical middle of the career span
      arrow.setAttribute("stroke", "orange");
      arrow.setAttribute("stroke-width", "2");
      arrow.setAttribute("marker-end", "url(#arrowhead)");

      svg.appendChild(arrow);
    }
  }

  function highlightRelatedItems(selectedItem, _items, dataAttribute) {
    const relatedItems = selectedItem.dataset[dataAttribute].split(",");

    // Highlight related items
    relatedItems.forEach((itemId) => {
      const itemElement = document.getElementById(itemId);
      if (itemElement) {
        itemElement.classList.remove("disabled");
        itemElement.classList.add("selected");
        if (selectedItem.closest(".credential")) {
          // Draw arrow from credential to career
          drawArrowFromCertificateToCareer(selectedItem, itemElement);
        } else {
          // Draw circular arrows for careers
          drawCircularArrows(selectedItem, relatedItems);
        }
      }
    });
  }

  // Add event listeners to credentials (Certificate, Degree or Credential column)
  credentials.forEach((credential) => {
    credential.addEventListener("click", (event) => {
      event.stopPropagation(); // Prevent click event from propagating to the document

      // Reset all elements
      resetUI();

      // Highlight the selected credential and disable others
      credential.classList.add("selected");
      credentials.forEach((c) => {
        if (c !== credential) {
          c.classList.add("disabled");
        }
      });

      // Highlight related careers and draw arrows from credential to career
      highlightRelatedItems(credential, careers, "related");

      // Disable unselected careers
      careers.forEach((c) => {
        if (!c.classList.contains("selected")) {
          c.classList.add("disabled");
        }
      });
    });
  });

  // Add event listeners to careers
  careers.forEach((career) => {
    career.addEventListener("click", (event) => {
      event.stopPropagation(); // Prevent click event from propagating to the document

      // Reset all elements
      resetUI();

      // Highlight the selected career and disable others
      career.classList.add("selected");
      careers.forEach((c) => {
        if (c !== career) {
          c.classList.add("disabled");
        }
      });

      // Retrieve related credentials from the data-related attribute
      const relatedCredentials = career.dataset.related.split(",");

      // Draw the circular arrows from career to credentials and back
      drawCircularArrows(career, relatedCredentials);

      // Highlight related credentials
      highlightRelatedItems(career, credentials, "related");

      // Disable unrelated credentials
      credentials.forEach((c) => {
        if (!c.classList.contains("selected")) {
          c.classList.add("disabled");
        }
      });
    });
  });

  document.addEventListener("click", resetUI);
  window.addEventListener("resize", resetUI);
});
/* Improved typography and color scheme */

body {
  font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.6;
  margin: 0;
  padding: 20px;
}


/* Container with rounded corners and subtle shadow */

.table-container {
  max-width: 1000px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 24px;
  position: relative;
  /* For positioning the arrows SVG */
  overflow-x: auto;
}


/* Table styling with alternating row colors */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 20px;
  overflow-x: auto;
}

th,
td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

table thead tr th:first-child {
  width: 20%;
}

table thead tr th:nth-child(2),
table tbody tr th:nth-child(3) {
  width: 40%;
}

th {
  background-color: #f0f4f8;
  font-weight: 600;
  color: #2c3e50;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.5px;
}

tr:nth-child(even) {
  background-color: #f9fafb;
}


/* Rounded corners for first and last cells in a row */

tr:first-child th:first-child {
  border-top-left-radius: 8px;
}

tr:first-child th:last-child {
  border-top-right-radius: 8px;
}

tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}


/* Remove list-style and add styling for credential and career items */

.credential ul,
.career ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.credential li,
.career li {
  transition: all 0.3s ease;
  padding: 8px 12px;
  margin: 4px 0;
  border-radius: 6px;
  cursor: pointer;
}

.credential li:hover,
.career li:hover {
  background-color: #e8f0fe;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* Selected state with color highlight */

.selected {
  background-color: #3498db;
  color: white;
  font-weight: 500;
}


/* Disabled state */

.disabled {
  opacity: 0.5;
  pointer-events: none;
}


/* Education level styling */

.education-level {
  font-weight: 600;
  padding: 12px;
  border-radius: 6px;
}


/* Color scheme for education levels */

.high-school {
  background-color: #e8eaf6;
}

.one-year-college {
  background-color: #fff3e0;
}

.two-years-college {
  background-color: #e0f2f1;
}

.four-years-college {
  background-color: #fce4ec;
}

.six-years-college {
  background-color: #e1f5fe;
}

.six-plus-years-college {
  background-color: #fff8e1;
}


/* Arrows SVG styling */

#arrows {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}


/* Responsive design */

@media (max-width: 768px) {
  .table-container {
    padding: 16px;
  }
  table {
    min-width: 400px;
  }
  table thead tr th:nth-child(2),
  table tbody tr th:nth-child(3) {
    width: 46%;
  }
  table tbody tr td:first-child {
    padding: 84px 0px;
    text-align: center;
    border-radius: 0;
  }
  table tbody tr td:first-child span {
    transform: rotate(270deg);
    white-space: nowrap;
    /* Prevent the text from wrapping */
    display: inline-block;
    text-align: left;
    /* Adjust alignment */
  }
  table td,
  table th {
    font-size: 12px;
  }
  table tbody tr td:nth-child(2),
  table tbody tr td:nth-child(3) {
    vertical-align: top;
  }
  th,
  td {
    padding: 8px;
  }
  td:before {
    content: attr(data-label);
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
  }
  .credential li,
  .career li {
    padding: 6px 8px;
    margin: 2px 0;
  }
  #arrows line {
    stroke-width: 0.5;
    /* Thinner lines for small screens */
  }
  /* Adjust the size of arrowheads */
  marker polygon {
    points: "0 0, 5 1.75, 0 3.5";
    /* Smaller arrowhead size */
  }
}

@media (hover: none) {
  .credential li,
  .career li {
    padding: 12px 8px;
  }
}


/* Smooth transitions for all interactive elements */

a,
button,
input,
select,
textarea {
  transition: all 0.3s ease;
}


/* Optimize white space */

li {
  margin-bottom: 8px;
}
<main>
  <div class="table-container" role="table" aria-label="Career Pathways Table">
    <table>
      <thead>
        <tr>
          <th scope="col">Education Level</th>
          <th scope="col">Certificate, Degree or Credential</th>
          <th scope="col">Career</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="education-level high-school"><span>High School</span></td>
          <td class="credential">
            <ul>
              <li id="high-school-diploma" data-related="assistant,technician,specialist">High School Diploma
              </li>
              <li id="vocational-certificate" data-related="assistant">Vocational Certificate</li>
            </ul>
          </td>
          <td class="career">
            <ul>
              <li id="entry-level" data-related="associate-degree,certificate,vocational-certificate,phd-science">
                Entry-level positions</li>
              <li id="assistant" data-related="high-school-diploma,vocational-certificate">Assistant roles
              </li>
            </ul>
          </td>
        </tr>
        <tr>
          <td class="education-level one-year-college"><span>1 Year College</span></td>
          <td class="credential">
            <ul>
              <li id="certificate" data-related="assistant,technician">Certificate</li>
              <li id="technical-certificate" data-related="technician">Technical Certificate</li>
            </ul>
          </td>
          <td class="career">
            <ul>
              <li id="assistant" data-related="certificate,technical-certificate">Assistant roles</li>
              <li id="technician" data-related="certificate,technical-certificate">Technician roles
              </li>
            </ul>
          </td>
        </tr>

        <tr>
          <td class="education-level two-years-college"><span>2 Years College</span></td>
          <td class="credential">
            <ul>
              <li id="associate-degree" data-related="professional,specialist">Associate Degree</li>
              <li id="diploma-technology" data-related="professional,specialist">Diploma in Technology
              </li>
            </ul>
          </td>
          <td class="career">
            <ul>
              <li id="professional" data-related="associate-degree,diploma-technology">Professional roles
              </li>
              <li id="specialist" data-related="associate-degree,diploma-technology">Specialist roles
              </li>
            </ul>
          </td>
        </tr>

        <tr>
          <td class="education-level four-years-college"><span>4 Years College</span></td>
          <td class="credential">
            <ul>
              <li id="bachelors-degree" data-related="specialist,manager">Bachelor's Degree</li>
              <li id="bachelor-arts" data-related="manager">Bachelor of Arts</li>
            </ul>
          </td>
          <td class="career">
            <ul>
              <li id="specialist" data-related="bachelors-degree,bachelor-arts">Specialist roles</li>
              <li id="manager" data-related="bachelors-degree,bachelor-arts">Management roles</li>
            </ul>
          </td>
        </tr>

        <tr>
          <td class="education-level six-years-college"><span>6 Years College</span></td>
          <td class="credential">
            <ul>
              <li id="masters-degree" data-related="expert,consultant">Master's Degree</li>
              <li id="mba" data-related="expert,consultant">MBA</li>
            </ul>
          </td>
          <td class="career">
            <ul>
              <li id="expert" data-related="masters-degree,mba">Expert roles</li>
              <li id="consultant" data-related="masters-degree,mba">Consultant roles</li>
            </ul>
          </td>
        </tr>

        <tr>
          <td class="education-level six-plus-years-college"><span>6+ Years College</span></td>
          <td class="credential">
            <ul>
              <li id="doctorate" data-related="expert,researcher">Doctorate</li>
              <li id="phd-science" data-related="expert,researcher">PhD in Science</li>
            </ul>
          </td>
          <td class="career">
            <ul>
              <li id="expert" data-related="associate-degree,bachelors-degree,doctorate">Expert roles
              </li>
              <li id="researcher" data-related="doctorate,phd-science">Research roles</li>
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</main>
<svg id="arrows" aria-hidden="true"></svg>

Why does this JS code not work in a Vue component template?

My question title might be wrong but this is the basic code:

const messages = [
{"userid": 1, 
"messageid": 80, 
"Statuses":[{"userid": 1, "statusid": 1}, {"userid": 5, "statusid": 2}, {"userid": 99, "statusid": 1}, {"userid": 26, "statusid": 4}]
},
];

messages.forEach((message)=>{
console.log(message.Statuses.find((status)=>status.userid === 99).statusid===1);
})

What I am trying to do is find the object within Statuses array where the userid is 99 and then check if the statusid===1. The above code works and returns true/false if there is a match.

If I use the same code in a Vue template it fails e.g.:

<ul>
  <li v-for="message in messages">
    <div v-if="message.Statuses.find((status)=>status.userid === 99).statusid===1">
    <p>Status is 1</p>
    </div>
  </li>
</ul>

I get an error saying "message.Statuses.find(...) is undefined".

If I change the code to remove the statusid check then it works fine:

 <div v-if="message.Statuses.find((status)=>status.userid === 99)">

What’s up with this and how can I do this within the template HTML?

How to prevent the columns to stretch up to the size of the whole chart if less data is provided?

I dont display static data and as such the size of the data varies. I show data for each month (xAxis) and year (yAxis). When the data only fills one row (lets say I have January-December) for only 2024, then the colums stretch up to the end of the chart. How can I prevent that, so the cells stay same size?

An example of what I mean: https://jsfiddle.net/J_Code_2025/du97b4ka/2/

The code:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 80,
            plotBorderWidth: 1
        },
        title: {
            text: 'Sales per employee per weekday'
        },
        xAxis: {
            categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
        },
        yAxis: {
         tickWidth: 1,
        tickLength: 0,
            categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
            title: null
        },
        colorAxis: {
            min: 0,
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0]
        },
        series: [{
            name: 'Sales per employee',
            borderWidth: 4,
            data: [
                [0, 0, 10],
                ...
            ],
            dataLabels: {
                enabled: true,
                color: '#000000'
            }
        }]

    });
});

How to use a url from json file as link for a button html using javascript

I’m almost at the end of a thing I like to make for my website.
I have a json file that I use as a sort of database for my thumbails for the recipes…
The most info displays as I would like (thanks to this forum by the way)
See the print screen.
enter image description here

The button that says ‘MAKE IT YOURSELF’ shoud use the link (url) from the json file, here a little peace of the json file…

[
  {
    "postid": "3",
    "title": "Pizza",
    "text": "some text to explain the recept in short",
    "img": "../assets/images/recipes-thumbnail/pizza.png",
    "ingredients": "flour, yeast, water, salt, honey, olive oil",
    "url": "../pages/pizza.html"
  }
]

This is the html

  <!--  Card  -->
  <div class="user-cards" data-post-cards-container data-aos="zoom-in" data-aos-delay="100"></div>

  <template data-post-template>
    <div id="card-container" class="container">
      <div class="card">
        <div class="card-image_2">
          <div class="photo" data-photo></div>
        </div>

        <div class="card-data">
          <h3 class="header" data-header></h3>
          <p class="body" data-body></p>
          <p class="ingre" data-ingre></p>

          <!-- This is the button now -->
          <a href="#" class="card-button" data-link>Make it yourself</a>

        </div>
      </div>
    </div>
  </template>
  <!--  End Card  -->

This is the javascript part, this is the code that works fine for the moment

I don’t now how to adapt it for the link

fetch("../jsn/posts-main.json")
  .then(res => res.json())
  .then(data => {
    posts = data.map(post => {
      const card = postCardTemplate.content.cloneNode(true).children[0]
      const header = card.querySelector("[data-header]")
      const body = card.querySelector("[data-body]")
      const ingre = card.querySelector("[data-ingre]")
      const img = card.querySelector("[data-photo]")

      header.textContent = post.title
      body.textContent = post.text
      ingre.textContent = post.ingredients

      const imgContent = document.createElement('img');
      imgContent.src = post.img;
      img.appendChild(imgContent);

      postCardContainer.append(card)
      return {
        title: post.title,
        ingre: post.ingredients,
        element: card
      }
    })
})

Sorry for the long post, I thank you guys already

I tried to search on google and forums, but can’t find exactly what i need

Sequelize – Avoid named binding parameters when using sequelize.fn

I am using Sequelize 6.21.3 to access a MariaDB 10.8 database. In that database i have a Users table that contains a password column which is encoded with the SQL function ENCODE.

Now I’d like to update a user’s password via sequelize. I do the following:

user.update({
    password: sequelize.fn(
        "encode",
        password,
        "ENCODE_PASSWORD"
    )
});

However if the password contains a $ sign (like in "123$foo"), the update query results in an error:

Named bind parameter "$foo" has no value in the given object.

I understand that sequelize tries to fill the value of the $foo parameter, however $foo is not supposed to be a parameter, it is just a literal string.

How do I avoid this behavior?

math calculation error using HTML and JavaScript [closed]

I am trying to build an application that automatically calculates costs given specific values. But for some reason, the output is off. Thank you in advance for any help.
profit margin and total cost is wrong

Here is the code for my profit margin and total cost:

const plancredit = 5;
const alignercredit = 5;
const plancost = 7000;
const max = Math.max(upalign, lowalign);
const planningCostA = plancredit * 1400;
const planningCostB = plancredit * 1300;
const planningCostC = plancredit * 1200;
const planningCostD = plancredit * 1000;
const totalaligner = upalign + lowalign;
const treatmentduration = max * 14;
const alignercost = (totalaligner * 1500);
const alignercosta = (totalaligner * 1400);
const alignercostb = (totalaligner * 1300);
const alignercostc = (totalaligner * 1200);
const alignercostd = (totalaligner * 1000);

const totalcost = (plancost + alignercost + other + scanfee);
const totalcosta = (plancost + alignercosta + other + scanfee);
const totalcostb = (plancost + alignercostb + other + scanfee);
const totalcostc = (plancost + alignercostc + other + scanfee);
const totalcostd = (plancost + alignercostd + other + scanfee);

<tr>
  <td>Profit Margin (%)</td>
  <td>${(((patcharge-totalcost) / patcharge)*100).toFixed(1)}</td>
  <td>${(((patcharge-totalcosta) / patcharge)*100).toFixed(1)}</td>
  <td>${(((patcharge-totalcostb) / patcharge)*100).toFixed(1)}</td>
  <td>${(((patcharge-totalcostc) / patcharge)*100).toFixed(1)}</td>
  <td>${(((patcharge-totalcostd) / patcharge)*100).toFixed(1)}</td>
</tr>

The total cost are off by either 500, 1000, and 2000.

Dockerized App cant connect to a local mongodb server without docker

I’m trying to connect to MongoDB in a dockerized app, and i dont know how to do this.

My Docker File

FROM node:18-bullseye

WORKDIR /Bot_granada_rp

COPY . .

RUN npm install

RUN npm install -g pm2

EXPOSE 27017


CMD ["pm2-runtime", "start", "index.js"]

It’s a discord bot. I have an anti-crash. The anti-crash sends this:

MongooseError: Operation criptos.find() buffering timed out after 10000ms at Timeout.(/Bot_granada_rp/node_modules/mongoose/lib/drivers/node-mongodb-native/collection.js:185:23)
at listOnTimeout (node:internal/timers:569:17)
at process.processTimers (node:internal/timers:512:7)

I’m trying to insert the time in a text field inverted

I’m trying to create a regular expression mask to insert the time starting with seconds, minutes and finally the hour.

For example, showing 12:34:56 after typing – 6, 5, 4, 3, 2, 1

I tried creating a regular expression, but I’m not very experienced. If you can help me I would be very grateful
This is my regex that didn’t work:

function timeinvert(v) {
  v = v.replace(/D/g, "");
  v = v.replace(/(d)(d)/, "$2$1")
  v = v.replace(/(d)(d)(d)/, "$3:$2$1")
  v = v.replace(/(d)(d)(d)(d)/, "$4$3:$2$1")
  v = v.replace(/(d)(d)(d)(d)(d)/, "$5:$4$3:$2$1")
  v = v.replace(/(d)(d)(d)(d)(d)(d)d+?$/, "$6$5:$4$3:$2$1")
  // v = v.replace(/(d{2})(d)/, "$1:$2")
  // v = v.replace(/(d{2})d+?$/, "$1")
  return v;
}

How to define a static constructor within a JS class?

How do you define a static constructor within a JS class?

I managed to write something that somehow works but it requires to write a specific codepath in constructor for when an IngredientsDB object is instantiated from the static method IngredientsDB.fromXML():

class IngredientsDB {
  constructor(...args) {
    if (arguments.length === 0) {
      this.document = null;
    } else {
      this.document = new DOMParser().parseFromString("<ingredients/>", "text/xml");
      // ... process args
    }
  }
  static fromXML = function fromXML(xmlString) {
    const db = new this;
    db.document = new DOMParser().parseFromString(xmlString, "text/xml");
    return db;
  }
  toString() { // concise output for testing
    const ingredientsNode = this.document.firstChild;
    let str = ingredientsNode.tagName + ":";
    let childNode;
    for (childNode of ingredientsNode.children)
      str += " " + childNode.tagName;
    return str;
  }
}

const xml = document.getElementById("ingredients").textContent.trimStart();
console.log(IngredientsDB.fromXML(xml).toString());
<script id="ingredients" type="text/xml">
<ingredients>
  <tomato/>
  <meat/>
  <cheese/>
</ingredients>
</script>

Acces to django context to html js

I’m trying to access to my django context from my views.py to my index.html page but something wrong and I need help.

My context from django called in my html template is working fine with:

{% for i in links %}
            <li><a>{{i.id}}; {{i.sequence}}; {{i.category}};{{i.link}}; {{i.description}}; {{i.image}}</a></li>
{% endfor %}

out of that give me:

2; 0; OUTILS DU QUOTIDIEN – DIVERS;https://safran.fabriq.tech/login; La solution tout-en-un pour le QRQC Digitalisé ! Détectez, escaladez, résolvez vos problèmes plus rapidement et améliorez votre performance.; Logos/Fabriq_0ER4lsy.png
3; 0; OUTILS DU QUOTIDIEN – DIVERS;https://improve.idhall.com/; Improve est la plateforme collaborative de Safran pour piloter toutes les initiatives de progrès du Groupe (de l’idée au projet d’amélioration).; Logos/Improve_lFlB5pY.png
4; 0; OUTILS DU QUOTIDIEN – DIVERS;https://portal.bi.group.safran/reports/powerbi/REPORTS/Safran%20Aircraft%20Engines/Develop/Innovation-Participative-SAE/IP-FULL-SAE?rs:Embed=true; PowerBI IP Safran Aircraft Engines.; Logos/Gestor_gVEU0RR.png

but in my js:

        <script>
            var linksData = '{{links}}';

            for(let j=0;j< linksData.length;j++)
            {
                document.writeln('<p class="card-text">"'+String(linksData[j].category)+'"</p>');
            }          

        </script>

give me :

"undefined"

"undefined"

"undefined"

"undefined"

"undefined"

"undefined"

"undefined"

"undefined"

"undefined"

"undefined"

"undefined"

"undefined"

"undefined"

...

My attempt was also with

 var linksData = JSON.parse('{{links|escapejs}}');

but still not working and return nothing, could you help me please?

Thanks a lot
Philippe

how to find an entry in an array based on two conditions [duplicate]

Say I have the following:

const allowedDomains=[
    {"domain":"abc.com","apiKey":"1","from":"Goofy"},
    {"domain":"def.com","apiKey":"2","from":"Mickey Mouse"},
    {"domain":"chi.com","apiKey":"3","from":"Donald Duck"},
];

I have two values in my code that are:

let domain = 'abc.com';
let apiKey = '1';

I want to check if there is an entry in the array that satisfies both conditions. So the above should return true.

If the values are:

let domain = 'abc.com';
let apiKey = '2';

it should return false.

I thought to use find but don’t know how to use it with two conditions. What is the quickest way to do it?
With one condition it could be:

let from = allowedDomains.find(a => a.domain === domain)?.from;

What for two conditions?

How to filter metadata where data inside the metadata is having multpile id’s stored as giant string with comma seperated

I am using Chroma from langchain.vectorstores import Chroma According to chroma’s doc, it only allows $eq, $in etc for metadata filed.

the metadata is structured as

 {
    userids: '217cdc91-dssd-fasd,3850d-sdsw-150, 217cdc91-dssd-fasd',
    created: 1725908639288,
    description: 'GitHub Pull Requests data',
  }

i want to retrieve documents if i mentioned user id present in the userids using collection.query metadata filters

for reference i looked this documentation
https://cookbook.chromadb.dev/core/filters/#metadata-filters

kindly help me to figure out a method to retreive the data if any one id matches within the userids