ClassContent/历届学生/罗朝/项目练习/天气预报/js/wather.js

(function(window,document) {


  var is = true;
  function weather () {
    this.baseUrl = "http://103.91.219.160:9090/getWeather"
    this.init()
    this.WeatherIcon = [
      { text: '多云', icon: './img/b1.png' },
      { text: '晴', icon: './img/b0.png' },
      { text: '阴', icon: './img/b2.png' },
      { text: '雨', icon: './img/b8.png' }
    ];

    this.CityList = [ '合肥','六安','芜湖','阜阳','蚌埠','南京','苏州','上海','北京','杭州','上饶' ]

  }

  weather.prototype = {

    init () {
      if(localStorage.getItem("city") == null) {
        this.getIndexData("合肥")
      } else {
        this.getIndexData(localStorage.getItem("city"))
      }
      
      this.openDrap()
      this.bindEnevtInput()
    },


    getIndexData (cityname) {
      var self = this;
      this.get(this.baseUrl,{ 
        cityname: cityname,
      }, function(res) {
        self.renderToday(res.result.sk)
        self.renderTodayInfo(res.result.sk,res.result.today)
        self.renderFuture(res.result.future)
      })
    },

    renderToday(sk) {
    
      this._(".content_top h2").innerText = `${sk.temp}°`;
      this._(".content_top p").innerText = `${sk.humidity} | ${sk.wind_direction} | ${sk.wind_strength}`;
    },

    renderTodayInfo(sk,today) {
      var self = this;
      this._(".title_city").innerText = `${today.city}`
      var list = [
        { text: '温度: ', value: sk.temp, icons: '#icon-thermometer'},
        { text: '湿度: ', value: sk.humidity, icons: '#icon-shidu'},
        { text: '风力: ', value: sk.wind_strength, icons: '#icon-feng'},
        { text: '天气: ', value: today.weather, icons: '#icon-tianqi'},
        { text: '风向: ', value: sk.wind_direction, icons: '#icon-fangxiangpai'},
        { text: '紫外线: ', value: today.uv_index, icons: '#icon-taiyangrichu'}
      ];
      this._(".content_today ul").innerHTML = ""
      list.forEach(function(val,index,arr){
        self._(".content_today ul").innerHTML += `<li>
                                                    <svg class="icon" aria-hidden="true">
                                                      <use xlink:href="${val.icons}"></use>
                                                    </svg>
                                                    <p>${val.text}${val.value}<p>
                                                  </li>`
      });
    },

    renderFuture(future) {

      var self = this;
      future.forEach(function(val,index,arr) {
        self.WeatherIcon.forEach(function(value,key,data){
          if(val.weather.indexOf("转") > -1){
            var tex = val.weather.split("转")[1];
            if(tex.indexOf(value.text) > -1) {
              val.icon = value.icon
            }
          }else if(val.weather.indexOf(value.text) > -1){
            val.icon = value.icon
          }
        })
      });
      self._(".content_future ul").innerHTML = ""
      future.forEach(function(val,index,arr) {
        self._(".content_future ul").innerHTML += `<li>
                                                      <p>${val.week}</p>
                                                      <img src="${val.icon}" alt="">
                                                      <span>${val.temperature}</span>
                                                    </li>`
      })
    },

    openDrap() {
      var self = this;
      this._(".open-drap").onclick = function () {
        if(is) {
          self.renderHistoryList()
          self._(".main").className = "main open-main"
          self._(".menu").className = "menu open-menu"
          is = false;
        } else {
          self._(".main").className = "main"
          self._(".menu").className = "menu"
          is = true;
        }
      }
    },

    renderHistoryList() {
      var self = this;
      this._(".his_info").innerHTML = ""
      var listArray = JSON.parse(localStorage.getItem("city_history"));
      if(listArray == null) {
        this._(".his_info").innerHTML = `<span>没有历史城市数据...</span>`
      }else {
        listArray.forEach((v) => {
          this._(".his_info").innerHTML += `<span>${v}</span>`
        })
      }

      var span = document.querySelectorAll(".his_info span");
      span.forEach(function(val,indx,arr){
        val.onclick = function () {
          self.getIndexData(val.innerText)
          self._(".main").className = "main"
          self._(".menu").className = "menu"
          is = true;
        }
      })
      
    },

    bindEnevtInput() {
      var listArray = []
      this._(".menu_center input").oninput = () => {
        var cityname = this._(".menu_center input").value;
        listArray = []
        this.CityList.forEach((val) => {
          if(val.indexOf(cityname) > -1 && cityname.length != 0) {
            listArray.push(val)
          }
          
        })
        this._(".menu_center ul").innerHTML = ""
        listArray.forEach((val) => {
          this._(".menu_center ul").innerHTML += `<li>${val}</li>`
        })

        this.bindClickCity()
      }
    },

    bindClickCity() {
      var self = this, cityList = [];
      console.log("1")
      var li = document.querySelectorAll(".menu_center ul li");
      li.forEach(function(val,indx,arr){
        val.onclick = function () {
          self.getIndexData(val.innerText)
          self._(".main").className = "main"
          self._(".menu").className = "menu"
          is = true;

          localStorage.setItem("city", val.innerText)
          cityList.push(val.innerText)
          console.log("3")
          if(localStorage.getItem("city_history") == null) {
            localStorage.setItem("city_history", JSON.stringify(cityList))
          } else {
            var list = JSON.parse(localStorage.getItem("city_history"))
            console.log("4")
            if( (JSON.stringify(list)).indexOf(val.innerText) > -1 ) {
              console.log("5")
              }else {
                console.log("6")
                list.push(val.innerText)
                localStorage.setItem("city_history", JSON.stringify(list))
                return false; 
              }
          }
        }
      })
    },

    /**
     * GET请求的封装
     * @param {*} url 请求地址 
     * @param {*} params 需要发给后端的参数
     * @param {*} callback 回调函数
     */
    get (url,params,callback) {
      $.ajax({
        type: 'GET',
        url: url,
        data: params,
        success: function (res) {
          callback(res)
        },
        error: function (err) {
          throw new Error(JSON.stringify(err))
        }
      })
    },

    _(name) {
      return document.querySelector(name)
    }

  }

  window.Weather = weather


})(window,document)