Skip to content

Commit

Permalink
no message
Browse files Browse the repository at this point in the history
  • Loading branch information
@PhilipPhil
PhilipPhil committed Jun 19, 2020
1 parent 0129940 commit 5a35690
Show file tree
Hide file tree
Showing 5 changed files with 178 additions and 43 deletions.
1 change: 0 additions & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"geolocation",
"topSites"
],
Expand Down
5 changes: 5 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

138 changes: 105 additions & 33 deletions popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,52 +2,124 @@
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ei=edge">
<link rel="stylesheet" href="css/rotate.css">
<title>Earth Weather</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<meta charset="UTF-8" />
<meta name="viewport" content="with=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ei=edge" />
<title>Weather</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
</head>

<body>
<div class="card" style="width: 24rem;">
<div class="container"
style="padding: 0px; position: relative; text-align: center; color: #fff; background-color: black;">

<img id="geoImage" class="card-img-top" src="img/misc/earthspinning.gif" alt="Location">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
<div id="geoLocation" style="position: absolute; bottom: 8px; left: 16px;">Loading</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-7">
<h5 id="city" class="card-title" style="margin-top: 0; margin-bottom: 2px;"></h5>
<h5 id="description" class="card-subtitle text-muted" style="margin-top: 0; margin-bottom: 2px;">
</h5>
<p id='sunrise' style="margin-top: 0; margin-bottom: 2px;"></p>
<p id='sunset' style="margin-top: 0; margin-bottom: 2px;"></p>
</div>
<div class="col-5" style="margin-left: 0;">
<h5 id="cel" class="card-title text-right"
style="margin-top: 0; margin-bottom: 2px; font-size: 275%"></h5>
<h5 id="far" class="card-title text-right"
style="margin-top: 0; margin-bottom: 2px; font-size: 275%"></h5>
</div>
<!-- Card -->
<div class="card weather-card" style="min-width: 24rem;">
<!-- Card content -->
<div class="card-body pb-3">
<!-- Title -->
<h4 class="card-title">Warsaw</h4>
<!-- Text -->
<p class="card-text">Mon, 12:30 PM, Mostly Sunny</p>
<div class="d-flex justify-content-between">
<p class="display-1 ">
<span>23</span><sup style="font-size: 60%; font-weight: 390;">&deg;C</sup>
</p>
<i class="fa fa-sun-o fa-5x pt-3 text-warning"></i>
</div>

<div class="d-flex justify-content-between mb-0">
<p>
<i class="fa fa-sun-o fa-lg text-warning pr-2"></i>44:44 am Sunrise
</p>
<p><i class="fa fa-tint fa-lg text-info pr-2"></i>3% Precipitation</p>
</div>

<div class="d-flex justify-content-between mb-0">
<p>
<i class="fa fa-moon-o fa-lg text-dark pr-2"></i>44:44 am pm Sunset
</p>
<p>
<i class="fa fa-leaf fa-lg text-secondary pr-2"></i>21 km/h Winds
</p>
</div>

<div class="collapse" id="collapseExample">
<table class="table table-borderless table-sm mb-0">
<tbody>
<tr>
<td class="font-weight-normal align-middle">Tuesday</td>
<td class="float-right font-weight-normal">
<p class="mb-1">24°<span class="text-muted">/12°</span></p>
</td>
<td class="float-right mr-3">
<i class="fa fa-sun-o fa-lg text-warning"></i>
</td>
</tr>
<tr>
<td class="font-weight-normal align-middle">Wednesday</td>
<td class="float-right font-weight-normal">
<p class="mb-1">19°<span class="text-muted">/10°</span></p>
</td>
<td class="float-right mr-3">
<i class="fa fa-cloud-sun-rain-o fa-lg text-info"></i>
</td>
</tr>
<tr>
<td class="font-weight-normal align-middle">Thursday</td>
<td class="float-right font-weight-normal">
<p class="mb-1">23°<span class="text-muted">/15°</span></p>
</td>
<td class="float-right mr-3">
<i class="fa fa-sun-o fa-lg amber-text"></i>
</td>
</tr>
<tr>
<td class="font-weight-normal align-middle">Friday</td>
<td class="float-right font-weight-normal">
<p class="mb-1">26°<span class="text-muted">/19°</span></p>
</td>
<td class="float-right mr-3">
<i class="fas fa-sun fa-lg amber-text"></i>
</td>
</tr>
<tr>
<td class="font-weight-normal align-middle">Saturday</td>
<td class="float-right font-weight-normal">
<p class="mb-1">20°<span class="text-muted">/16°</span></p>
</td>
<td class="float-right mr-3">
<i class="fa fa-cloud fa-lg text-info"></i>
</td>
</tr>
<tr>
<td class="font-weight-normal align-middle">Sunday</td>
<td class="float-right font-weight-normal">
<p class="mb-1">22°<span class="text-muted">/13°</span></p>
</td>
<td class="float-right mr-3">
<i class="fa fa-cloud-sun fa-lg text-info"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer">
<a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false"
aria-controls="collapseExample">
Expand
</a>
</div>
</div>
<!-- Card -->
</body>

