bhouseWeb/static/js/cz_filter.js

// 選擇屋型處理
function change_type() {
  type = this.value;

  // 更新畫面資料
  update_info(type, ping, budget, rooms);
}

// 選擇坪數處理
function change_ping() {
  ping = this.value;

  // 更新畫面資料
  update_info(type, ping, budget, rooms);
}

// 選擇預算處理
function change_budget() {
  budget = this.value;

  // 更新畫面資料
  update_info(type, ping, budget, rooms);
}

// 選擇格局處理
function change_rooms() {
  rooms = this.value;

  // 更新畫面資料
  update_info(type, ping, budget, rooms);
}

// 更新畫面資料
function update_info(type, ping, budget, room) {
  console.log(type + ',' + ping + ',' + budget + ',' + room); // test (大樓,全部坪數,全部預算,全部格局)

  var items = []; // 作品集資料清單

  // 讀取作品集資料(json)
  fetch('https://bhouse.ptt.cx/api/contents?url=/collection')
    .then(response => response.json())
    .then(items => {
      console.log('讀取作品集資料(json)....');

      var content = "";

      console.log('載入符合篩選條件(' + type + ',' + ping + ',' + budget + ',' + rooms + ')的作品...........');

      var filter_num = 0; // 篩選條件數量

      if (!type.includes("全部")) {
        filter_num += 1;
      }

      if (!ping.includes("全部")) {
        filter_num += 1;
      }

      if (!budget.includes("全部")) {
        filter_num += 1;
      }

      if (!rooms.includes("全部")) {
        filter_num += 1;
      }

      console.log('篩選條件數: ' + filter_num); // test

      for (var i = 0; i < items.length; i++) {
        if (items[i]['url'] && items[i]['url'] != '/collection') {
          var tags = items[i]['tags'].replace('"', ''); // 各作品tag
          var matched_num = 0; // 符合篩選條件數量

          if (tags.includes(type)) {
            matched_num += 1;
          }

          if (tags.includes(ping)) {
            matched_num += 1;
          }

          if (tags.includes(budget)) {
            matched_num += 1;
          }

          if (tags.includes(rooms)) {
            matched_num += 1;
          }

          console.log('符合篩選條件數: ' + matched_num); // test

          if (matched_num == 4) {
            content += ' \
              <div class="col"> \
                <div class="card h-100"> \
                  <a class="link-collection" href="' + items[i]['url'] + '"> \
                    <amp-img \
                      alt="' + items[i]['title'] + '" \
                      src="' + items[i]['image'] + '" \
                      height="1" \
                      width="1.4" \
                      layout="responsive"> \
                    </amp-img> \
                  </a> \
                  <div class="card-body"> \
                      <a class="link-collection" href="' + items[i]['url'] + '"> \
                          <div class="title-size"><b>' + items[i]['title'] + '</b></div> \
                      </a> \
                      <p class="card-text" style="color:#4D4D4D;">' + items[i]['description'] + '</p> \
                  </div> \
                </div> \
              </div>';
          }
        }
      }

      // 載入符合篩選條件的作品
      var update_info = document.querySelectorAll('.update_info');

      if (content) {
        // 查無資料畫面
        console.log('有資料'); // test
      } else {
        console.log('無資料'); // test

        content += ' \
          <div class="card bg-primary text-white text-center"> \
            <div class="card-body p-5"> \
              <div class="mb-3"> \
                <b>找不到符合條件的作品</b> \
              </div> \
              <div class="mb-3"> \
              ' + type + ' \
              </div> \
              <div class="mb-3"> \
              ' + ping + ' \
              </div> \
              <div class="mb-3"> \
              ' + budget + ' \
              </div> \
              <div class="mb-3"> \
              ' + rooms + ' \
              </div> \
              <div> \
                <a href="/collection" class="btn btn-primary">重新查詢</a> \
              </div> \
            </div> \
          </div>';
      }

      // 更新畫面
      for (var i = 0; i < update_info.length; i++) {
        update_info[i].innerHTML = content;
      }
    }).catch((error) => {
      console.error('Error:', error);
    });
}

// 預設選項值
var type = "全部類型";
var ping = "全部坪數";
var budget = "全部預算";
var rooms = "全部格局";

// 類型
var items = document.getElementsByClassName('type');
for (var i = 0; i < items.length; i++) {
  console.log('選擇類型..........');
  items[i].addEventListener("change", change_type);
}

// 坪數
var items = document.getElementsByClassName('ping');
for (var i = 0; i < items.length; i++) {
  console.log('選擇坪數..........');
  items[i].addEventListener("change", change_ping);
}

// 預算
var items = document.getElementsByClassName('budget');
for (var i = 0; i < items.length; i++) {
  console.log('選擇預算..........');
  items[i].addEventListener("change", change_budget);
}

// 格局
var items = document.getElementsByClassName('rooms');
for (var i = 0; i < items.length; i++) {
  console.log('選擇格局..........');
  items[i].addEventListener("change", change_rooms);
}