NewsAndEventsBlock: Productionstjanst

Vue.component("newsandeventsblockcomponent", {
  name: "newsandeventsblockcomponent",
  template: `
  <div >
  <slot name="header">
  
  </slot>

  <div class="row">
      <div class="col-12 col-md-4" v-for="i in 6" :key="i" v-if="loading">
          <article class="fake--article ">
              <div class="fake--image loading"></div>
              <div class="fake--title loading mt-xs mb-xs"></div>
              <div class="fake--text  mb-xs">
                  <div class="loading"></div>
                  <div class="loading"></div>
                  <div class="loading"></div>
              </div>
          </article>
      </div>
      <div class="col-12 col-md-4" v-for="(item, index) in items" :key="index" v-if="!loading && index <= 5">
          <article role="article">
              <a :href="item.Url" class="article--image lazyload d-flex" v-if="item.ImageData" v-cloak
                  :data-bg="item.ImageData"
                  >
                  <div v-cloak class="caption " v-if="!item.CalendarPageId">
                      Nyhet
                  </div>
                  <div v-cloak class="caption " v-if="item.CalendarPageId">
                      \{{item.EventStartDate}}
                  </div>
              </a>
              <h2 class="heading-level-3"><a :href="item.Url">\{{item.Title}}</a></h2>
              <p v-if="item.Intro">\{{item.Intro}}</p>
              <div class="d-flex flex-row" v-if="item.CalendarPageId">
                  <p class="small-font">Uppdaterad: \{{item.ChangedDate}}.
                      <br>Start: \{{item.EventStartDate}} kl. \{{item.StartTime}}-\{{item.StopTime}}
                      <br>\{{item.City}}<span class="small-font" v-if="item.Location">, \{{item.Location}}</span></p>

              </div>
              <div v-else class="d-flex flex-row">
                  <p class="small-font">\{{item.PublishedDate}}</p>
              </div>
          </article>
      </div>

  </div>
</div>
  `,
  data() {
    return {
      url: "",
      loading: false,
      items: [],
      events: [],
      news: [],
      eventRequest: {
        request: {
          Settings: {
            IsInit: true,
            PageIndex: 0
          }
        }
      },
      newsRequest: {
        request: {
          Settings: {
            IsInit: true,
            PageIndex: 0
          }
        }
      }
    };
  },
  mounted() {
    if (document.getElementById("newsandeventsblock")) {
      this.waitForUrlBeforeFetch();
    }
  },
  methods: {
    isLoading(bool) {
      this.loading = bool;
    },
    async waitForUrlBeforeFetch() {
      if (document.getElementById("newsandeventsblock")) {
        this.isLoading(true);
        let page = document.getElementById("newsandeventsblock");
        if (page) {
          //Get Event Props
          let eventsUrl = page.getAttribute("fetch-events-url");
          let eventProps = {
            ImageHeight: page.getAttribute("event-image-height"),
            ImageWidth: page.getAttribute("event-image-width"),
            DefaultCity: page.getAttribute("event-default-city"),
            LanguageId: page.getAttribute("event-language-id"),
            MonthFilterCount: page.getAttribute("event-month-filter-count"),
            PageSize: page.getAttribute("event-page-size"),
            PreviewLength: page.getAttribute("event-preview-length"),
            CalendarPageId: page.getAttribute("event-calendarpage-id")
          };

          //Get News Props
          let newsUrl = page.getAttribute("fetch-news-url");
          let newsProps = {
            ImageHeight: page.getAttribute("news-image-height"),
            ImageWidth: page.getAttribute("news-image-width"),
            DefaultCity: page.getAttribute("news-default-city"),
            LanguageId: page.getAttribute("news-language-id"),
            MonthFilterCount: page.getAttribute("news-month-filter-count"),
            PageSize: page.getAttribute("news-page-size"),
            PreviewLength: page.getAttribute("news-preview-length"),
            NewsPageId: page.getAttribute("news-newspage-id")
          };

          if (eventProps && newsProps) {
            this.eventRequest.request.Settings = {
              ...this.eventRequest.request.Settings,
              ...eventProps
            };
            this.newsRequest.request.Settings = {
              ...this.newsRequest.request.Settings,
              ...newsProps
            };

            await this.fetchEvents(eventsUrl, this.eventRequest);
            await this.fetchNews(newsUrl, this.newsRequest);

            this.combineEventsAndNews();
          }
        }
      }
    },
    combineEventsAndNews() {
      let arr = [...this.events, ...this.news];
      console.log({"arr": arr});
      console.log({"shuffled arr": this.shuffle(arr)});


      this.formatDateAndFilterByDate(arr);
    },
    async formatDateAndFilterByDate(arr) {
      if (arr) {
        try {
          arr.forEach(element => {
            if (element.NewsPageId) {
              let momentDate = element.PublishedDate.slice(6, -2);
              let converMomentToDate = new Date(parseInt(momentDate, 10));
              let newMomentDate = moment(converMomentToDate)
                .locale("sv")
                .format("LL");
              element.PublishedDate = newMomentDate;
              element.date = converMomentToDate;
            }
            if (element.CalendarPageId) {
              let momentDate = element.EventStartDate.slice(6, -2);
              let converMomentToDate = new Date(parseInt(momentDate, 10));
              let newMomentDate = moment(converMomentToDate)
                .locale("sv")
                .format("LL");
              element.EventStartDate = newMomentDate;

              let momentDate1 = element.ChangedDate.slice(6, -2);
              let converMomentToDate1 = new Date(parseInt(momentDate1, 10));
              let newMomentDate1 = moment(converMomentToDate1)
                .locale("sv")
                .format("LL");
              element.ChangedDate = newMomentDate1;
              element.date = converMomentToDate1;
            }
          });
          let data = arr;
          data.sort((a, b) => a.date.getTime() - b.date.getTime());
          this.items = data.reverse();
          this.isLoading(false);
        } catch (error) {
          this.isLoading(false);
        }
      }
    },
    async fetchEvents(url, req) {
      try {
        let response = await fetch(url, {
          method: "post",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
          },
          body: JSON.stringify(req)
        });
        let data = await response.json();
        if (data.d) {
          this.events = data.d.Events;
        } else {
          this.events = data.Events;
        }
      } catch (error) {
        this.isLoading(false);
      }
    },
    shuffle(array) {
      var currentIndex = array.length, temporaryValue, randomIndex;
    
      // While there remain elements to shuffle...
      while (0 !== currentIndex) {
    
        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
    
        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }
    
      return array;
    },
    async fetchNews(url, req) {
      try {
        
        let response = await fetch(url, {
          method: "post",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
          },
          body: JSON.stringify(req)
        });
        let data = await response.json();

        if (data.d) {
          this.news = data.d.Events;
        } else {
          this.news = data.Events;
        }
      } catch (error) {
        this.isLoading(false);
      }
    }
  }
});