forked from Maxluli/TinderPokemon
Added indexDb support
This commit is contained in:
maxluli
133
favorites.html
133
favorites.html
@@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
@@ -19,66 +20,102 @@
|
||||
<title>Tinder Pokemon</title>
|
||||
<link rel="icon" type="image/x-icon" href="assets/img/Icon.ico">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<body id="main">
|
||||
<div class="d-grid gap-2 text-center">
|
||||
<div class=""><h1>Tinder for weird furries</h1></div>
|
||||
<div class=""><h2>Favorites</h2></div>
|
||||
</div>
|
||||
|
||||
<p>Somebody will have to display the favorites or something here</p>
|
||||
|
||||
<div class="container" style="margin-bottom:2vh;">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<img src="https://www.pokewiki.de/images/thumb/d/dd/Sugimori_132.png/250px-Sugimori_132.png"
|
||||
class="card-img-left col-8" alt="...">
|
||||
<div class="container col-4">
|
||||
<h3 class="card-text">Frederick 20</h3>
|
||||
<h4>I like ice cream</h4>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-danger" style="width:100%">X</button>
|
||||
<div class="">
|
||||
<h1>Tinder for weird furries</h1>
|
||||
</div>
|
||||
<div class="">
|
||||
<h2>Favorites</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cards">
|
||||
|
||||
<div class="container" style="margin-bottom:2vh;">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<img src="https://www.pokewiki.de/images/thumb/d/dd/Sugimori_132.png/250px-Sugimori_132.png"
|
||||
class="card-img-left col-8" alt="...">
|
||||
<div class="container col-4">
|
||||
<h3 class="card-text">Frederick 20</h3>
|
||||
<h4>I like ice cream</h4>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-danger" style="width:100%">X</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="margin-bottom:2vh;">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<img src="https://www.pokewiki.de/images/thumb/d/dd/Sugimori_132.png/250px-Sugimori_132.png"
|
||||
class="card-img-left col-8" alt="...">
|
||||
<div class="container col-4">
|
||||
<h3 class="card-text">Frederick 20</h3>
|
||||
<h4>I like ice cream</h4>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-danger" style="width:100%">X</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row fixed-bottom">
|
||||
<div class="btn col-4 btn-light">
|
||||
<a href="likes.html" style="text-decoration:none;color:black"><h3>Liked</h3></a>
|
||||
<a href="likes.html" style="text-decoration:none;color:black">
|
||||
<h3>Liked</h3>
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn col-4 btn-light">
|
||||
<a href="index.html" style="text-decoration:none;color:black"><h3>Home</h3></a>
|
||||
<a href="index.html" style="text-decoration:none;color:black">
|
||||
<h3>Home</h3>
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn col-4 btn-light">
|
||||
<a href="favorites.html" style="text-decoration:none;color:black"><h3>Favorites</h3></a>
|
||||
<a href="favorites.html" style="text-decoration:none;color:black">
|
||||
<h3>Favorites</h3>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
document.getElementById("main").onload = function () {
|
||||
loadFromIndexedDB("favorites", 0).then((response) => {
|
||||
//console.log(response);
|
||||
response.forEach(function (item) {
|
||||
//console.log(item.name);
|
||||
var html = "";
|
||||
html += "<div class='container' style='margin-bottom:2vh;'>";
|
||||
html += "<div class='card'>";
|
||||
html += "<div class='row'>";
|
||||
html += "<img src='"+item.pp+"' class='card-img-left col-8' alt='...'>";
|
||||
html += "<div class='container col-4'>";
|
||||
html += "<h3 class='card-text'>"+item.name+" "+item.age+"</h3>";
|
||||
html += "<p>"+((item.description).slice(0,40)+"...")+"</p>";
|
||||
html += "<button class='btn btn-danger' style='width:100%'>X</button>";
|
||||
html += "</div>";
|
||||
html += "</div>";
|
||||
//console.log(html);
|
||||
var container = document.getElementById("cards");
|
||||
container.innerHTML += html;
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function loadFromIndexedDB(storeName) {
|
||||
return new Promise(
|
||||
function (resolve, reject) {
|
||||
var dbRequest = indexedDB.open(storeName);
|
||||
|
||||
dbRequest.onerror = function (event) {
|
||||
reject(Error("Error text"));
|
||||
};
|
||||
|
||||
dbRequest.onupgradeneeded = function (event) {
|
||||
// Objectstore does not exist. Nothing to load
|
||||
event.target.transaction.abort();
|
||||
reject(Error('Not found'));
|
||||
};
|
||||
|
||||
dbRequest.onsuccess = function (event) {
|
||||
var database = event.target.result;
|
||||
var transaction = database.transaction([storeName]);
|
||||
var objectStore = transaction.objectStore(storeName);
|
||||
var objectRequest = objectStore.getAll();
|
||||
|
||||
objectRequest.onerror = function (event) {
|
||||
reject(Error('Error text'));
|
||||
console.log("Error with the indexdb");
|
||||
};
|
||||
|
||||
objectRequest.onsuccess = function (event) {
|
||||
if (objectRequest.result) {
|
||||
resolve(objectRequest.result);
|
||||
}
|
||||
else {
|
||||
reject(Error('object not found'));
|
||||
console.log("object not found");
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
82
index.html
82
index.html
@@ -91,7 +91,13 @@
|
||||
</body>
|
||||
<script>
|
||||
"use strict";
|
||||
var CurrentPokemon = new Object();
|
||||
var LoadedSuccessfully = false;
|
||||
|
||||
document.getElementById('main').onload = function () {
|
||||
loadNewPokemon();
|
||||
}
|
||||
function loadNewPokemon(){
|
||||
//We will need to load an image from the pokeAPI with his description and a random name/age
|
||||
fetch("https://pokeapi.co/api/v2/pokemon/" + Math.floor(Math.random() * 905))
|
||||
.then((response) => {
|
||||
@@ -106,13 +112,22 @@
|
||||
response.json()
|
||||
.then((pokemonInfo) => {
|
||||
console.log(pokemonData.id);
|
||||
LoadedSuccessfully = true;
|
||||
var age = (Math.floor(Math.random() * (65 - 18)) + 18);
|
||||
|
||||
CurrentPokemon.name = randomName[0].name;
|
||||
CurrentPokemon.id = uniqid();
|
||||
CurrentPokemon.pokemonId = pokemonData.id;
|
||||
CurrentPokemon.pp = pokemonData.sprites.front_shiny;
|
||||
CurrentPokemon.age = age;
|
||||
CurrentPokemon.description = pokemonInfo.flavor_text_entries[0].flavor_text;
|
||||
|
||||
document.getElementById("pokemonName").innerHTML = randomName[0].name;
|
||||
document.getElementById("pokemonImage").src = pokemonData.sprites.front_shiny;
|
||||
document.getElementById("pokemonAge").innerHTML = (Math.floor(Math.random() * (65 - 18)) + 18);
|
||||
document.getElementById("pokemonAge").innerHTML = age;
|
||||
document.getElementById("pokemonDescription").innerHTML = pokemonInfo.flavor_text_entries[0].flavor_text;
|
||||
|
||||
window.navigator.geolocation.getCurrentPosition(function (pos) {
|
||||
console.log(pos);
|
||||
var lat = pos.coords.latitude;
|
||||
var lon = pos.coords.longitude;
|
||||
|
||||
@@ -122,6 +137,7 @@
|
||||
let dist = distance(lon, lat, pokemonLongitude, pokemonLatitude);
|
||||
document.getElementById("pokemonDistance").innerHTML = Math.floor(dist) + " Km away";
|
||||
})
|
||||
|
||||
})
|
||||
}).catch((response) => {
|
||||
alert("Bouhouuuuu could not get any further infos on that dumbass");
|
||||
@@ -143,15 +159,23 @@
|
||||
})
|
||||
}
|
||||
document.getElementById('likeButton').onclick = function () {
|
||||
alert("You want to like");
|
||||
if(LoadedSuccessfully){
|
||||
saveToIndexedDB("likes",CurrentPokemon);
|
||||
loadNewPokemon();
|
||||
}
|
||||
};
|
||||
document.getElementById('nopeButton').onclick = function () {
|
||||
alert("You want to nope");
|
||||
if(LoadedSuccessfully){
|
||||
saveToIndexedDB("nopes",CurrentPokemon);
|
||||
loadNewPokemon();
|
||||
}
|
||||
}
|
||||
document.getElementById('favoriteButton').onclick = function () {
|
||||
alert("You want to fav");
|
||||
if(LoadedSuccessfully){
|
||||
saveToIndexedDB("favorites",CurrentPokemon);
|
||||
loadNewPokemon();
|
||||
}
|
||||
}
|
||||
|
||||
// !! THIS METHOD IS NOT MINE, ITS FROM STACK OVERFLOW : https://stackoverflow.com/questions/13840516/how-to-find-my-distance-to-a-known-location-in-javascript
|
||||
function distance(lon1, lat1, lon2, lat2) {
|
||||
var R = 6371; // Radius of the earth in km
|
||||
@@ -173,11 +197,49 @@
|
||||
}
|
||||
|
||||
window.navigator.geolocation.getCurrentPosition(function (pos) {
|
||||
console.log(pos);
|
||||
console.log(
|
||||
distance(pos.coords.longitude, pos.coords.latitude, 42.37, 71.03)
|
||||
);
|
||||
//console.log(pos);
|
||||
//console.log(
|
||||
//distance(pos.coords.longitude, pos.coords.latitude, 42.37, 71.03)
|
||||
//);
|
||||
});
|
||||
|
||||
// THIS FUNCTION IS ALSO NOT MINE AND ITS FROM STACK OVERFLOW TOO : https://stackoverflow.com/questions/4872380/uniqid-in-javascript-jquery
|
||||
function uniqid(prefix = "", random = false) {
|
||||
const sec = Date.now() * 1000 + Math.random() * 1000;
|
||||
const id = sec.toString(16).replace(/\./g, "").padEnd(14, "0");
|
||||
return `${prefix}${id}${random ? `.${Math.trunc(Math.random() * 100000000)}` : ""}`;
|
||||
};
|
||||
|
||||
//Wow again, not my function almost seems like I did nothing in that code
|
||||
function saveToIndexedDB(storeName, object) {
|
||||
return new Promise(
|
||||
function (resolve, reject) {
|
||||
if (object.id === undefined) reject(Error('object has no id.'));
|
||||
var dbRequest = indexedDB.open(storeName);
|
||||
dbRequest.onerror = function (event) {
|
||||
reject(Error("IndexedDB database error"));
|
||||
};
|
||||
dbRequest.onupgradeneeded = function (event) {
|
||||
var database = event.target.result;
|
||||
var objectStore = database.createObjectStore(storeName, { keyPath: "id" });
|
||||
};
|
||||
dbRequest.onsuccess = function (event) {
|
||||
var database = event.target.result;
|
||||
var transaction = database.transaction([storeName], 'readwrite');
|
||||
var objectStore = transaction.objectStore(storeName);
|
||||
var objectRequest = objectStore.put(object); // Overwrite if exists
|
||||
objectRequest.onerror = function (event) {
|
||||
reject(Error('Error text'));
|
||||
};
|
||||
objectRequest.onsuccess = function (event) {
|
||||
resolve('Data saved OK');
|
||||
console.log("Data saved successfully");
|
||||
};
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
106
likes.html
106
likes.html
@@ -21,7 +21,7 @@
|
||||
<link rel="icon" type="image/x-icon" href="assets/img/Icon.ico">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body id="main">
|
||||
<div class="d-grid gap-2 text-center">
|
||||
<div class="">
|
||||
<h1>Tinder for weird furries</h1>
|
||||
@@ -31,50 +31,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Someone will have to put the liked profile here or something</p>
|
||||
<p>Definitely not me</p>
|
||||
<div id="cards">
|
||||
|
||||
|
||||
<div class="container" style="margin-bottom:2vh;">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<img src="https://www.pokewiki.de/images/thumb/d/dd/Sugimori_132.png/250px-Sugimori_132.png"
|
||||
class="card-img-left col-8" alt="...">
|
||||
<div class="container col-4">
|
||||
<h3 class="card-text">Frederick 20</h3>
|
||||
<h4>I like ice cream</h4>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-danger" style="width:100%">X</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="margin-bottom:2vh;">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<img src="https://www.pokewiki.de/images/thumb/d/dd/Sugimori_132.png/250px-Sugimori_132.png"
|
||||
class="card-img-left col-8" alt="...">
|
||||
<div class="container col-4">
|
||||
<h3 class="card-text">Frederick 20</h3>
|
||||
<h4>I like ice cream</h4>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-danger" style="width:100%">X</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="margin-bottom:2vh;">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<img src="https://www.pokewiki.de/images/thumb/d/dd/Sugimori_132.png/250px-Sugimori_132.png"
|
||||
class="card-img-left col-8" alt="...">
|
||||
<div class="container col-4">
|
||||
<h3 class="card-text">Frederick 20</h3>
|
||||
<h4>I like ice cream</h4>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-danger" style="width:100%">X</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -90,5 +48,65 @@
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
document.getElementById("main").onload = function () {
|
||||
loadFromIndexedDB("likes", 0).then((response) => {
|
||||
response.forEach(function (item) {
|
||||
var html = "";
|
||||
html += "<div class='container' style='margin-bottom:2vh;'>";
|
||||
html += "<div class='card'>";
|
||||
html += "<div class='row'>";
|
||||
html += "<img src='"+item.pp+"' class='card-img-left col-8' alt='...'>";
|
||||
html += "<div class='container col-4'>";
|
||||
html += "<h3 class='card-text'>"+item.name+" "+item.age+"</h3>";
|
||||
html += "<p>"+((item.description).slice(0,40)+"...")+"</p>";
|
||||
html += "<button class='btn btn-danger' style='width:100%'>X</button>";
|
||||
html += "</div>";
|
||||
html += "</div>";
|
||||
var container = document.getElementById("cards");
|
||||
container.innerHTML += html;
|
||||
});
|
||||
});
|
||||
}
|
||||
function loadFromIndexedDB(storeName) {
|
||||
return new Promise(
|
||||
function (resolve, reject) {
|
||||
var dbRequest = indexedDB.open(storeName);
|
||||
|
||||
dbRequest.onerror = function (event) {
|
||||
reject(Error("Error text"));
|
||||
};
|
||||
|
||||
dbRequest.onupgradeneeded = function (event) {
|
||||
// Objectstore does not exist. Nothing to load
|
||||
event.target.transaction.abort();
|
||||
reject(Error('Not found'));
|
||||
};
|
||||
|
||||
dbRequest.onsuccess = function (event) {
|
||||
var database = event.target.result;
|
||||
var transaction = database.transaction([storeName]);
|
||||
var objectStore = transaction.objectStore(storeName);
|
||||
var objectRequest = objectStore.getAll();
|
||||
|
||||
objectRequest.onerror = function (event) {
|
||||
reject(Error('Error text'));
|
||||
console.log("Error with the indexdb");
|
||||
};
|
||||
|
||||
objectRequest.onsuccess = function (event) {
|
||||
if (objectRequest.result) {
|
||||
resolve(objectRequest.result);
|
||||
}
|
||||
else {
|
||||
reject(Error('object not found'));
|
||||
console.log("object not found");
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
</script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user