Category: javascript

TILT-calendar- part 18

To see the progress , it is good to have a calendar.Discovered angular-calendar – to show events.

The exemaple at is pretty self explanatory.

However, another 3 hours passed to have the display.

The ( quasy – final ) result can be seen below ( taken from )




Bingo for meetings- Adding a CLI application–part 12


Bingo is a small project, written in TypeScript , and developed with Alexandru Badita in launch break (one hour - more or less). You can find sources at . Those are my blog posts for Bingo : ( scroll below for the post)
1Create meeting
2Create Tests
3Finalize Create meeting
4Sharing meeting
5Keep Score
6Add obsolete
7Finalizing obsolete
8End meeting
9Dockerize tests
10Azure CI tests
11Yarn workspaces
13Intermezzo - CLI improvements
14typescript compile run with node
15NestJS ,swagger and create a meeting
16Finalizing API
17Intermezzo - jest vs jasmine error
18Refactor WebAPI and test service
19Heroku Deploy NestJs
21Deploy Angular to GitHub
22WebAPI and Web
24Documentation of the code

The easy way to test an application is to make a simple command line version . You can find the code at

You can run also with Docker by running

What were the steps ?

1. Install the @types/node, ts-node , typescript and others – see

2. Create an index.ts with the required CLI ( hint: prompt, figlet, chalk , username , inquirer,console.table are good to have) – read

3. Created an async main() and calling with

(async () => {
  try {
      await main();
        } catch (e) {


4. Modify package.json  to have

“main”: “dist/index.js”,

“types”: “dist/index.d.ts”,

“scripts”: {

“start”: “ts-node index.ts”,

“build”: “tsc”,

“compile”: “tsc”


5. Put in the root package

“scripts”: {

“test”: “cd bingo-meeting-objects-test && yarn test”,

“runConsole”: “cd bingo-meeting-console && yarn start”


and then run yarn runConsole

I can say that the C# console experience is better 😉

You can download the source code from

Leaflet and maps

if you want to display data on maps on the web, then you have a solution for javascript: Leaflet.

First , download the css and js for leaflet from . ( and also some plugins, such as lealflet label)  You can include like this:

<link href="~/Scripts/leaflet/leaflet.css" rel="stylesheet"/>
<link href="~/Scripts/leafletlabel/leaflet.label.css" rel="stylesheet"/>

<script src="~/Scripts/leaflet/leaflet.js"></script>

<script src="~/Scripts/leafletlabel/leaflet.label.js"></script>

Then you must obtain the data for the map as GeoJson  – for example, from you can obtain data for Romania counties. ( If your country is, for example , USA , you can follow this link : )

Define a javascript variable (varMyCounties) = your json.

$( document ).ready(function() {
            map =‘map’).setView([46,25], 7); //here put your country coordinates

            L.tileLayer(‘{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw’, {
                maxZoom: 7,
                minZoom: 7,
                attribution: ‘Map data &copy; <a href="">OpenStreetMap</a> contributors, ‘ +
                    ‘<a href="">CC-BY-SA</a>, ‘ +
                    ‘Imagery © <a href="">Mapbox</a>’,
                id: ‘mapbox.light’

            L.geoJson(varMyCounties, {
                onEachFeature: onEachFeature


//customize the display

function onEachFeature(feature, layer) {
            if (feature.geometry && feature.geometry.type)
                if (feature.geometry.type === ‘Polygon’) {

                    // Get bounds of polygon
                    var bounds = layer.getBounds();
                    // Get center of bounds
                    var center = bounds.getCenter();
                    // Use center to put marker on map

                    var countyName =;

//here put a circle on map, depending on the countyName
  radCircle = (40 – 10) * val + (10 * @max – 40 * @min);
                    radCircle = radCircle / (@max – @min);
                    var circle = L.circleMarker([, center.lng], { fillColor: "#f00", radius: radCircle })
                        .bindLabel( +’:’+ val, { direction: ‘left’})




You can see an example at

Jquery and multiple Ajax

I have had 2 occasions where I need to know when the ajax call have been finished:
  1. When in the beginning of page I have to load specific items that the user have been seen last time
  2. When the page was full with ajax call  – and there was also a “submit” button that should send the information (saved already ) that the user have finished entering the fields .
So – jquery have 2 methods: ajaxStart and ajaxStop.
Put 2 divs on the page :
<div id=”divWait” style=”display:none”> Please wait…</div>
<div id=”divOK” style=”display:none”> All data submitted</div>
And put this on javascript:
$(“#divWait”).ajaxStart(function() {
 $(“#divWait”).ajaxStop(function() {

Andrei Ignat weekly software news(mostly .NET)

* indicates required

Please select all the ways you would like to hear from me:

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.