Category: javascript

i’m trying to use caliper hyperledger to evaluate a local network blockchain, it works correctly when i use the standard exemple simple.json that i found in this tuto:https://github.com/MarcoMazzoni/quorum-caliper-benchmarks but i want to applicate it on my smartcontract , so i start to test a simple smartcontract with only two functions addDrug(name,price,form, ref) and getDrug(ref),the workload file i used is like below i’m not sure on how it should be:

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

'use strict';

module.exports.info = 'adding drugs';

let drugList = [];
let txnPerBatch;
let price=1025;
let ref=22;

let bc, contx;
module.exports.init = function(blockchain, context, args) {
  
   if (!args.hasOwnProperty('txnPerBatch')) {
     args.txnPerBatch = 1;
   }
 
  txnPerBatch = args.txnPerBatch;
  bc = blockchain;
  contx = context;

  return Promise.resolve();
};

const dic = 'abcdefghijklmnopqrstuvwxyz';
/**
 * Generate string by picking characters from dic variable
 * @param {*} number character to select
 * @returns {String} string generated based on @param number
 */
function get26Num(number) {
  let result = '';
  while (number > 0) {
    result += dic.charAt(number % 26);
    number = parseInt(number / 26);
  }
  return result;
}

let prefix;
/**
 * Generate unique account key for the transaction
 * @returns {String} account key
 */
function generateAccount() {
  // should be [a-z]{1,9}
  if (typeof prefix === 'undefined') {
    prefix = get26Num(process.pid);
  }
  return prefix + get26Num(drugList.length + 1);
}

/**
 * Generates Users workload
 * @returns {Object} array of json objects
 */
function generateWorkload() {
  let workload = [];
  for (let i = 0; i < txnPerBatch; i++) {
    let DrugName = generateAccount();
    let form =generateAccount();
    drugList.push(DrugName);

    if (bc.bcType === 'fabric') {
      workload.push({
        chaincodeFunction: 'addDrug',
        chaincodeArguments: [DrugName, price.toString()]
      });
    } else {
      //Quorum
      workload.push({
        verb: 'addDrug',
        args: [DrugName, price,form,ref],
        //isPrivate: contx.contracts['Users'].isPrivate,
        //privateFor: contx.contracts['Users'].privateFor
      });
    }
  }
  return workload;
}

module.exports.run = function() {
  let args = generateWorkload();
  return bc.invokeSmartContract(contx, 'Users', 'v0', args, 100);
};

module.exports.end = function() {
  return Promise.resolve();
};

module.exports.drugList = drugList;

i create a benchconfg file and a networkconfig file then run my benchmark, but i get 0 success transaction and an error msg :TypeError: Cannot read property ‘contract’ of undefined.

I’m a beginner with caliper trying to understand how it works..so thnx for any help with a tutorial or a helpfull link !

I am facing an issue with the functionality of items in an HTML web application, which is a mix of Flask, Python, JavaScript, and HTML. The problem occurs specifically when accessing the application through a Raspberry Pi Zero 2W device.

On the Raspberry Pi Zero 2W, the elements fail to expand or display any options when clicked on. I have tested the application on different browsers on the Raspberry Pi, but the issue persists consistently.
issue
regular
If anyone has encountered a similar issue with items on a Raspberry Pi Zero 2W, particularly within a web application built with Flask, Python, JavaScript, and HTML, I would greatly appreciate any insights or suggestions. Thank you!

To resolve this problem, I have already tried updating the browser, clearing the cache, and adjusting the display settings on the Raspberry Pi, but none of these attempts have been successful.

I have a Vue Js Client project in which I am making requests from the beginning to my Django server which provides me with texts, image and video paths, these video and image paths are found in the root of my Django project within the Media folder, I need help to integrate my vue project after running the “npm run build” command and it has become static files, to my Django project so that I can use my app on a single port and take it to production, here Below I leave an example of a template in which I am using a video in one of my Vue components, since I think I have to readjust the paths of the videos and images to make them work.

<template>
  <div class="container-fluid px-0">
    <div class="video-wrapper">
      <video ref="videoRef" :src="require(`../../../media/${videoPath}`)" class="video-element" autoplay muted></video>
      <div class="video-caption container">
        <h2 class="RalewayFont multimedia_title" style="color: #F5811C;">{{ videoContent.titulo }}</h2>
        <p class="text-white description_Multimedia RalewayFont ">{{ videoContent.descripcion }}</p>
        <a href="#" class="btn btn-outline-light button_Multimedia RalewayFont" style="border-radius: 50px;" @click="restartVideo">Menú</a>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, inject } from 'vue';

export default {
  setup() {
    const data = inject('$data');
    const videoRef = ref(null);

    const playVideo = () => {
      videoRef.value.play();
    };

    const restartVideo = () => {
      videoRef.value.currentTime = 0;
      videoRef.value.play();
    };

    onMounted(() => {
      videoRef.value.addEventListener('ended', restartVideo);
      playVideo(); // Reproducir el video automáticamente al montar el componente
    });


    const videoPath = data.Multimedia_Principal[0].video;
    const videoContent = data.Multimedia_Principal[0];

    return {
      videoRef,
      videoPath,
      videoContent,
      restartVideo
    };
  }
};
</script>

enter image description here

Hi there and thank you for your help in advance.

I’m looking for some help with using a variable to dynamically replace a name in some text. I’m really stuck with this and would appreciate any help.

So far i’ve tried:

var name = 'Page2of4Sandor-0607231529Tyrell'
                var t = "Sandor"

                var prt1 = "/Page.of." + t + "gi"
                
                var reggy = new RegExp(prt1)
                console.log(name.replace(reggy, ''))

This seemed like sensible approach as

.replace(/Page.of.Sandor/gi, '')

Works just fine.
Any help appreciated.

If the model bound to the select using [(ngModel)] is null, undefined, or an empty string, then display/select the option with the label “select something…”.

 <select [(ngModel)]="model">
  <option>select something...</option>
  <option value="1">op-1</option>
  <option value="2">op-2</option>
 </select>

When I set the option with value of null and the model is null, then it match the option of select something:

 <option [value]="null">..

But when the model is changing to undefined then nothing is match- and what I want is to match the select something....

So I was thinking to do my own version of option directive and copy the behavior of option when setting the value.

The problem is I try to set the value but it doesn’t change as excepted.

    this._renderer.setProperty(this._element.nativeElement, 'value', ''); // null/undefiend/''

Any idea how to make this work?

Here my code I try to play with:

@Directive({ selector: '[ngxValue]', standalone: true })
export class NgSelectOption implements OnDestroy {
  /**
   * @description
   * ID of the option element
   */
  // TODO(issue/24571): remove '!'.
  id!: string;

  constructor(
    private _element: ElementRef,
    private _renderer: Renderer2,
    @Optional() @Host() private _select: SelectControlValueAccessor
  ) {
    if (this._select) this.id = (this._select as any)._registerOption();
  }

  // @Input('ngValue')
  // set ngValue(value: any) {
  //   if (this._select == null) return;
  //   this._select._optionMap.set(this.id, value);
  //   this._setElementValue(_buildValueString(this.id, value));
  //   this._select.writeValue(this._select.value);
  // }

  // @Input('value')
  // set value(value: any) {
  //   this._setElementValue(value);
  //   if (this._select) this._select.writeValue(this._select.value);
  // }

  @Input('ngxValue')
  set ngxValue(value: any) {
    console.log({ value });
    this._renderer.setProperty(this._element.nativeElement, 'value', '');
  }

  /** @internal */
  _setElementValue(value: string): void {
    this._renderer.setProperty(this._element.nativeElement, 'value', value);
  }

