Skip to content

Commit

Permalink
Merge pull request #8 from dawidjaniga/docs/npm-badge
Browse files Browse the repository at this point in the history
Docs/npm badge
  • Loading branch information
dawidjaniga authored Jun 23, 2019
2 parents 1e8ebb1 + 1f98e22 commit 914e85a
Show file tree
Hide file tree
Showing 13 changed files with 283 additions and 134 deletions.
85 changes: 63 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
# MapCountdown

[![Build Status](https://travis-ci.org/dawidjaniga/map-countdown.svg?branch=master)](https://travis-ci.org/dawidjaniga/map-countdown)
[![Coverage Status](https://img.shields.io/codecov/c/github/dawidjaniga/map-countdown.svg)](asd) [![Greenkeeper badge](https://badges.greenkeeper.io/dawidjaniga/map-countdown.svg)](https://greenkeeper.io/)
![Build Status](https://img.shields.io/david/dawidjaniga/map-countdown.svg)
[![Coverage Status](https://img.shields.io/codecov/c/github/dawidjaniga/map-countdown.svg)](https://codecov.io/gh/dawidjaniga/map-countdown)
![Dependencies status](https://img.shields.io/david/dawidjaniga/map-countdown.svg)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[![Greenkeeper badge](https://badges.greenkeeper.io/dawidjaniga/map-countdown.svg)](https://greenkeeper.io/)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![semantic-release](https://img.shields.io/npm/v/map-countdown.svg)](https://www.npmjs.com/package/map-countdown)

## Overview
MapCountdown is a JavaScript browser library which shows countdown with additional route filling on a map. It uses Google Map to draw polygons from provided paths and animates them according to time left.
Expand All @@ -13,32 +16,60 @@ MapCountdown is a JavaScript browser library which shows countdown with addition


## Usage
### Steps
1. Install
2. Prepare route points
3. Prepare Google Maps API Key
4. Add MapCountdown
1. With module bundler
2. In browser

### With module bundler - Webpack, Rollup, Parcel etc.
1. Install MapCountdown

### Install
``` bash
yarn install map-countdown
```
or
``` bash
npm install map-countdown
```
2. Import MapCountdown

### Prepare route points
To draw polygons on Google Maps we need to pass an array of route points. To do that we can import **.tcx** file and use `route-parser` CLI to parse it.

1. First ensure `map-countdown` is installed. Next you have to download workout in **.tcx** format. The most popular sport tracking app are supported:
1. Endomondo - [Instructions](https://support.endomondo.com/hc/en-us/articles/213219528-File-Export)
2. Polar - [Instructions](https://support.polar.com/en/support/how_do_i_export_individual_training_sessions_from_polar_flow_web_service)
3. Garmin - [Instructions](https://support.garmin.com/pl-PL/?faq=W1TvTPW8JZ6LfJSfK512Q8)
2. After download open a terminal in your project's directory and run:
```bash
route-importer ~/Downloads/training-file.tcx routePoints.js
```
`route-importer` will parse _TCX_ file and save it with given name.

### Prepare Google Maps API Key
Google Maps need an api key for working. If you don't have a key already, don't worry. You can create new one below:
https://developers.google.com/maps/documentation/embed/get-api-key
Replace _'GOOGLE_API_KEY'_ from chosen snippet below with your api key.

### Add MapCountdown
#### With module bundler
``` javascript
import MapCountdown from 'map-countdown'
import routePoints from './../path/to/routePoints'
import './../path/to/routePoints'

new Countdown({
selector: '#countdown',
key: 'GOOGLE_API_KEY',
meta: '2019-07-13 11:30:00',
routePoints,
meta: '2019-07-13 11:30:00'
})
```

### Browser
#### In browser
You have to include _routePoints.js_ along with MapCountdown, which load those points automatically.
Next, add container for countdown (ie. _#countdown_).
``` html
<html lang="en">
<html>
<head>
<title>MapCountdown Example</title>
<script src="https://unpkg.com/map-countdown@latest/dist/bundle.js"></script>
Expand All @@ -48,7 +79,6 @@ new Countdown({
new MapCountdown({
selector: '#countdown',
key: 'GOOGLE_API_KEY',
routePoints: routePoints,
meta: '2019-07-13 11:30:00',
})
})
Expand All @@ -60,16 +90,27 @@ new Countdown({
</body>
</html>
```
#### jQuery
You can use jQuery, if you will.
``` html
<html>
<head>
<title>MapCountdown Example</title>
<script src="https://unpkg.com/map-countdown@latest/dist/bundle.js"></script>
<script src="routePoints.js"></script>
<script>
$(function () {
new MapCountdown({
selector: '#countdown',
key: 'GOOGLE_API_KEY',
meta: '2019-07-13 11:30:00',
})
})
</script>
<body>

### Prepare route points
To draw polygons on Google Maps we need to pass an array of route points. To do that we can import **.tcx** file and use `route-parser` CLI to parse it.
<div id="countdown"></div>

1. First ensure `map-countdown` is installed. Next you have to download workout in **.tcx** format. The most popular sport tracking app are supported:
1. Endomondo - [Instructions](https://support.endomondo.com/hc/en-us/articles/213219528-File-Export)
2. Polar - [Instructions](https://support.polar.com/en/support/how_do_i_export_individual_training_sessions_from_polar_flow_web_service)
3. Garmin - [Instructions](https://support.garmin.com/pl-PL/?faq=W1TvTPW8JZ6LfJSfK512Q8)
2. After download open a terminal in your project's directory and run:
```bash
route-importer ~/Downloads/training-file.tcx routePoints.js
```
`route-importer` will parse _TCX_ file and save it with given name.
</body>
</html>
```
1 change: 1 addition & 0 deletions __mocks__/styleMock.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = {}
196 changes: 95 additions & 101 deletions bin/route-parser.js
100755 → 100644
Original file line number Diff line number Diff line change
@@ -1,131 +1,125 @@
'use strict'
#!/usr/bin/env node
'use strict';

Object.defineProperty(exports, '__esModule', { value: true })
Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) {
return ex && typeof ex === 'object' && 'default' in ex ? ex['default'] : ex
}
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var path = _interopDefault(require('path'))
var fs = _interopDefault(require('fs'))
var parser = _interopDefault(require('xml2json'))
var path = _interopDefault(require('path'));
var fs = _interopDefault(require('fs'));
var parser = _interopDefault(require('xml2json'));

function _classCallCheck (instance, Constructor) {
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError('Cannot call a class as a function')
throw new TypeError("Cannot call a class as a function");
}
}

function _defineProperties (target, props) {
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i]
descriptor.enumerable = descriptor.enumerable || false
descriptor.configurable = true
if ('value' in descriptor) descriptor.writable = true
Object.defineProperty(target, descriptor.key, descriptor)
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}

function _createClass (Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps)
if (staticProps) _defineProperties(Constructor, staticProps)
return Constructor
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}

var WINDOW_ROUTE_POINTS_KEY = '__MapCountdownRoutePoints';

var RouteParser =
/* #__PURE__ */
(function () {
function RouteParser (file, outputFilePath) {
_classCallCheck(this, RouteParser)
/*#__PURE__*/
function () {
function RouteParser(file, outputFilePath) {
_classCallCheck(this, RouteParser);

this.file = file;
this.outputFilePath = outputFilePath;
}

this.file = file
this.outputFilePath = outputFilePath
_createClass(RouteParser, [{
key: "parse",
value: function parse() {
var parsedFile = this.parseFileToJson(this.file);
this.saveFile(this.outputFilePath, this.makeWindowAttachable(this.parsePoints(parsedFile)));
}
}, {
key: "parseFileToJson",
value: function parseFileToJson(file) {
var xml = fs.readFileSync(file, 'utf8');
return JSON.parse(parser.toJson(xml));
}
}, {
key: "makeWindowAttachable",
value: function makeWindowAttachable(data) {
return "window.".concat(WINDOW_ROUTE_POINTS_KEY, " = ").concat(JSON.stringify(data));
}
}, {
key: "saveFile",
value: function saveFile(file, data) {
var a = path.resolve(file);
return fs.writeFileSync(a, data, 'utf8');
}
}, {
key: "parsePoints",
value: function parsePoints(parsedFile) {
var _this = this;

_createClass(RouteParser, [
{
key: 'parse',
value: function parse () {
var parsedFile = this.parseFileToJson(this.file)
this.saveFile(this.outputFilePath, this.parsePoints(parsedFile))
}
},
{
key: 'parseFileToJson',
value: function parseFileToJson (file) {
var xml = fs.readFileSync(file, 'utf8')
return JSON.parse(parser.toJson(xml))
}
},
{
key: 'saveFile',
value: function saveFile (file, data) {
var a = path.resolve(file)
return fs.writeFileSync(a, data, 'utf8')
}
},
{
key: 'parsePoints',
value: function parsePoints (parsedFile) {
var _this = this

var points =
parsedFile.TrainingCenterDatabase.Activities.Activity.Lap.Track
.Trackpoint

var hasDefinedDistance = function hasDefinedDistance (point) {
return point.DistanceMeters
}

return points.filter(hasDefinedDistance).map(function (point) {
return _this.purifyTrackPoint(point)
})
}
},
{
key: 'purifyTrackPoint',
value: function purifyTrackPoint (point) {
var position = point.Position || {}

if (!point.Position) {
throw new Error('Point has no position')
}

return {
Position: {
LatitudeDegrees: position.LatitudeDegrees,
LongitudeDegrees: position.LongitudeDegrees
},
DistanceMeters: point.DistanceMeters,
AltitudeMeters: point.AltitudeMeters || '0'
}
}
var points = parsedFile.TrainingCenterDatabase.Activities.Activity.Lap.Track.Trackpoint;

var hasDefinedDistance = function hasDefinedDistance(point) {
return point.DistanceMeters;
};

return points.filter(hasDefinedDistance).map(function (point) {
return _this.purifyTrackPoint(point);
});
}
}, {
key: "purifyTrackPoint",
value: function purifyTrackPoint(point) {
var position = point.Position || {};

if (!point.Position) {
throw new Error('Point has no position');
}
])

return RouteParser
})()
return {
Position: {
LatitudeDegrees: position.LatitudeDegrees,
LongitudeDegrees: position.LongitudeDegrees
},
DistanceMeters: point.DistanceMeters,
AltitudeMeters: point.AltitudeMeters || '0'
};
}
}]);

return RouteParser;
}();

var runFromCLI = require.main === module
function main () {
var file = process.argv[2]
var outputFilePath = process.argv[3]
var parser = new RouteParser(file, outputFilePath)
var runFromCLI = require.main === module;
function main() {
var file = process.argv[2];
var outputFilePath = process.argv[3];
var parser = new RouteParser(file, outputFilePath);

try {
parser.parse()
console.log(
'\u2705 File '
.concat(file, ' successfully parsed and saved to ')
.concat(path.resolve(outputFilePath))
)
parser.parse();
console.log("\u2705 File ".concat(file, " successfully parsed and saved to ").concat(path.resolve(outputFilePath)));
} catch (e) {
throw e
throw e;
}
}

if (runFromCLI) {
main()
main();
}

exports.main = main
exports.main = main;
Loading

0 comments on commit 914e85a

Please sign in to comment.