<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/psl/dist/psl.min.js"></script>

<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css" />

<script src="src/popup.js"></script>
<!-- <script src="src/popup.js"></script> -->

</html>
53 changes: 53 additions & 0 deletions popupold.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ei=edge">
<link rel="stylesheet" href="css/rotate.css">
<title>Earth Weather</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body>
<div class="card" style="width: 24rem;">
<div class="container"
style="padding: 0px; position: relative; text-align: center; color: #fff; background-color: black;">

<img id="geoImage" class="card-img-top" src="img/misc/earthspinning.gif" alt="Location">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
<div id="geoLocation" style="position: absolute; bottom: 8px; left: 16px;">Loading</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-7">
<h5 id="city" class="card-title" style="margin-top: 0; margin-bottom: 2px;"></h5>
<h5 id="description" class="card-subtitle text-muted" style="margin-top: 0; margin-bottom: 2px;">
</h5>
<p id='sunrise' style="margin-top: 0; margin-bottom: 2px;"></p>
<p id='sunset' style="margin-top: 0; margin-bottom: 2px;"></p>
</div>
<div class="col-5" style="margin-left: 0;">
<h5 id="cel" class="card-title text-right"
style="margin-top: 0; margin-bottom: 2px; font-size: 275%"></h5>
<h5 id="far" class="card-title text-right"
style="margin-top: 0; margin-bottom: 2px; font-size: 275%"></h5>
</div>
</div>
</div>
</div>
</body>

<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/psl/dist/psl.min.js"></script>

<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">

<script src="src/popup.js"></script>

</html>
24 changes: 15 additions & 9 deletions src/setimage.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
function setImage(dateDirection) {
try {
ymd = positionDate.getFullYear() + "-" + (positionDate.getMonth() + 1) + "-" + positionDate.getDate();
// alert(APIUrl + ymd + key);
fetch(APIUrl + ymd + key)
.then((response) => response.json())
.then((data) => addBackGround(data, dateDirection));
currDate = new Date()
if (positionDate > currDate) {
positionDate.setDate(positionDate.getDate() - 1);
setImage(-1);
} else {
ymd = positionDate.getFullYear() + "-" + (positionDate.getMonth() + 1) + "-" + positionDate.getDate();
console.log(APIUrl + ymd + key);
fetch(APIUrl + ymd + key)
.then((response) => response.json())
.then((data) => addBackGround(data, dateDirection));
}
} catch {
if (positionDate >= new Date()) {
currDate = new Date()
if (positionDate > currDate) {
positionDate.setDate(positionDate.getDate() - 1);
setImage(-1);
} else {
Expand Down Expand Up @@ -106,7 +113,7 @@ document.getElementById("right").addEventListener("click", function (e) {
}
});

document.addEventListener("keydown", function (event) {
document.addEventListener("keyup", function (event) {
const key = event.key;
switch (key) {
case "ArrowRight":
Expand All @@ -115,16 +122,15 @@ document.addEventListener("keydown", function (event) {
currDate = new Date();
if (positionDate > currDate) {
positionDate.setDate(positionDate.getDate() - 1);
break;
} else {
if (positionDate.getFullYear() == currDate.getFullYear() &&
positionDate.getMonth() == currDate.getMonth() &&
positionDate.getDate() == currDate.getDate()) {
document.getElementById("right").style.visibility = "hidden";
}
setImage(dateDirection);
break;
}
break;
case "ArrowLeft":
document.getElementById("right").style.visibility = "visible";
dateDirection = -1;
Expand Down

0 comments on commit 5a35690

Please sign in to comment.