  /** @nodoc */
  ngOnDestroy(): void {
    if (this._select) {
      (this._select as any)._optionMap.delete(this.id);
      this._select.writeValue(this._select.value);
    }
  }
}

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, FormsModule, NgSelectOption],
  template: `
    <h1>Hello from {{name}}!</h1>
    <a target="_blank" href="https://angular.io/start">
      Learn more about Angular 
    </a><br>
    <select [(ngModel)]="model_undefined">
     <option disabled ngxValue>select something...</option>
     <option [value]="1">op1</option>
    </select>
    model_undefined: {{model_undefined|json}}
    <br>
    <select [(ngModel)]="model_null">
     <option disabled ngxValue>select something...</option>
     <option [value]="1">op1</option>
    </select>
    model_null: {{model_null|json}}
    <br>
    <select [(ngModel)]="model_empty_string">
     <option disabled ngxValue>select something...</option>
     <option [value]="1">op1</option>
    </select>
    model_empty_string: {{model_empty_string|json}}
    <br>
    <select [(ngModel)]="mode_with_value">
     <option disabled ngxValue>select something...</option>
     <option [value]="1">op1</option>
    </select>
    mode_with_value: {{mode_with_value|json}}

  `,
})
export class App {
  name = 'Angular';

  model_undefined = undefined;
  model_null = null;
  model_empty_string = '';
  mode_with_value = '1';
}

stackblitz

I want to pass to a method either a String or nothing.

My JSDoc looks like this:

/**
 * Explain...
 * @param {String|undefined} someVar
 */
runMethod(someVar) {}

I call the method either with an argument or without.

this.runMethod('a'); // all fine
this.runMethod();    // marked as missing arg

Calling it without an argument my IDE (WebStorm) undelines it as an error.

My solution is to define the method like this:

runMethod(someVar=undefined) {}

Is there a better way to let WebStorm know, the argument is optional?

Here I’m trying to add a filter for the “organisation” column . The profiles.js file pass neccessary inputs to the _status_table.erb file .

import { initDataTable, toggleProfileCoderIdField } from "./common/helpers"



function toggleSubmitProfileButton(updateLocked) {
  if (updateLocked === true) {
    $("#updateProfileSubmitButton").hide();
    $("#updateProfileSubmitButtonDisabled").show();
  } else {
    $("#updateProfileSubmitButton").show();
    $("#updateProfileSubmitButtonDisabled").hide();
  }
}

function processCoderIdUpdate() {
  var editProfileModal = $("#editProfileModal");
  var editProfileModalForm = $("#editProfileModal form");
  var submitEditProfileFormBtn = $("#updateProfileSubmitButton");

  var coderIdInput = $("#editProfileModal [data-name=profileCoderIdInput]");

  var updateRelatedRecordsDialogModal = $("#updateCoderIdModal");
  var updateRelatedRecordsBtns = $("[data-name='update-related-records']");
  var hiddenInputState = $("#profile_update_related_records");

  function isCoderIdRequiredForSelectedRole() {
    return !coderIdInput.is(":hidden");
  }

  function isCoderIdPresent() {
    return coderIdInput.val().length > 0;
  }

  function coderIdChanged(storedCoderId) {
    return (
      isCoderIdPresent() &&
      coderIdInput.val() &&
      coderIdInput.val() !== storedCoderId
    );
  }

  submitEditProfileFormBtn.on("click", function(e) {
    var storedCoderId = coderIdInput.data("storedCoderId");

    if (
      isCoderIdRequiredForSelectedRole() &&
      coderIdChanged(storedCoderId) &&
      storedCoderId
    ) {
      $(".profileCoderIdStoredValue").text(storedCoderId);
      $(".profileCoderIdNewValue").text(coderIdInput.val());

      editProfileModal.modal("hide");
      updateRelatedRecordsDialogModal.modal("show");

      updateRelatedRecordsBtns.on("click", function(e) {
        hiddenInputState.val($(this).data("value"));
        editProfileModalForm.submit();
      });
    } else {
      hiddenInputState.val(false);
      editProfileModalForm.submit();
    }
  });
}

export function toggleProfileModal(modalId) {
  $(modalId)
    .modal({ autofocus: false })
    .modal("show");
  $("[data-trigger='dropdown']").dropdown();

  toggleProfileCoderIdField(modalId);

  $(modalId + " [data-name=profileRoleIdInput]")
    .off()
    .on("change", function() {
      toggleProfileCoderIdField(modalId);
    });
}

