From 304675a8b8939e93d589e0c17d1bc83f16dca229 Mon Sep 17 00:00:00 2001
From: LiaoYijun <lyj@hainatravel.com>
Date: Tue, 9 Nov 2021 15:10:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=A4=A9=E6=B0=94=E9=A2=84?=
 =?UTF-8?q?=E6=8A=A5=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 application/controllers/information.php       |   9 +
 .../mobile_first/ch-weather-forecast.php      | 163 ++++++++++++++++++
 2 files changed, 172 insertions(+)
 create mode 100644 application/views/mobile_first/ch-weather-forecast.php

diff --git a/application/controllers/information.php b/application/controllers/information.php
index 604e2083..685ef01f 100644
--- a/application/controllers/information.php
+++ b/application/controllers/information.php
@@ -636,6 +636,15 @@ class Information extends CI_Controller
             }
         }
 
+        // 天气预报模板
+        $weather_forecast_content = $this->load->view(
+            $template_path . '-weather-forecast',
+            array(),
+            true);
+        $template = str_replace(
+            '<!--@WEATHER-FORECAST-BLOCK@-->',
+            $weather_forecast_content,
+            $template);
 
         //火车票搜索框添加 -- zp
         if ($information->is_parent_id == "278008234") {
diff --git a/application/views/mobile_first/ch-weather-forecast.php b/application/views/mobile_first/ch-weather-forecast.php
new file mode 100644
index 00000000..c5f8692f
--- /dev/null
+++ b/application/views/mobile_first/ch-weather-forecast.php
@@ -0,0 +1,163 @@
+<div class="table-responsive" style="margin-bottom: 30px;">
+<table class="weather_info">
+    <tbody>
+    <tr>
+        <td>
+        <div class="day_weather today_weather">
+            <div class="today_title">Today</div>
+            <p id="todayDate">...</p>
+            <p id="todayTemperature">...</p>
+            <div class="infoimage weather_img"><img alt="" class="img-responsive" id="todayIcon"
+                src="http://openweathermap.org/img/wn/50d.png" /></div>
+            <p id="todayCondition">...</p>
+            <p id="todayHumidity">Humidity: ...</p>
+            <p id="todayWind">Wind: ...</p>
+        </div>
+        </td>
+        <td>
+        <div class="day_weather">
+            <div class="today_title" id="forecastWeek1">Tomorrow</div>
+            <p id="forecastDate1">...</p>
+            <p id="forecastTemperature1">...</p>
+            <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon1"
+                src="http://openweathermap.org/img/wn/50d.png" /></div>
+            <p id="forecastCondition1">...</p>
+            <p id="forecastHumidity1">Humidity: ...</p>
+            <p id="forecastWind1">Wind: ...</p>
+        </div>
+        </td>
+        <td>
+        <div class="day_weather">
+            <div class="today_title" id="forecastWeek2">Forcast2</div>
+            <p id="forecastDate2">...</p>
+            <p id="forecastTemperature2">...</p>
+            <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon2"
+                src="http://openweathermap.org/img/wn/50d.png" /></div>
+            <p id="forecastCondition2">...</p>
+            <p id="forecastHumidity2">Humidity: ...</p>
+            <p id="forecastWind2">Wind: ...</p>
+        </div>
+        </td>
+        <td>
+        <div class="day_weather">
+            <div class="today_title" id="forecastWeek3">Forcast3</div>
+            <p id="forecastDate3">...</p>
+            <p id="forecastTemperature3">...</p>
+            <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon3"
+                src="http://openweathermap.org/img/wn/50d.png" /></div>
+            <p id="forecastCondition3">...</p>
+            <p id="forecastHumidity3">Humidity: ...</p>
+            <p id="forecastWind3">Wind: ...</p>
+        </div>
+        </td>
+        <td>
+        <div class="day_weather">
+            <div class="today_title" id="forecastWeek4">Forcast4</div>
+            <p id="forecastDate4">...</p>
+            <p id="forecastTemperature4">...</p>
+            <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon4"
+                src="http://openweathermap.org/img/wn/50d.png" /></div>
+            <p id="forecastCondition4">...</p>
+            <p id="forecastHumidity4">Humidity: ...</p>
+            <p id="forecastWind4">Wind: ...</p>
+        </div>
+        </td>
+        <td>
+        <div class="day_weather last_day_weather">
+            <div class="today_title" id="forecastWeek5">Forcast5</div>
+            <p id="forecastDate5">...</p>
+            <p id="forecastTemperature5">...</p>
+            <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon5"
+                src="http://openweathermap.org/img/wn/50d.png" /></div>
+            <p id="forecastCondition5">...</p>
+            <p id="forecastHumidity5">Humidity: ...</p>
+            <p id="forecastWind5">Wind: ...</p>
+        </div>
+        </td>
+    </tr>
+    </tbody>
+</table>
+</div>
+<script>
+// https://openweathermap.org/forecast5
+var cityId = window.ch_forecast_city.id;
+var weekMap = new Array("SUN.", "MON.", "TUE.", "WED.", "THU.", "FRI.", "SAT.");
+
+function formatDate(date) {
+    return (date.getMonth() + 1) + '.' + date.getDate();
+}
+function formatWeek(date) {
+    return weekMap[date.getDay()];
+}
+var weatherUrl = 'https://api.openweathermap.org/data/2.5/weather?id=' + cityId + '&appid=d79a45c23a77a304b8fd2cca3590b89d&units=metric';
+fetch(weatherUrl)
+    .then((res) => {
+    if (res.ok) {
+        return res.json();
+    } else {
+        console.error(res);
+        return Promise.reject(res);
+    }
+    })
+    .then((json) => {
+        let todayDate = new Date(json.dt * 1000);
+        document.getElementById('todayDate').innerText = formatDate(todayDate);
+        document.getElementById('todayTemperature').innerText = Math.round(json.main.temp) + '°C';
+        document.getElementById('todayIcon').src = 'http://openweathermap.org/img/wn/' + json.weather[0].icon + '.png';
+        document.getElementById('todayCondition').innerText = json.weather[0].main;
+        document.getElementById('todayHumidity').innerText = 'Humidity: ' + json.main.humidity + '%';
+        document.getElementById('todayWind').innerText = 'Wind: ' + Math.round(json.wind.speed * 3.6) + 'km/h';
+    });
+var forecastUrl = 'https://api.openweathermap.org/data/2.5/forecast?id=' + cityId + '&appid=d79a45c23a77a304b8fd2cca3590b89d&units=metric';
+fetch(forecastUrl)
+    .then((res) => {
+    if (res.ok) {
+        return res.json();
+    } else {
+        console.error(res);
+        return Promise.reject(res);
+    }
+    })
+    .then((json) => {
+        const today = new Date();
+        const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
+        const forecastMap = new Map();
+
+        json.list.forEach(data => {
+            const forecastDate = new Date(data.dt * 1000);
+            const forecastDatetime = forecastDate.getTime();
+            if (forecastDatetime >= tomorrow.getTime()) {
+            const dateKey = '' + forecastDate.getFullYear() + (forecastDate.getMonth() + 1) + forecastDate.getDate();
+
+                if (forecastMap.has(dateKey)) {
+                    const tempList = forecastMap.get(dateKey);
+                    tempList.push(data);
+                } else {
+                    forecastMap.set(dateKey, [data]);
+                }
+            }
+        });
+
+        const keyList = Array.from(forecastMap.keys());
+        for (let i = 0; i < keyList.length; i++) {
+            const oneDayList = forecastMap.get(keyList[i]);
+            oneDayList.sort((a, b) => {
+                return a.main.temp - b.main.temp;
+            });
+
+            let number = i + 1;
+            let firstDay = oneDayList[0];
+            let lastDay = oneDayList[oneDayList.length - 1];
+            let currentDate = new Date(firstDay.dt * 1000);
+
+            document.getElementById('forecastWeek' + number).innerText = formatWeek(currentDate);
+            document.getElementById('forecastDate' + number).innerText = formatDate(currentDate);
+            document.getElementById('forecastTemperature' + number).innerText =
+            Math.round(firstDay.main.temp) + '~' + Math.round(lastDay.main.temp) + '°C';
+            document.getElementById('forecastIcon' + number).src = 'http://openweathermap.org/img/wn/' + firstDay.weather[0].icon + '.png';
+            document.getElementById('forecastCondition' + number).innerText = firstDay.weather[0].main;
+            document.getElementById('forecastHumidity' + number).innerText = 'Humidity: ' + firstDay.main.humidity + '%';
+            document.getElementById('forecastWind' + number).innerText = 'Wind: ' + Math.round(firstDay.wind.speed * 3.6) + 'km/h';
+        }
+    });
+</script>
\ No newline at end of file