https://app2.sked.life/misc/reviewList.js

1(() => {
2  const skedBlue = "#358bc9";
3  const styles = `
4    * {
5      font-family : "Roboto", sans-serif;
6      color : #555555;
7    }
8
9    :host {
10      display: block;
11    }
12
13    .star {
14      color: #f7d700;
15    }
16
17    .reviews {
18      width: 100%;
19      height: 100%;
20      cursor: default;
21    }
22
23    .review:first-child {
24      border-top: 1px solid rgb(235, 235, 235);
25    }
26
27    .review {
28      display: inline-grid;
29      row-gap: 4px;
30      padding-top: 15px;
31      padding-bottom: 15px;
32      grid-template-columns: 45px 1fr;
33      grid-template-rows: 1em auto 1fr;
34      grid-template-areas: "image name" "image rating" "body body";
35      border-bottom: 1px solid rgb(235, 235, 235);
36    }
37
38    .review-rating {
39      grid-area: rating;
40      user-select: none;
41      -webkit-user-select: none;
42    }
43
44    .review-image {
45      grid-area: image;
46      justify-self: left;
47      align-self: center;
48      width: 35px;
49    }
50
51    .review-body {
52      grid-area: body;
53      padding-top: 5px;
54      padding-bottom: 7px;
55      box-sizing: border-box;
56    }
57
58    .review-name {
59      grid-area: name;
60      font-weight: bold;
61      user-select: none;
62      -webkit-user-select: none;
63    }
64
65    .powered-by {
66      width:100%;
67      text-align: center;
68      padding-top: 5px;
69    }
70
71    .powered-by a {
72      text-decoration: none;
73    }
74
75    .powered-by img {
76      height: 1.1em;
77      position: relative;
78      top: 2.5px;
79      left: -4px;
80    }
81
82  `;
83
84  class SkedReviewList extends HTMLElement {
85    connectedCallback () {
86      const shadow = this.attachShadow({mode: 'open'});
87      const wrapper = document.createElement("div");
88      wrapper.part = 'wrapper';
89
90      const api = this.getAttribute("data-api");
91      const token = this.getAttribute("data-token");
92      const url = api + "/reviews/" + token
93
94      const response = fetch(url, {
95        method: "GET",
96        headers: {
97          'Content-Type': 'application/json',
98          'Accept': 'application/json',
99        },
100      }).then( async (response) => {
101        if (response.ok) {
102          const reviews = await response.json();
103          this.reviews = reviews.reviews
104
105          const reviewsElem = document.createElement('div');
106          reviewsElem.classList.add('reviews');
107          reviewsElem.part = 'reviews';
108          wrapper.appendChild(reviewsElem);
109
110          reviews.reviews.forEach (review => {
111            const reviewElem = createReview(review);
112            reviewsElem.appendChild(reviewElem);
113          });
114
115
116          const poweredBy = document.createElement('div');
117          poweredBy.innerHTML = `<a href="https://sked.life" target="blank_">By <img src="https://sked-image.s3.amazonaws.com/SkedLogo.png"></a>`;
118          poweredBy.classList.add('powered-by');
119          wrapper.appendChild(poweredBy);
120
121        } else {
122          wrapper.innerHTML = "error getting the reviews";
123        }
124      });
125      const style = document.createElement("style");
126      style.textContent = styles;
127      shadow.appendChild(wrapper);
128      shadow.appendChild(style);
129    }
130
131  }
132
133  customElements.define('sked-review-list', SkedReviewList);
134
135
136  const createFullStar = () => {
137    const elem = document.createElement('span');
138    elem.innerText = '★';
139    elem.classList.add('star');
140    elem.part = "star";
141    return elem;
142  }
143
144  const createEmptyStar = () => {
145    const elem = document.createElement('span');
146    elem.innerText = '☆';
147    elem.classList.add('star');
148    elem.part = "star";
149    return elem;
150  }
151
152  const createRating = (rating) => {
153    const ratingElem = document.createElement('div');
154    if (rating === "FIVE") {
155      ratingElem.appendChild(createFullStar());
156      ratingElem.appendChild(createFullStar());
157      ratingElem.appendChild(createFullStar());
158      ratingElem.appendChild(createFullStar());
159      ratingElem.appendChild(createFullStar());
160    } else if (rating === "FOUR") {
161      ratingElem.appendChild(createFullStar());
162      ratingElem.appendChild(createFullStar());
163      ratingElem.appendChild(createFullStar());
164      ratingElem.appendChild(createFullStar());
165      ratingElem.appendChild(emptyFullStar());
166    }
167    ratingElem.classList.add('review-rating');
168    return ratingElem;
169  }
170
171
172  const createReview = (review) => {
173    const base = document.createElement('div');
174    base.classList.add('review');
175    base.part = "review";
176
177    const img = document.createElement('img');
178    img.src = review.reviewer.profilePhotoUrl
179    img.classList.add('review-image')
180    img.part = "review-img";
181
182    const reviewerName = document.createElement('div');
183    reviewerName.innerText = review.reviewer.displayName;
184    reviewerName.classList.add('review-name')
185    reviewerName.part = "review-name";
186
187    const rating = createRating(review.starRating);
188    rating.part = "review-rating";
189
190    const body = document.createElement('div');
191    body.innerHTML = review.comment;
192    body.part = "review-body";
193    body.classList.add('review-body');
194
195    base.appendChild(img);
196    base.appendChild(reviewerName);
197    base.appendChild(rating);
198    base.appendChild(body);
199    return base;
200  };
201
202}) ();