function prepareEditProfilePath(profileId, userId) {
  return "/users/" + userId + "/profiles/" + profileId + "/edit.json";
}

function addOptionsForSelect(selectId, options) {
  var $select = $("#editProfileModal " + selectId);

  $select.empty();

  $.each(options, function(_key, object) {
    $select.append(
      $("<option></option>")
        .attr("value", object.value)
        .attr("selected", object.selected)
        .text(object.text)
    );
  });
}

function populateCoderIdInput(coderId) {
  $("#editProfileModal [data-name=profileCoderIdInput]").attr("value", coderId);
}

function updateFormUrl(profileId) {
  var $editProfileModal = $("#editProfileModal form");
  var currentUrl = $editProfileModal.attr("action");
  var regexp = new RegExp(
    currentUrl.substr(currentUrl.lastIndexOf("/") + 1) + "$"
  );
  var newUrl = currentUrl.replace(regexp, profileId);

  $editProfileModal.attr("action", newUrl);
}

export function toggleEditProfileModal(element) {
  $.ajax({
    type: "GET",
    contentType: "application/json",
    url: prepareEditProfilePath(
      element.dataset.profileId,
      element.dataset.userId
    ),
    success: function(result) {
      updateFormUrl(element.dataset.profileId);
      addOptionsForSelect(
        "#profile_organisation_id",
        result.organisationsForSelect
      );
      addOptionsForSelect("#profile_role_id", result.rolesForSelect);
      populateCoderIdInput(result.profile.coderId);
      toggleSubmitProfileButton(result.profile.updateLocked);
      toggleProfileModal("#editProfileModal");
      $("#editProfileModal [data-name=profileCoderIdInput]").attr(
        "data-stored-coder-id",
        result.profile.coderId
      );
    }
  });
}

document.addEventListener("DOMContentLoaded", function() {
  if (!document.querySelector(".profiles.index, .users.admin_edit")) return;

  initDataTable({ tableId: "#profilesTable", orderVal: 1, targetsVal: [0, 4] });
  processCoderIdUpdate();

  $(".menu .item").tab();

  initDataTable({
    tableId: "#profilesStatusTable",
    orderVal: 1,
    sortingDirection: "asc",
    targetsVal: [0, 7]
  });
});

And here on the ERB file I added custom filter for the table and related script for its functionality. But t does not filter records, When I select a value It shows an empty table, Any help would be appreciated. Here’s the code I modified,

<form id="filterForm">
  <div class="ui compact selection dropdown">
    <input type="hidden" id="organisationFilter">
    <i class="dropdown icon"></i>
    <div class="default text"> Organisation</div>
    <div class="menu">
      <% @all_organisations.each do |all_organisation| %>
        <div class="item" data-value="<%= all_organisation.name_or_code %>"><%= all_organisation.name_or_code %></div>
      <% end %>
    </div>
  </div>
  </form>

