Category: javascript

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 https://github.com/alexandru360/PresentationBingoCards/ . Those are my blog posts for Bingo : ( scroll below for the post)
NrLink
1Create meeting
2Create Tests
3Finalize Create meeting
4Sharing meeting
5Keep Score
6Add obsolete
7Finalizing obsolete
8End meeting
9Dockerize tests
10Azure CI tests
11Yarn workspaces
12CLI
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
20Angular
21Deploy Angular to GitHub
22WebAPI and Web
23Documentation
24Documentation of the code
25Conclusions

(Now the actual blog post for Bingo Meetings project)

The easy way to test an application is to make a simple command line version . You can find the code at https://github.com/alexandru360/PresentationBingoCards/blob/master/bingo-meeting-console/index.ts

You can run also with Docker by running https://github.com/alexandru360/PresentationBingoCards/blob/master/dockerize/bingo_cli.bat

What were the steps ?

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

https://github.com/alexandru360/PresentationBingoCards/blob/master/bingo-meeting-console/package.json

2. Create an index.ts with the required CLI ( hint: prompt, figlet, chalk , username , inquirer,console.table are good to have) – read https://dev.to/hugodias/building-your-first-interactive-node-js-cli-1g2c

3. Created an async main() and calling with

(async () => {
  try {
      await main();
        } catch (e) {
      console.log(JSON.stringify(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 https://github.com/alexandru360/PresentationBingoCards/releases/tag/CLI

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 http://leafletjs.com/ . ( 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 http://www.geo-spatial.org/file_download/29413 you can obtain data for Romania counties. ( If your country is, for example , USA , you can follow this link : http://lmgtfy.com/?q=usa+geojson )

Define a javascript variable (varMyCounties) = your json.

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

            L.tileLayer(‘https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw’, {
                maxZoom: 7,
                minZoom: 7,
                attribution: ‘Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ‘ +
                    ‘<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ‘ +
                    ‘Imagery © <a href="http://mapbox.com">Mapbox</a>’,
                id: ‘mapbox.light’
            }).addTo(map);

            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 = feature.properties.NAME;

//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.lat, center.lng], { fillColor: "#f00", radius: radCircle })
                        .bindLabel(feature.properties.NAME_UTF8 +’:’+ val, { direction: ‘left’})
                       
                        .addTo(map);

                }
        }

 

 

You can see an example at http://ropwebmvc20160213092204.azurewebsites.net/Home/ShowMap/1AEA07DB-4F14-42DC-989A-91241A020182

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.
Code:
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”).show();
$(“#divOK”).hide();
});
 $(“#divWait”).ajaxStop(function() {
$(“#divWait”).hide();
$(“#divOK”).show();
});

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.