hsinny/06_2-typhoon_api

Demo：

06_2-typhoon_api's Issues

Google Map APIs 收費

產品	資料類型	時間	使用情況	金額US
Maps and Street View API	Dynamic Maps	2018.07.01~07.31	2935個	$ 0.25

Tricks 筆記 - JavaScript

1. 字串切割 .split('') => 指定一個字元作為字串分割字元

str = '2018-07-11T06:04:07';
str.split('T');
// 得到結果 array = ['2018-07-11', '06:04:07']

---

2. 滾動畫面至特定位置 window.scrollTo(x,y)

// 加入視窗寬度判斷，RWD 特定位置的y不同 
if (window.innerWidth >= 1200) {
  mainWrap.scrollTo(0, 200);
  } else if ((window.innerWidth < 1200) && (window.innerWidth >= 768)) {
  window.scrollTo(0, (window.innerHeight * 0.4 + 57 + 200));  
  // RWD header 57px | map 40vh | select 200px
}

待優化部分

• 換頁後畫面會滾至第1筆資料的位置

• 地標 hover 效果可顯示該點災情

• 下拉選單多層篩選功能：區域 / 災情類型 / 處理狀態

• 將撈回的資料照最新的發生日期排序

• Select 選單內的選項同時顯示各區域筆數

• 災情明細上的地址可點擊，連動 MAP zoom in 顯示

• SPA的部份，在第一次渲染的時候先預設資料輸出，再等xhr.onloand 完成，用撈回的資料去置換掉原先寫死預設的。

• 表格RWD

Bug修正紀錄-test

1. < img src="images/..." >
   路徑開頭勿加"/"，讀取路徑會有誤，造成讀不到圖片(在本機和上傳網路空間後無法顯示圖片)。

2. 頁碼顯示，符合的資料筆數若不滿1頁，清除頁碼表不顯示

  if (totalPage <= 1) {  // 總頁數不到2頁，清除頁碼DOM
    pagination.innerHTML = '';
  } else if (totalPage > 1) {
    pagination.innerHTML = '';
    var pageBtn = '';
    for (let i = 0; i < totalPage; i++) {
      pageBtn += `<li class="page-item"><a class="page-link" href="#" data-page="${(i + 1)}">${(i + 1)}</a></li>`;
    }
    pagination.innerHTML = prevBtn + pageBtn + nextBtn;
  }

3. 發生時間做字串切割.split(’’) => 指定一個字元作為字串分割字元

str = '2018-07-11T06:04:07';
str.split('T');
// 得到結果 array = ['2018-07-11', '06:04:07']

4. 修正地圖只在點選新區域時更新內容，點擊換頁不更新。
   HTML內的JS會先callback執行函式initMap()，讓Map在網頁載入時先顯示，
   之後等 xhr.onload 撈回 data，再依 data 渲染畫面顯示地圖標記。

<script src="https://maps.googleapis.com/maps/api/js?key=...&callback=initMap" async defer></script>

未完成

• 數據分析

• RWD

• 網站檢測

• 地區選項加入"全臺北市"，並可顯示撈回的全部資料

• 其他資訊需求規劃整合

• 頁碼最多顯示10頁，超過顯示...

Bug 修正紀錄

1. < img src="images/..." >
   路徑開頭勿加"/"，讀取路徑會有誤，造成讀不到圖片(在本機和上傳網路空間後無法顯示圖片)。

---

2. 頁碼顯示，符合的資料筆數若不滿1頁，清除頁碼表不顯示

if (totalPage <= 1) {  // 總頁數不到2頁，清除頁碼DOM
  pagination.innerHTML = '';
} else if (totalPage > 1) {
  pagination.innerHTML = '';
  var pageBtn = '';
  for (let i = 0; i < totalPage; i++) {
    pageBtn += `<li class="page-item"><a class="page-link" href="#"  data-page="${(i + 1)}">${(i + 1)}</a></li>`;
  }
  pagination.innerHTML = prevBtn + pageBtn + nextBtn;
}

---

3. 修正地圖只在點選新區域時更新內容，點擊換頁不更新。

(1). Html 內的 JS 會先 callback 執行函式 initMap()，讓 Map 在網頁載入時先顯示中心點位置。

<script src="https://maps.googleapis.com/maps/api/js?key=...&callback=initMap" async defer></script>

(2). 之後等 xhr.onload 撈回 data，再依 data 渲染畫面顯示地圖標記。

xhr.onload = function () {
  jsonData = JSON.parse(xhr.responseText);
  data = jsonData;
  ...
  ...
  renderOption(jsonData);
  renderContent(1); // 參數 => 第1頁
  initMap();
}

(3). 在監聽區域選單變動的函式中，更新地圖地標渲染畫面。

zone.addEventListener('change', function(e){
  e.preventDefault();
  queryArea(e.target.value);  // 重新將查詢的資料放入到新的 array
  renderContent(1);           // array 資料渲染到畫面
  initMap();                  // array 資料渲染地圖
}, false);

---

4. 修正監聽頁碼點擊對象後的 if 判斷
   在pagination範圍內，若點到的非上一下、下一頁、頁碼按鈕，則 return，不往下執行。

---

5. 修正 footer 在內容太少時，會往上貼齊內容，需讓 footer 可以置底。
   

• 參考：HTML將footer置底的方法(使用CSS)

---

6. 修正 map height: 100%，在 safari 無法自動撐開高度，父層容器需指定實際高度
   map 改設固定高度 => height: calc(100vh - header - footer)
   

• 參考：flex引起的子元素无法设置height: 100%的问题(safari & chrome)

未來可增功能

• 當次颱風氣象顯示

• 全台停班停課狀況

• 新聞跑馬燈效果

Tricks 筆記 - HTML & Css

HTML Tricks

1. 讓選單< option >選項不能被點選

<option selected disabled="disabled">-請選擇-</option>
// disabled => 被禁用的選項既不可用，也不可點擊

---

Css Tricks

1. <select></select> 下拉選單沒有擬元素
2. 清除下拉選單<select> 選擇框預設樣式

appearance: none
-moz-appearance: none    // Firefox 
-webkit-appearance: none // Safari 和 Chrome 

3. 修改下拉選單 <select> 三角形樣式

background: url('../images/icon-dropdownToggle.svg') no-repeat // 三角形圖片
background-size: 10px    // 三角形大小
background-position: right 4% center  // 三角形位置

4. Table RWD
參考資料 重點 code

table, tbody, th, td, tr
  display: block
  
thead
  display: none

td
  padding-left: (大於td:before的寬度)
  position: relective
  
td:before 
  width: (最長標題的寬度)
  display: inline-block
  position: absolute

td:nth-child(1)::before
  content: '發生時間'  // thead 的表格標題
td:nth-child(2)::before
  content: '處理狀況'  // thead 的表格標題