To see the progress , it is good to have a calendar.Discovered angular-calendar – to show events.
The exemaple at https://mattlewis92.github.io/angular-calendar/#/kitchen-sink is pretty self explanatory.
However, another 3 hours passed to have the display.
The ( quasy – final ) result can be seen below ( taken from http://tiltwebapp.azurewebsites.net/AngTilt/tilt/public/ignatandrei )
VSCode
angular-calendar
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
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
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 © <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
If you pass the datetime in json format ( and apply to the view with Knockout) then you will need some formatting – because the standard format is not good .
So I have used http://blog.stevenlevithan.com/archives/date-time-format – easy to understand and with examples.
Reccomended!
$(“#divWait”).ajaxStart(function() {
$(“#divWait”).show();
$(“#divOK”).hide();
});
$(“#divWait”).ajaxStop(function() {
$(“#divWait”).hide();
$(“#divOK”).show();
});