<table id="profilesStatusTable" class="ui celled table">  
  <%= render partial: 'profiles/table_actions' %>
  <thead>
    <tr>
      <th>
        <div class="ui checkbox">
          <%= check_box_tag 'select_all', 1, false, class: "select-all", onclick: "toggleAll(this)" %>
          <label></label>
        </div>
      </th>
      <th>Full Name</th>
      <th>Role</th>
      <th>Email</th>
      <th>Confirmed</th>
      <th>Organisation</th>
      <th>Coder ID</th>
      <th>Created at</th>
      <th>Last Updated</th>
      <th>Last Login at</th>
      <th>Login Count</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <% @profiles.each do |profile| %>
      <tr class="<%= cycle('row', 'alt-row') %>">
        <td><%= check_box_tag 'delete[]', profile.user.id %><label></label></td>
        <td><%= profile.user.full_name %></td>
        <td><%= role_as_string(profile.role_key) %></td>
        <td><%= profile.user.email %></td>
        <td>
          <span class="ui <%= profile.user.confirmed ? 'teal' : 'red'%> empty circular label"></span>
        </td>
        <td class="organisation-name"><%= profile.organisation.name_or_code %></td>
        <td><%= profile.coder_id.present? ? profile.coder_id : 'N/A' %></td>
        <td class="created-at"><%= localise_and_pretty_print(profile.user.created_at) %></td>
        <td class="last-updated-at"><%= localise_and_pretty_print(profile.user.updated_at) %></td>
        <td class="last-login-at"><%= localise_and_pretty_print(profile.user.last_login_at) %></td>
        <td><%= profile.user.login_count %></td>
        <td>
          <%= link_to admin_edit_user_path(profile.user), class: "icon-action", title: "Edit" do %>
            <i class="edit icon"></i>
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>
<div class="clear-float"></div>

  <table id="episode_header_fixed" class="ui table episode-header-fixed"></table>

  <div class="clear-float"></div>

  <div class="ui grid display-block">
    <div class="sixteen wide column">
    <div class="ui grid">
      <div class="eight wide column">
        <%= link_to excel_numerator_report_reports_path, class: "download-excel-button", id: "user_report_download_excel_link" do %>
          <span class="ui basic red button">Download</span>
        <% end %>
      </div>
    </div>
    </div>
  </div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>


<style>
  .ui.compact.dropdown {
    width: 160px;
  }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get the filter dropdown and table rows
  var filterDropdown = document.querySelector('.ui.selection.dropdown');
  var tableRows = document.querySelectorAll('#profilesStatusTable tbody tr');

  // Initialize the filter dropdown
  $(filterDropdown).dropdown({
    onChange: function(value, text) {
      // Loop through the table rows and hide/show based on the filter value
      tableRows.forEach(function(row) {
        var organisationName = row.querySelector('.organisation-name').textContent.toLowerCase();

        if (value === '' || organisationName.includes(value.toLowerCase())) {
          row.style.display = '';
        } else {
          row.style.display = 'none';
        }
      });
    }
  });

  // Show all table rows initially
  tableRows.forEach(function(row) {
    row.style.display = '';
  });

  // Add an event listener to the form for submit event
  document.getElementById('filterForm').addEventListener('submit', function(event) {
    event.preventDefault();
  });
}); 

</script>

And to get the organisation names to the dropdown I included this in the profiles_controller

def index
    authorize :profile
    
    set_organisation_considering_role
    @profiles = policy_scope(Profile).filtering(by_organisation: params[:organisation_id])
                                     .includes(:user, notifications: :degrees)
                                     .preload(:organisation)

    @grouped_notifications = @profiles.joins(notifications: :degrees)
                                      .group(:id, :"notifications.kind", :"degrees.kind")
                                      .count

    @all_organisations = Organisation.all.order(name: :asc) // The line I added

  end


 

I’m having a hard time. So I’m trying to make an array of strings, but when I do Array.push it gives me an indexed array.

So I’m trying to figure out how to accomplish this. I’m getting a string “April”,

I have an array initialized as var months = [];

I do a months.push() for the variable I’m iterated through, I know is a string. When I do a console.log() it gives me a indexed array.

When i pass this I need it to be ['April','May','June']

not

[
   0: "April",
   1: "May",
   2: "June"
]

I have a table with an input image box and an input text box. My problem is adding these inputs to by IndexedDB database.

I first started by using local storage but realized I needed a more advanced database. I have tried using a button with its onclick function but that didnt work either.

I want to sort the drop down items, can anyone tell me how to do this?

<select data-filter="dropdown" name="place_custom_role" data-name="custom_role">  
  <option value="">Select</option>
  <option value="Advanced level">Advanced level</option>
  <option value="Basic level">Basic level</option>
  <option value="Certification level">Certification level</option>
  <option value="Clinical (ort)">Clinical (ort)</option>
</select>

I am sorry, i am a newbie of jquery. I want to get the new order like this:

