Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Priority fixes #47

Merged
merged 20 commits into from
Aug 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified src/images/icons/favicon.ico
Binary file not shown.
Binary file modified src/images/icons/kapta-white.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 39 additions & 13 deletions src/import_whatsapp.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,13 @@ function displayFile(file) {
reader.onloadend = function (e) {
processText(e.target.result);
};
} else if (file.name.endsWith(".geojson")) {
const reader = new FileReader();
reader.readAsText(file);
reader.onloadend = function (e) {
console.log(e.target.result);
processGeoJson(e.target.result);
};
} else {
console.error("Unsupported file format");
}
Expand Down Expand Up @@ -110,6 +117,37 @@ function displayLoader() {
function removeLoader() {
document.querySelector("#loader-container").remove();
}
function updateMapdata(mapdata, groupName = null) {
Alpine.store("currentDataset").geoJSON = mapdata;
if (groupName) {
Alpine.store("currentDataset").slug = slugify(groupName);
} else {
Alpine.store("currentDataset").slug = slugify("Kapta");
}

removeOptionsMenu();
displayLoader();
setTimeout(() => {
removeLoader();
displayMap(Alpine.store("currentDataset").geoJSON);
}, 2000);
}
function processGeoJson(json) {
var mapdata = {
type: "FeatureCollection",
features: [],
};
let groupName;
var geoJSONData = JSON.parse(json);

if (geoJSONData.type === "FeatureCollection") {
mapdata.features = mapdata.features.concat(geoJSONData.features);

if (geoJSONData.name) groupName = geoJSONData.name;
}

updateMapdata(mapdata, groupName);
}

function processText(text) {
const groupNameRegex = /"([^"]*)"/;
Expand Down Expand Up @@ -212,19 +250,7 @@ function processText(text) {
if (feature) {
mapdata.features.push(feature);
}
Alpine.store("currentDataset").geoJSON = mapdata;
if (groupName) {
Alpine.store("currentDataset").slug = slugify(groupName);
} else {
Alpine.store("currentDataset").slug = slugify("Kapta");
}

removeOptionsMenu();
displayLoader();
setTimeout(() => {
removeLoader();
displayMap(Alpine.store("currentDataset").geoJSON);
}, 2000);
updateMapdata(mapdata, groupName);
}

