added iframe of gpv

onotch · Jan 11, 2021 · d49250e · d49250e
1 parent 4af391f
commit d49250e
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 11 deletions.
diff --git a/archive/css/index.css b/archive/css/index.css
@@ -5,7 +5,7 @@
 	100% {opacity: 1;}
 }
 
-body, div, h2, p, select, button, img{
+body, div, h1, h2, h3, p, select, button, img{
 	margin: 0px;
 	padding: 0px;
 }
@@ -14,16 +14,20 @@ body{
 	background-color: rgba(0,0,0,1);
 }
 
-h2, p, label{
+h2, h3, p, label{
 	font-family: 'Open Sans', sans-serif;
-}
-
-h2, p{
 	text-align: left;
 	line-height: 100%;
 }
 
 h2{
+	margin: 12px 28px 12px;
+	font-size: 16pt;
+	font-weight: bold;
+	color: rgba(255,255,255,0.7);
+}
+
+h3{
 	display: inline;
 	margin-right: 8px;
 	font-size: 12pt;
@@ -32,7 +36,7 @@ h2{
 }
 
 #Container{
-	padding: 20px 10px 20px;
+	padding: 12px 10px 20px;
 }
 
 #Area, #Type, #Date{
@@ -173,11 +177,17 @@ a:hover{
 	animation-timing-function: linear;
 }
 
+#GpvFrame iframe{
+	width: 800px;
+	height: 710px;
+	border: none;
+}
+
 /*
  * for Smartphone
  */
 @media only screen and (max-width: 800px) {
-h2{
+h2, h3{
 	display: none;
 }
 

diff --git a/archive/index.html b/archive/index.html
@@ -16,8 +16,10 @@
 
 <body>
 	<div id="Container">
+		<h2>GPV Archive</h2>
+
 		<div id="Area" class="Option">
-			<h2>地域</h2>
+			<h3>地域</h3>
 			<div>
 				<label><input type="radio" name="area" value="dh" />道北</label>
 				<label><input type="radio" name="area" value="dn" />道南</label>
@@ -35,7 +37,7 @@ <h2>地域</h2>
 		</div>
 
 		<div id="Type" class="Option">
-			<h2>種別</h2>
+			<h3>種別</h3>
 			<div>
 				<label><input type="radio" name="type" value="cp" checked="checked" />雨量・雲量</label>
 				<label><input type="radio" name="type" value="wa" />気圧・風速</label>
@@ -131,6 +133,11 @@ <h2>種別</h2>
 				<div></div>
 			</div>
 		</div>
+
+		<h2>GPV気象予報</h2>
+		<div id="GpvFrame">
+			<iframe></iframe>
+		</div>
 	</div>
 </body>
 </html>
diff --git a/archive/js/index.js b/archive/js/index.js
@@ -1,9 +1,11 @@
 $(document).ready(function() {
 	'use strict';
 
-	const START_YEAR = 2021;
-
+	const START_YEAR             = 2021;
 	const JOB_SCHEDULED_TIME_MIN = 40;
+	const GPV_UPDATE_MIN         = 30;
+
+	const GPV_URL = 'http://weather-gpv.info/';
 
 	const AUTO_PLAY_STATUS = {
 		STOP : 0,
@@ -28,6 +30,7 @@ $(document).ready(function() {
 	const ELEM_NAME_PREV_BUTTON     = '#PrevButton';
 	const ELEM_NAME_NEXT_BUTTON     = '#NextButton';
 	const ELEM_NAME_GPV_IMAGE       = '#GpvImage';
+	const ELEM_NAME_GPV_FRAME       = '#GpvFrame > iframe';
 	const CLASS_NAME_PLAY           = 'Play';
 	const CLASS_NAME_PAUSE          = 'Pause';
 
@@ -41,6 +44,7 @@ $(document).ready(function() {
 	initDayOptions((new Date()).getFullYear(), (new Date()).getMonth() + 1);
 	initDateSelect();
 	resetGpvImage();
+	resetGpvFrame();
 
 	//
 	// events
@@ -67,11 +71,13 @@ $(document).ready(function() {
 	$(ELEM_NAME_INPUT_AREA).change(function() {
 		stopAutoPlay();
 		resetGpvImage();
+		resetGpvFrame();
 	});
 
 	$(ELEM_NAME_INPUT_TYPE).change(function() {
 		stopAutoPlay();
 		resetGpvImage();
+		resetGpvFrame();
 	});
 
 	$(ELEM_NAME_SELECT_YEAR).change(function() {
@@ -350,6 +356,27 @@ $(document).ready(function() {
 		})
 	}
 
+	function resetGpvFrame() {
+		const area = $(ELEM_NAME_INPUT_AREA + ':checked').val();
+		const type = $(ELEM_NAME_INPUT_TYPE + ':checked').val();
+
+		var now = new Date();
+		var hour_delta = now.getHours() % 3 + 3;
+		if (hour_delta === 5 && now.getMinutes() >= GPV_UPDATE_MIN) {
+			hour_delta = 2;
+		}
+		now.setHours(now.getHours() - hour_delta);
+		const year = now.getFullYear();
+		const month = toDoubleDigits(now.getMonth() + 1);
+		const day = toDoubleDigits(now.getDate());
+		const hour = toDoubleDigits(now.getHours());
+
+		const url = GPV_URL + 'msm_' + type + '_' + area + '_' + year + month + day + hour + '.html';
+		//console.log(url);
+
+		$(ELEM_NAME_GPV_FRAME).attr('src', url);
+	}
+
 	function autoPlay() {
 		const interval = $(ELEM_NAME_SELECT_SPEED + ' > option:selected').val();
 		autoPlayTimer = setTimeout(function() {