Cory McWilliams
e10803de68
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4396 ed5197a5-7fde-0310-b194-c3ffbd925b24
530 lines
15 KiB
JavaScript
530 lines
15 KiB
JavaScript
import {LitElement, html, unsafeHTML, css, guard, until} from './lit-all.min.js';
|
|
import * as tfrpc from '/static/tfrpc.js';
|
|
import * as polyline from './polyline.js';
|
|
import {gpx_parse} from './gpx.js';
|
|
|
|
const k_client_id = '28276';
|
|
const k_redirect_url = 'https://tildefriends.net/~cory/gg/login';
|
|
|
|
const k_color_snow = [128, 128, 255, 255];
|
|
const k_color_ice = [160, 160, 255, 255];
|
|
const k_color_water = [0, 0, 255, 255];
|
|
const k_color_dirt = [128, 129, 130, 255];
|
|
const k_color_pavement = [32, 32, 32, 255];
|
|
const k_color_grass = [0, 255, 0, 255];
|
|
const k_color_default = [128, 128, 128, 255];
|
|
|
|
class GgAppElement extends LitElement {
|
|
static get properties() {
|
|
return {
|
|
user: {type: Object},
|
|
strava: {type: Object},
|
|
activities: {type: Array},
|
|
activity: {type: Object},
|
|
world: {type: Object},
|
|
id: {type: String},
|
|
status: {type: Object},
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.activities = [];
|
|
this.activity = {};
|
|
this.loaded_activities = [];
|
|
this.strava = {};
|
|
this.min_lat = Number.MAX_VALUE;
|
|
this.min_lon = Number.MAX_VALUE;
|
|
this.max_lat = -Number.MAX_VALUE;
|
|
this.max_lon = -Number.MAX_VALUE;
|
|
this.status = undefined;
|
|
this.load().catch(function(e) {
|
|
console.log('load error', e);
|
|
});
|
|
}
|
|
|
|
async load() {
|
|
console.log('load');
|
|
this.user = await tfrpc.rpc.getUser();
|
|
try {
|
|
await this.update_credentials();
|
|
} catch (e) {
|
|
console.log('update_credentials failed', e);
|
|
}
|
|
try {
|
|
await this.update_activities();
|
|
} catch (e) {
|
|
console.log('update_activities failed', e);
|
|
}
|
|
await this.acquire_ssb_identity();
|
|
if (this.id && this.activities?.length) {
|
|
await this.sync_activities();
|
|
}
|
|
await this.get_activities_from_ssb();
|
|
}
|
|
|
|
async get_activities_from_ssb() {
|
|
this.status = {text: 'loading activities'};
|
|
this.loaded_activities = [];
|
|
let blob_ids = await tfrpc.rpc.query(`
|
|
SELECT json_extract(mention.value, '$.link') AS blob_id
|
|
FROM messages_fts('"gg-activity"')
|
|
JOIN messages ON messages.rowid = messages_fts.rowid,
|
|
json_each(messages.content, '$.mentions') as mention
|
|
WHERE json_extract(messages.content, '$.type') = 'gg-activity' AND
|
|
json_extract(mention.value, '$.name') = 'activity_data'
|
|
ORDER BY messages.timestamp DESC
|
|
`, []);
|
|
for (let [index, row] of blob_ids.entries()) {
|
|
this.status = {text: 'loading activity data', value: index, max: blob_ids.length};
|
|
let blob = await tfrpc.rpc.get_blob(row.blob_id);
|
|
try {
|
|
this.loaded_activities.push(JSON.parse(blob));
|
|
} catch {
|
|
this.loaded_activities.push(gpx_parse(blob));
|
|
}
|
|
}
|
|
this.status = undefined;
|
|
this.update_map();
|
|
}
|
|
|
|
async sync_activities() {
|
|
let ids = this.activities.map(x => `https://www.strava.com/activities/${x.id}`);
|
|
let missing = await tfrpc.rpc.query(`
|
|
WITH my_activities AS (
|
|
SELECT json_extract(mention.value, '$.link') AS url
|
|
FROM messages, json_each(messages.content, '$.mentions') AS mention
|
|
WHERE
|
|
author = ? AND
|
|
json_extract(messages.content, '$.type') = 'gg-activity' AND
|
|
json_extract(mention.value, '$.name') = 'activity_url')
|
|
SELECT from_strava.value FROM json_each(?) AS from_strava
|
|
LEFT OUTER JOIN my_activities ON from_strava.value = my_activities.url
|
|
WHERE my_activities.url IS NULL
|
|
`, [this.id, JSON.stringify(ids)]);
|
|
console.log('missing = ', missing);
|
|
for (let [index, row] of missing.entries()) {
|
|
this.status = {text: 'syncing from strava', value: index, max: missing.length};
|
|
let url = row.value;
|
|
let id = url.match(/.*\/(\d+)/)[1];
|
|
let response = await fetch(`https://www.strava.com/api/v3/activities/${id}`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${this.strava.access_token}`,
|
|
},
|
|
});
|
|
let activity = await response.json();
|
|
let blob_id = await tfrpc.rpc.store_blob(JSON.stringify(activity));
|
|
let message = {
|
|
type: 'gg-activity',
|
|
mentions: [
|
|
{
|
|
link: url,
|
|
name: 'activity_url',
|
|
},
|
|
{
|
|
link: blob_id,
|
|
name: 'activity_data',
|
|
}
|
|
],
|
|
};
|
|
await tfrpc.rpc.appendMessage(this.id, message);
|
|
}
|
|
this.status = undefined;
|
|
}
|
|
|
|
async acquire_ssb_identity() {
|
|
let user = await tfrpc.rpc.getUser();
|
|
if (!user?.credentials?.session?.name) {
|
|
return;
|
|
}
|
|
let ids = await tfrpc.rpc.getIdentities();
|
|
let players = ids.length ? (await tfrpc.rpc.query(`
|
|
SELECT author FROM messages JOIN json_each(?) ON messages.author = json_each.value
|
|
WHERE
|
|
json_extract(messages.content, '$.type') = 'gg-player' AND
|
|
json_extract(messages.content, '$.active')
|
|
ORDER BY timestamp DESC limit 1
|
|
`, [JSON.stringify(ids)])).map(row => row.author) : [];
|
|
if (!players.length) {
|
|
this.id = await tfrpc.rpc.createIdentity();
|
|
if (this.id) {
|
|
await tfrpc.rpc.appendMessage(this.id, {
|
|
type: 'gg-player',
|
|
active: true,
|
|
});
|
|
}
|
|
} else {
|
|
players.sort();
|
|
this.id = players[0];
|
|
}
|
|
}
|
|
|
|
async update_credentials() {
|
|
let name = this.user?.credentials?.session?.name;
|
|
if (!name) {
|
|
return;
|
|
}
|
|
let shared = await tfrpc.rpc.sharedDatabaseGet(name);
|
|
if (shared) {
|
|
await tfrpc.rpc.databaseSet('strava', shared);
|
|
await tfrpc.rpc.sharedDatabaseRemove(name);
|
|
}
|
|
this.strava = JSON.parse(await tfrpc.rpc.databaseGet('strava') || '{}');
|
|
if (new Date().valueOf() / 1000 > this.strava.expires_at) {
|
|
console.log('this looks expired', new Date().valueOf() / 1000, '>', this.strava.expires_at);
|
|
let x = await tfrpc.rpc.refresh_token(this.strava);
|
|
if (x) {
|
|
this.strava = x;
|
|
await tfrpc.rpc.databaseSet('strava', JSON.stringify(x));
|
|
} else {
|
|
this.strava = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
async update_activities() {
|
|
if (this?.strava?.access_token) {
|
|
let response = await fetch('https://www.strava.com/api/v3/athlete/activities', {
|
|
headers: {
|
|
'Authorization': `Bearer ${this.strava.access_token}`,
|
|
},
|
|
});
|
|
this.activities = await response.json();
|
|
this.activities.sort((a, b) => (a.id - b.id));
|
|
}
|
|
}
|
|
|
|
color_to_emoji(color) {
|
|
const k_map = [
|
|
[k_color_snow, '⬜'],
|
|
[k_color_ice, '🟦'],
|
|
[k_color_water, '🟦'],
|
|
[k_color_dirt, '🟫'],
|
|
[k_color_pavement, '⬛'],
|
|
[k_color_grass, '🟩'],
|
|
[k_color_default, '🟧'],
|
|
];
|
|
for (let m of k_map) {
|
|
if (m[0][0] == color[0] &&
|
|
m[0][1] == color[1] &&
|
|
m[0][2] == color[2] &&
|
|
m[0][3] == color[3]) {
|
|
return m[1];
|
|
}
|
|
}
|
|
}
|
|
|
|
activity_bounds(activity) {
|
|
let min_lat = Number.MAX_VALUE;
|
|
let min_lon = Number.MAX_VALUE;
|
|
let max_lat = -Number.MAX_VALUE;
|
|
let max_lon = -Number.MAX_VALUE;
|
|
if (activity?.map?.polyline) {
|
|
for (let pt of polyline.decode(activity.map.polyline)) {
|
|
min_lat = Math.min(min_lat, pt[0]);
|
|
min_lon = Math.min(min_lon, pt[1]);
|
|
max_lat = Math.max(max_lat, pt[0]);
|
|
max_lon = Math.max(max_lon, pt[1]);
|
|
}
|
|
}
|
|
if (activity?.segments) {
|
|
for (let segment of activity.segments) {
|
|
for (let pt of segment) {
|
|
min_lat = Math.min(min_lat, pt.lat);
|
|
min_lon = Math.min(min_lon, pt.lon);
|
|
max_lat = Math.max(max_lat, pt.lat);
|
|
max_lon = Math.max(max_lon, pt.lon);
|
|
}
|
|
}
|
|
}
|
|
return {
|
|
min: {
|
|
lat: min_lat,
|
|
lng: min_lon,
|
|
},
|
|
max: {
|
|
lat: max_lat,
|
|
lng: max_lon,
|
|
},
|
|
};
|
|
}
|
|
|
|
async update_map() {
|
|
if (!this.leaflet) {
|
|
this.leaflet = L.map('map', {attributionControl: false, maxZoom: 16, bounceAtZoomLimits: false});
|
|
}
|
|
let self = this;
|
|
let grid_layer = L.GridLayer.extend({
|
|
createTile: function(coords) {
|
|
var tile = L.DomUtil.create('canvas', 'leaflet-tile');
|
|
var size = this.getTileSize();
|
|
tile.width = size.x;
|
|
tile.height = size.y;
|
|
var context = tile.getContext('2d');
|
|
context.font = '10pt sans';
|
|
let bounds = this._tileCoordsToBounds(coords);
|
|
let degrees = 360.0 / (2 ** coords.z);
|
|
let ul = bounds.getNorthWest();
|
|
let lr = bounds.getSouthEast();
|
|
//context.fillText(JSON.stringify(coords), 0, 12);
|
|
//context.fillText(`${Math.round(ul.lat * 100) / 100} ${Math.round(ul.lng * 100) / 100}`, 0, 24);
|
|
//context.fillText(`${Math.round(lr.lat * 100) / 100} ${Math.round(lr.lng * 100) / 100}`, 0, 36);
|
|
|
|
let mini = document.createElement('canvas');
|
|
mini.width = Math.floor(size.x / 16.0);
|
|
mini.height = Math.floor(size.y / 16.0);
|
|
let mini_context = mini.getContext('2d');
|
|
let image_data = context.getImageData(0, 0, mini.width, mini.height);
|
|
for (let activity of self.loaded_activities) {
|
|
self.draw_activity_to_tile(image_data, mini.width, mini.height, ul, lr, activity);
|
|
}
|
|
//mini_context.putImageData(image_data, 0, 0);
|
|
for (let x = 0; x < mini.width; x++) {
|
|
for (let y = 0; y < mini.height; y++) {
|
|
let start = (y * mini.width + x) * 4;
|
|
let pixel = self.color_to_emoji(image_data.data.slice(start, start + 4));
|
|
if (pixel) {
|
|
context.fillText(pixel, x * size.x / mini.width, y * size.y / mini.height + 10);
|
|
}
|
|
}
|
|
}
|
|
return tile;
|
|
}
|
|
});
|
|
if (this.grid_layer) {
|
|
this.grid_layer.redraw();
|
|
} else {
|
|
this.grid_layer = new grid_layer();
|
|
this.grid_layer.addTo(this.leaflet);
|
|
}
|
|
for (let activity of this.loaded_activities) {
|
|
let bounds = this.activity_bounds(activity);
|
|
this.min_lat = Math.min(this.min_lat, bounds.min.lat);
|
|
this.min_lon = Math.min(this.min_lon, bounds.min.lng);
|
|
this.max_lat = Math.max(this.max_lat, bounds.max.lat);
|
|
this.max_lon = Math.max(this.max_lon, bounds.max.lng);
|
|
}
|
|
this.leaflet.fitBounds([
|
|
[this.min_lat, this.min_lon],
|
|
[this.max_lat, this.max_lon],
|
|
]);
|
|
}
|
|
|
|
activity_to_color(activity) {
|
|
let color = [0, 0, 0, 255];
|
|
switch (activity.sport_type) {
|
|
/* Implies snow. */
|
|
case 'AlpineSki':
|
|
case 'BackcountrySki':
|
|
case 'NordicSki':
|
|
case 'Snowshoe':
|
|
case 'Snowboard':
|
|
color = k_color_snow;
|
|
break;
|
|
|
|
/* Implies ice. */
|
|
case 'IceSkate':
|
|
case 'InlineSkate':
|
|
color = k_color_ice;
|
|
break;
|
|
|
|
/* Implies water. */
|
|
case 'Canoeing':
|
|
case 'Kayaking':
|
|
case 'Kitesurf':
|
|
case 'Rowing':
|
|
case 'Sail':
|
|
case 'StandUpPaddling':
|
|
case 'Surfing':
|
|
case 'Swim':
|
|
case 'Windsurf':
|
|
color = k_color_water;
|
|
break;
|
|
|
|
/* Implies dirt. */
|
|
case 'EMountainBikeRide':
|
|
case 'Hike':
|
|
case 'MountainBikeRide':
|
|
case 'RockClimbing':
|
|
case 'TrailRun':
|
|
color = k_color_dirt;
|
|
break;
|
|
|
|
/* Implies pavement. */
|
|
case 'EBikeRide':
|
|
case 'GravelRide':
|
|
case 'Handcycle':
|
|
case 'Ride':
|
|
case 'RollerSki':
|
|
case 'Run':
|
|
case 'Skateboard':
|
|
case 'Badminton':
|
|
case 'Tennis':
|
|
case 'Velomobile':
|
|
case 'Walk':
|
|
case 'Wheelchair':
|
|
color = k_color_pavement;
|
|
break;
|
|
|
|
/* Grass, maybe? */
|
|
case 'Golf':
|
|
case 'Soccer':
|
|
case 'Squash':
|
|
color = k_color_grass;
|
|
break;
|
|
|
|
// Crossfit,
|
|
// Elliptical
|
|
// HighIntensityIntervalTraining
|
|
// Pickleball
|
|
// Pilates
|
|
// Racquetball
|
|
// StairStepper
|
|
// TableTennis,
|
|
// VirtualRide
|
|
// VirtualRow
|
|
// VirtualRun
|
|
// WeightTraining
|
|
// Workout
|
|
// Yoga
|
|
default:
|
|
color = k_color_default;
|
|
}
|
|
return color;
|
|
}
|
|
|
|
line(image_data, x0, y0, x1, y1, value) {
|
|
/* <3 https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm */
|
|
let dx = Math.abs(x1 - x0);
|
|
let sx = x0 < x1 ? 1 : -1;
|
|
let dy = -Math.abs(y1 - y0);
|
|
let sy = y0 < y1 ? 1 : -1;
|
|
let error = dx + dy;
|
|
while (true) {
|
|
if (x0 >= 0 && y0 >= 0 && x0 < image_data.width && y0 < image_data.height) {
|
|
let base = (y0 * image_data.width + x0) * 4;
|
|
image_data.data[base + 0] = value[0];
|
|
image_data.data[base + 1] = value[1];
|
|
image_data.data[base + 2] = value[2];
|
|
image_data.data[base + 3] = value[3];
|
|
}
|
|
|
|
if (x0 == x1 && y0 == y1) {
|
|
break;
|
|
}
|
|
let e2 = 2 * error;
|
|
if (e2 >= dy) {
|
|
if (x0 == x1) {
|
|
break;
|
|
}
|
|
error += dy;
|
|
x0 = Math.round(x0 + sx);
|
|
}
|
|
if (e2 <= dx) {
|
|
if (y0 == y1) {
|
|
break;
|
|
}
|
|
error += dx;
|
|
y0 = Math.round(y0 + sy);
|
|
}
|
|
}
|
|
}
|
|
|
|
draw_activity_to_tile(image_data, width, height, ul, lr, activity) {
|
|
let color = this.activity_to_color(activity);
|
|
if (activity?.map?.polyline) {
|
|
let last;
|
|
for (let pt of polyline.decode(activity.map.polyline)) {
|
|
let px = [
|
|
Math.floor(width * (pt[1] - ul.lng) / (lr.lng - ul.lng)),
|
|
Math.floor(height * (pt[0] - ul.lat) / (lr.lat - ul.lat)),
|
|
];
|
|
if (last) {
|
|
this.line(image_data, last[0], last[1], px[0], px[1], color);
|
|
}
|
|
last = px;
|
|
}
|
|
}
|
|
if (activity?.segments) {
|
|
for (let segment of activity.segments) {
|
|
let last;
|
|
for (let pt of segment) {
|
|
let px = [
|
|
Math.floor(width * (pt.lon - ul.lng) / (lr.lng - ul.lng)),
|
|
Math.floor(height * (pt.lat - ul.lat) / (lr.lat - ul.lat)),
|
|
];
|
|
if (last) {
|
|
this.line(image_data, last[0], last[1], px[0], px[1], color);
|
|
}
|
|
last = px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
async on_upload(event) {
|
|
try {
|
|
let file = event.srcElement.files[0];
|
|
let xml = await file.text();
|
|
let gpx = gpx_parse(xml);
|
|
let blob_id = await tfrpc.rpc.store_blob(xml);
|
|
console.log('blob_id = ', blob_id);
|
|
console.log(gpx);
|
|
let message = {
|
|
type: 'gg-activity',
|
|
mentions: [
|
|
{
|
|
link: `https://${gpx.link}/activity/${gpx.time}`,
|
|
name: 'activity_url',
|
|
},
|
|
{
|
|
link: blob_id,
|
|
name: 'activity_data',
|
|
}
|
|
],
|
|
};
|
|
console.log('id =', this.id, 'message = ', message);
|
|
let id = await tfrpc.rpc.appendMessage(this.id, message);
|
|
console.log('appended message', id);
|
|
alert('Activity uploaded.');
|
|
await this.get_activities_from_ssb();
|
|
} catch (e) {
|
|
alert(`Error: ${JSON.stringify(e, null, 2)}`);
|
|
}
|
|
}
|
|
|
|
upload() {
|
|
let input = document.createElement('input');
|
|
input.type = 'file';
|
|
input.onchange = (event) => this.on_upload(event);
|
|
input.click();
|
|
}
|
|
|
|
render() {
|
|
if (!this.user?.credentials?.session?.name) {
|
|
return html`<div>Please <a target="_top" href="/login">login</a> to Tilde Friends, first.</div>`;
|
|
}
|
|
if (!this.strava?.access_token) {
|
|
let strava_url = `https://www.strava.com/oauth/authorize?client_id=${k_client_id}&redirect_uri=${k_redirect_url}&response_type=code&approval_prompt=auto&scope=activity%3Aread&state=${g_data.state}`;
|
|
return html`
|
|
<div style="display: flex; flex-direction: row; align-items: center; gap: 1em; width: 100%">
|
|
<div style="flex: 1 1">Please <a target="_top" href=${strava_url}>login</a> to Strava.</div>
|
|
<span style="font-size: xx-small; flex: 1 1; word-break: break-all">${this.id}</span>
|
|
<input type="button" value="📁" @click=${this.upload}></input>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return html`
|
|
<div>
|
|
<div style="display: flex; flex-direction: row; align-items: center; gap: 1em; width: 100%">
|
|
<h1>Welcome, ${this.user.credentials.session.name}</h1>
|
|
<span style="font-size: xx-small; flex: 1 1; word-break: break-all">${this.id}</span>
|
|
<input type="button" value="📁" @click=${this.upload}></input>
|
|
</div>
|
|
<h3 ?hidden=${!this.status?.text}>${this.status?.text} <progress ?hidden=${!this.status?.max} value=${this.status?.value} max=${this.status?.max}>${this.status?.value}</progress></h3>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
customElements.define('gg-app', GgAppElement); |