export { displayFile, processText };
4 changes: 2 additions & 2 deletions src/install.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ async function handleInstallPrompt() {

function initialiseInstallPrompt() {
window.addEventListener("beforeinstallprompt", (event) => {
event.preventDefault;
event.preventDefault();
installPrompt = event;
if (!dismissed) {
installPrompt = event;
handleInstallPrompt();
}
});
Expand Down
41 changes: 25 additions & 16 deletions src/languages.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ i18next.init({
key: "hello world",
asktheteam: "Ask us anything",
instructions: `<span class="title">How to use Kapta </span><hr> 1 - Create a WhatsApp group 👥💬 <br> 2 - Ask the group to share and describe locations 📎📍💬 <br> 3 - Click 'Export chat' to the Kapta mobile app 💬🗺️ <br> 4 - Use and share your WhatsApp Map with Kapta 🗺️💸`,
watchtutorial: "watch tutorial",
watchtutorial: "Watch tutorial",
viewrecentmap: "View recent map",
showmap: "Show map",
observer: "Observer",
Expand All @@ -37,7 +37,8 @@ i18next.init({
uploaddata: "Upload to Kapta Web",
addMetadataTitle: "Describe this map",
sharingTitle: "Share this map",
addDescription: "Title of your map",
addDescription: "Add a title to your map",
updateDescription: "Update map title",
copyright: "Kapta by UCL",
supportOption: "Get support to improve your map",
installPrompt:
Expand Down Expand Up @@ -68,9 +69,12 @@ i18next.init({
uploaddata: "Subir a Kapta Web",
addMetadataTitle: "Describe este mapa",
sharingTitle: "Comparte este mapa",
addDescription: "Añada descripción",
copyright: "Kapta by UCL",
supportOption: "Necesitas ayuda para mejorar tu mapa?",
cancel: "cancel",
addDescription: "Agrega un título a tu mapa",
updateDescription: "Actualizar el título del mapa",
copyright: "© Kapta de UCL",
supportOption: "Obtenga apoyo para mejorar su mapa",

installPrompt:
"Kapta funciona mejor cuando se instala en un dispositivo móvil. ¿Instalar ahora?",
install: "Instalar",
Expand All @@ -80,9 +84,9 @@ i18next.init({
fr: {
translation: {
key: "bonjour le monde",
asktheteam: "Demandez-nous n`importe quoi",
asktheteam: "Demandez-nous ce que vous voulez",
instructions: `<span class="title">Comment utiliser Kapta</span><hr>1 - Créez un groupe WhatsApp 👥💬 <br> 2 - Demandez au groupe de partager et de décrire des emplacements 📎📍💬 <br> 3 - Cliquez sur 'Exporter le chat' vers l'application mobile Kapta 💬🗺️ <br> 4 - Utilisez et partagez votre carte WhatsApp avec Kapta 🗺️💸`,
watchtutorial: "regarder le tutoriel",
watchtutorial: "Regarder le tutoriel",
viewrecentmap: "Voir la carte récente",
showmap: "Afficher la carte",
observer: "Observateur",
Expand All @@ -99,8 +103,9 @@ i18next.init({
uploaddata: "Télécharger sur Kapta Web",
addMetadataTitle: "Décrivez cette carte",
sharingTitle: "Partager cette carte",
addDescription: "Titre de votre carte",
copyright: "Kapta par UCL",
addDescription: "Ajoutez un titre à votre carte",
updateDescription: "Mettre à jour le titre de la carte",
copyright: "© Kapta par UCL",
supportOption: "Obtenez un support pour améliorer votre carte",
installPrompt:
"Kapta fonctionne mieux lorsqu'il est installé sur un appareil mobile. Installer maintenant?",
Expand Down Expand Up @@ -129,8 +134,9 @@ i18next.init({
uploaddata: "ወደ ካፕታ ድር ይስቀሉ።",
addMetadataTitle: "ይህን ካርታ ይግለጹ",
sharingTitle: "ይህን ካርታ አጋራ",
addDescription: "የካርታዎ ርዕስ",
copyright: "ካፕታ በ UCL",
addDescription: "በካርታዎ ላይ ርዕስ ያክሉ",
updateDescription: "የካርታ ርዕስ ያዘምኑ",
copyright: "© ካፕታ በ UCL",
supportOption: "ካርታዎን ለማሻሻል ድጋፍ ያግኙ",
installPrompt: "ካፕታ በሞባይል መሳሪያ ላይ ሲጫኑ በተሻለ ሁኔታ ይሰራል. አሁን ይጫኑ?",
install: "ጫን",
Expand Down Expand Up @@ -161,16 +167,18 @@ i18next.init({
addDescription: "Título do seu mapa",
copyright: "Kapta por UCL",
supportOption: "Obtenha suporte para melhorar seu mapa",
installPrompt: "Kapta funciona melhor quando instalado em um dispositivo móvel. Instalar agora?",
installPrompt:
"Kapta funciona melhor quando instalado em um dispositivo móvel. Instalar agora?",
install: "Instalar",
dismiss: "Dispensar"
dismiss: "Dispensar",
},
},
yo: {
translation: {
key: "báwo ni ayé",
asktheteam: "Béèrè ohunkóhun lọ́wọ́ wa",
instructions: `<span class="title">Báwo ni láti lò Kapta</span><hr>1 - Dá ìgbìmọ̀ àwáàrí ní WhatsApp <br>👥💬 <br>2 - Pín & ṣàpèjúwe àwọn àyè <br> 📎📍 <br>3 - Gbé àjùmọ̀ṣepọ̀ sórí Kapta <br> 💬🗺️ <br>4 - Pín tàbí tà átààwá àwáàrí rẹ <br> 🗺️💸`, viewrecentmap: "Wo àwáàrí tó ṣẹṣẹ",
instructions: `<span class="title">Báwo ni láti lò Kapta</span><hr>1 - Dá ìgbìmọ̀ àwáàrí ní WhatsApp <br>👥💬 <br>2 - Pín & ṣàpèjúwe àwọn àyè <br> 📎📍 <br>3 - Gbé àjùmọ̀ṣepọ̀ sórí Kapta <br> 💬🗺️ <br>4 - Pín tàbí tà átààwá àwáàrí rẹ <br> 🗺️💸`,
viewrecentmap: "Wo àwáàrí tó ṣẹṣẹ",
showmap: "Fíhàn àwáàrí",
observer: "Olùtọ́jú",
date: "Ọjọ́",
Expand All @@ -189,9 +197,10 @@ i18next.init({
addDescription: "Àkọlé àwáàrí rẹ",
copyright: "Kapta láti UCL",
supportOption: "Gba ìtìlẹ́yìn láti mú àwáàrí rẹ dàra sí",
installPrompt: "Kapta dára jùlọ tí ó bá wà nínú ètò alágbèéká. Ṣe yóò ìgbele?",
installPrompt:
"Kapta dára jùlọ tí ó bá wà nínú ètò alágbèéká. Ṣe yóò ìgbele?",
install: "Ìgbele",
dismiss: "Ìsọfúnni"
dismiss: "Ìsọfúnni",
},
},
},
Expand Down
12 changes: 3 additions & 9 deletions src/map.js
Original file line number Diff line number Diff line change
Expand Up @@ -131,13 +131,7 @@ var gpsButton = L.easyButton({
states: [
{
icon: `<span>${GPSIcn}</span>`,
//stateName: 'check-mark',
onClick: function (control) {
control.button.style.backgroundColor = "#696868";
setTimeout(function () {
control.button.style.backgroundColor = "#afafaf";
}, 300);

if (currentLocation !== undefined && currentLocation[0] !== null) {
L.marker(currentLocation, {
icon: gpsPositionIcon,
Expand Down Expand Up @@ -186,9 +180,9 @@ function addDataToMap(map, mapdata) {
layer.bindPopup(
`<div class="map-popup-body">
${feature.properties.observations.replaceAll(
"\n",
"<br/>"
)}
"\n",
"<br/>"
)}
</div>
<div class="map-popup-footer">
${i18next.t("date")}: ${getFriendlyDatetime(
Expand Down
15 changes: 11 additions & 4 deletions src/mapOverlays.js
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,17 @@ export function buildActionTray() {
currentDataset.slug = slug;
let titleElem = document.querySelector(".leaflet-map-title");
titleElem.textContent = Alpine.store("appData").mapTitle;
navigator.vibrate(100);
titleElem.classList.add("pulse-shadow");

// Remove the pulse effect after the animation ends
setTimeout(() => {
titleElem.classList.remove("pulse-shadow");
}, 6000);

form.querySelector("textarea").value = "";
form.querySelector("textarea").placeholder =
i18next.t("updateDescription");
switchToShareBtn(submitBtn);
});
} else {
Expand Down Expand Up @@ -172,11 +181,9 @@ function sharingAction() {
foreignObjectRendering: false,
ignoreElements: function (element) {
var src = element.src;
/* Remove element with id="MyElementIdHere" */
if ("button" == element.type || "submit" == element.type) {
return true;
}
/* Remove all elements with class="MyClassNameHere" */
if (element.classList.contains("buttons")) {
return true;
}
Expand All @@ -198,8 +205,8 @@ function sharingAction() {
navigator
.share({
files: filesArray,
title: "#kapta",
text: "#kapta",
title: "#MadeWithKapta",
text: "Create your WhatsApp Maps with Kapta https://kapta.earth/",
url: "https://kapta.earth/",
})
.then(() => {
Expand Down
48 changes: 28 additions & 20 deletions src/menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,35 +53,23 @@ function displayVideoModal() {

makeModalVisible(videoModal);
}

function buildOptionsMenu() {
const menuContainer = document.createElement("div");
menuContainer.id = "menuContainer";

// Language selector
const languageSelector = buildLanguageSelector();
menuContainer.appendChild(languageSelector);

// Instructions
const instructions = document.createElement("div");
instructions.id = "instructions";
instructions.innerHTML = i18next.t("instructions");
menuContainer.appendChild(instructions);

function buildButtonArea() {
var btnContainer = document.createElement("div");
btnContainer.classList.add("button-area");
// tutorial button
const tutorialBtn = document.createElement("button");
tutorialBtn.id = "tutorialBtn";
tutorialBtn.innerText = i18next.t("watchtutorial");
tutorialBtn.classList.add("btn");
tutorialBtn.onclick = displayVideoModal;
menuContainer.appendChild(tutorialBtn);
btnContainer.appendChild(tutorialBtn);

// Help button
const helpBtn = document.createElement("button");
helpBtn.id = "helpBtn";
helpBtn.innerText = i18next.t("asktheteam");
helpBtn.classList.add("btn");
menuContainer.appendChild(helpBtn);
btnContainer.appendChild(helpBtn);

// Show most recent map
if (Alpine.store("currentDataset").geoJSON) {
Expand All @@ -93,21 +81,41 @@ function buildOptionsMenu() {
removeOptionsMenu();
displayMap(Alpine.store("currentDataset").geoJSON);
});
menuContainer.appendChild(recentBtn);
btnContainer.appendChild(recentBtn);
}

// File picker (web only)
if (!Alpine.store("deviceInfo").isMobile) {
const fileInput = document.createElement("input");
fileInput.type = "file";
fileInput.accept = ".txt,.zip";
fileInput.accept = ".txt,.zip,.geojson";
fileInput.classList.add("file-input");
fileInput.addEventListener("change", (evt) => {
displayFile(evt.target.files[0]);
fileInput.value = null;
});
menuContainer.appendChild(fileInput);
btnContainer.appendChild(fileInput);
}
return btnContainer;
}

function buildOptionsMenu() {
const menuContainer = document.createElement("div");
menuContainer.id = "menuContainer";

// Language selector
const languageSelector = buildLanguageSelector();
menuContainer.appendChild(languageSelector);

// Instructions
const instructions = document.createElement("div");
instructions.id = "instructions";
instructions.innerHTML = i18next.t("instructions");
menuContainer.appendChild(instructions);

//buttons
var btnContainer = buildButtonArea();
menuContainer.appendChild(btnContainer);

return menuContainer;
}
Expand Down
Loading