ClassContent/历届学生/苏琪/项目练习/weather/js/index.js

(function() {

  var sk, future, today, isOpen = false, WeatherIcon = [
    { text: '多云', icon: './img/b1.png' },
    { text: '晴', icon: './img/b0.png' },
    { text: '阴', icon: './img/b2.png' },
    { text: '雨', icon: './img/b8.png' }
  ];

  var cityLitst = [
    '合肥','蚌埠','六安','北京','南京'
  ], newList = [];

  var cityLists = localStorage.getItem("cityList") == null
                ? []
                : JSON.parse(localStorage.getItem("cityList"));

  function getIp() {
    get({
      url: '/ip',
      data: {},
      callback (res) {
        var city = res.city;
        city.indexOf("省") > -1 ? city = city.split("省")[1] : city;
        getCityWeather(city)
      }
    })
  }


  function getCityWeather(city) {
    get({
      url: '/getWeather',
      data: {
        cityname : city
      },
      callback (res) {
        sk = res.sk;
        future = res.future;
        today = res.today;

        $(".title_city").text(today.city)
        $(".content_top h2").text(`${sk.temp}°`)  
        $(".content_top p").text(`${sk.humidity} | ${sk.wind_direction} | ${sk.wind_strength}`)  
        
        RenderToday();
        RenderFuture();
      }
    })
  }

  function RenderToday () {
    
    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'}
    ];
    
    $('.content_today ul').empty()
    list.forEach(val => {
      $('.content_today ul').append(`<li>
                                        <svg class="icon" aria-hidden="true">
                                          <use xlink:href="${val.icons}"></use>
                                        </svg>
                                        <p>${val.text}${val.value}<p>
                                      </li>`)
    })
  }

  function RenderFuture () {

    future.forEach(fut => {
      WeatherIcon.forEach(icon => {
        if(fut.weather.indexOf("转") > -1) {
          let cur = fut.weather.split("转")[1];
          console.log(cur)
          if (cur.indexOf(icon.text) > -1) {
            fut.icon = icon.icon
          }
        } else if (fut.weather.indexOf(icon.text) > -1){
          fut.icon = icon.icon
        }
      })
    });

    $('.content_future ul').empty()
    future.forEach(val => {
      $('.content_future ul').append(`<li>
                                        <p>${val.week}</p>
                                        <img src="${val.icon}" alt="">
                                        <span>${val.temperature}</span>
                                      </li>`)
    })
  }

  function OpenRight() {
    $('.open-drap').on('click', function() {
      RenderCityList()
      $('.main').css({ right: '70%' })
      $('.menu').css({ right: '-30%' })
    })

    $('.main').on('click', function() {
      $('.main').css({ right: '0' })
      $('.menu').css({ right: '-100%' })
    })
  }
  
  function RenderCityList() {
    $(".his_info").empty()
    if(cityLists.length == 0) {
      $(".his_info").append(`<p>没有数据...</p>`)
    }else {
      cityLists.forEach(val => {
        $(".his_info").append(`<span>${val}</span>`)
      })

      BindClickCityList()
    }
  }
  
  function BindClickCityList() {
    $(".his_info span").on("click",function () {
      getCityWeather($(this).text())
      $('.main').css({ right: '0' })
      $('.menu').css({ right: '-100%' })
    })
  }

  function OnInput () {
    $(".menu_center input").on('input',function() {
      newList = []
      var key = $(".menu_center input").val();
      cityLitst.forEach(val => {
        if(val.indexOf(key) > -1) {
          newList.push(val)
        }
      });

      $('.menu_center ul').empty()
      newList.forEach(val => {
        $('.menu_center ul').append(`<li>${val}</li>`)
      })

      cityList()
    })
  }

  function cityList () {

    $(".menu_center ul li").on('click', function() {
      getCityWeather($(this).text())

      if(cityLists.indexOf($(this).text()) <= -1) {
        cityLists.push($(this).text())
        localStorage.setItem("cityList", JSON.stringify(cityLists));
      }

      $('.main').css({ right: '0' })
      $('.menu').css({ right: '-100%' })
    })
  }



  getIp()
  OpenRight()
  OnInput()


})()