<select data-filter="dropdown" name="place_custom_role" data-name="custom_role">  
  <option value="">Select</option>
  <option value="Basic level">Basic level</option>
  <option value="Advanced level">Advanced level</option>
  <option value="Certification level">Certification level</option>
  <option value="Clinical (ort)">Clinical (ort)</option>
</select>

Site is multilingual translated with WPML.

I am struggling to Sequelize with a certain condition. Here is the code:

let apiList = [{id: 1, name: "A"}, {id: 3, name: "C"}];
let currentList = Model.findAll(); // [{id: 1, name: "A"}, {id: 2, name: "B"}, {id: 3, name: "C"}];

// I want to delete unmatching records with IDs from apiList
// Like I want to have these records only in my model db.
// [{id: 1, name: "A"}, {id: 3, name: "C"}];

My end goal is I want to have a newly updated currentList which does not have any unmatching IDs with apiList.

Is there any way like using destroy() method in Sequelize?

Please help me out.

I receive a date from a database and log them in my server code (Node.js). It’s formatted like this:

Wed Jul 05 2023 00:00:00 GMT-0500 (Central Daylight Time)

Then I do absolutely nothing to it, send to my client, and log what it received:

"2023-07-05T05:00:00.000Z"

How is this possible? What’s happening?

var button = document.getElementById(“enter”);

var input = document.getElementById(“userInput”);

var ul = document.querySelector(“ul”)

var deleteBtns = document.getElementsByClassName(“delete”);

var items = ul.getElementsByTagName(“li”);

//add event listener to first 6 btns in HTML file

for(var i = 0; i < deleteBtns.length; i++){

deleteBtns[i].addEventListener("click", removeParent, false);

}

//from StackOverflow:

function removeParent(evt) {

evt.target.removeEventListener(“click”, removeParent, false);

evt.target.parentNode.remove();

}

//click on a list item and it strikethroughs the text

function lineThrough(event){

var a=event.target;



if(count==0)

{

    

    a.classList.add("done");

}

else

{

    a.classList.toggle("done");

}

count++;

}

ul.onclick = function(event){

var target = getEventTarget(event);

target.classList.toggle("done");

}

//adding new items:

function inputLength(){

return input.value.length;

}

function createListElement() {

var btn = document.createElement("button");

btn.innerHTML = "Delete";

btn.onclick = removeParent;

var li = document.createElement("li");

li.appendChild(document.createTextNode(input.value));

li.innerHTML = li.innerHTML + " ";

li.appendChild(btn);

ul.appendChild(li);

input.value="";

}

function addToListAfterClick(){

if(inputLength() > 0){

        createListElement();

    }

}

function addToListAfterKeypress(event){

if(inputLength() > 0 && event.keyCode === 13) {

    createListElement();

}

}

GeteventTarget and the argument in the remove parent function

enter image description here

enter image description here

your textI am studying javascript.
your textI’m using the addEventListener function, but why doesn’t the autocomplete list appear when I type an event in the first argument?
your textI’m using the addEventLi
stener function, but why doesn’t the autocomplete list appear when I type an event in the first argument?
your textI’ve rebooted, pressed ctrl+space, and installed all the extensions related to javascript. But I couldn’t solve it.

your textHow do I get an intellisense related to the event to appear like the bottom picture?

your textI’ve rebooted, pressed ctrl+space, and installed all the extensions related to javascript. But I couldn’t solve it.

I have a shapefile hosted on a local geoserver that represents canada’s land border, which is about 30MB of size. I want to create a vector tile layer of it with openlayers.
Here is the piece of code:

const map = new Map({
  target: 'map',
  layers: [
    new VectorTileLayer({
      source: new VectorTile({
        format: new MVT(),
        url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/ogsl:canada_land@EPSG%3A4326@pbf/{z}/{x}/{-y}.pbf'
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

It works fine, the it sometimes renders really slowly. It can somtimes take up to 30 seconds for a tile of a few kB to load. But it is not always like this. It sometimes takes a few ms for the same size of request. Here is an example:

I fail to understand what I can change to improve this. Is it on my geoserver that the problem resides, or more on the client side, how I call the layer?
Any tips would be really helpful!