拿Trello當資料庫 建一個店家清單:下篇-建立清單頁面

拿Trello當資料庫 建一個店家清單:下篇-建立清單頁面

上篇的最後取得了Url

上篇最後「取得Trello JSON的Url」這段,我們取得了卡片的Url。

下篇,就是本篇,要筆記的是取得資料後的整理,以及處理成一個店家清單的頁面。為了有切換的功能,除了上篇的公館站外,Augustus另外又建了一個古亭站,兩張卡片的JSON Url各自如下:

公館站:https://trello.com/card/5da2c8a3f11397244be7ad22/-.json

古亭站:https://trello.com/card/5da5b564ca7ce5220c35c047/-.json


整理取得的資料

上篇的最後,有說從Trello得來的資料結構如下:

從Trello得來的資料結構
從Trello得來的資料結構

每個店家都在 checklists 裡,而地址、電話就是在裡面的 checkItems 中,所以只需要在fetch後寫一個forEach,就可以整理出我們要的資料了:

let shops = {};
Array.prototype.forEach.call(results.checklists, list => {
  shops[list.id] = Object.create(null, {
    id: { value: list.id },
    name: { value: list.name },
    site: { value: list.checkItems[0].name },
    tel: { value: list.checkItems[1].name }
  });
});

整理完console印出來的結果如下圖:

資料整理完畢
資料整理完畢

因為會在切換捷運站的時候,取得不同的JSON,所以在原始碼的部份寫成vue.js的methods來取得,原始碼會附在本文的最後一段。

確認完可以成功取得、整理資料,下一步就是製作一個清單頁。


製作顯示清單頁面

頁面的部份直接拿Bootstrap來套,不過樣式的部份改用Bootswatch站上的,選用了「Darkly」這個佈景。

基本上用了Bootstrap後,因為示範用的頁面比較簡單,也不用怎麼改,最後完成的頁面如下圖:

清單頁面
清單頁面

切換的功能,像捷運站的切換,左側選單點了會更換右側的詳細資訊,用的是Vue.js,先附上html的部份,為了方便看架構,會刪掉大部份的class name。

捷運站選單

用了 v-on:clickv-bind:class 來切換 .active

<button
    type="button"
    @click="getShops('公館')"
    :class="{ 'active': mrt == '公館' }">公館站</button>
<button
    type="button"
    @click="getShops('古亭')"
    :class="{ 'active': mrt == '古亭' }">古亭站</button>

清單卡片部份

v-for 丟整理過的店家清單, v-on:click 時執行修改詳細店家的資料:

<div class="card mb-3">
  <h5>{{ cardName }} 蔬食店家</h5>
  <div>
    <button v-for="s in shops"
        :class="{ 'active': s.id === shop.id }"
        @click="shop = shops[s.id]">{{ s.name }}
    </button>
  </div>
</div>

店家詳細資料

清單點擊後會改變shop,所以店家詳細資料就是shop的值,地圖的部份用Google Maps Embed API

<div>
  <h5>詳細資訊</h5>
  <div>
    <h4>{{ shop.name }}</h4>
    <p>{{ shop.tel }}</p>
    <p>{{ shop.site }}</p>
    <div>
      <iframe :src="'https://www.google.com/maps/embed/v1/place?key=YOUR_TOKEN&q=' + shop.name"></iframe>
    </div>
  </div>
</div>

iframe 裡的 YOUR_TOKEN 要換成 Google Maps API 的 token。取得 token 的方式可參考這篇:Google Maps API學習筆記-1:地圖、標記、客製樣式


原始碼及Demo

有了資料跟頁面,整個範例就完成了,原始碼整理放到了Github上:

https://github.com/letswritetw/letswrite-trello-db

最後完成的Demo頁在這:

https://letswritetw.github.io/letswrite-trello-db/


Summary
拿Trello當資料庫 建一個店家清單:下篇-建立清單頁面
Article Name
拿Trello當資料庫 建一個店家清單:下篇-建立清單頁面
Description
本篇大綱:上篇的最後取得了Url、整理取得的資料、製作顯示清單頁面、捷運站選單、清單卡片部份、店家詳細資料、原始碼及Demo。本篇要筆記的是取得資料後的整理,以及處理成一個店家清單的頁面。為了有切換的功能,除了上篇的公館站外,Augustus另外又建了一個古亭站。
Augustus
Let's Write
Let's Write
Publisher Logo

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *