From 3e457fa34a62be7903d3cbc00308ee59355d822f Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 6 Sep 2021 15:36:09 -0400 Subject: [PATCH 01/20] home page HTML with services calls --- src/routes/home.js | 113 +++++++++++++++++++++++++++++---- src/services/events-service.js | 8 +++ src/services/posts-service.js | 8 +++ 3 files changed, 118 insertions(+), 11 deletions(-) create mode 100644 src/services/events-service.js create mode 100644 src/services/posts-service.js diff --git a/src/routes/home.js b/src/routes/home.js index 9dab392..e08ef0b 100644 --- a/src/routes/home.js +++ b/src/routes/home.js @@ -1,29 +1,120 @@ /* eslint-disable max-len */ -import { html, LitElement } from 'lit'; +import { css, html, LitElement } from 'lit'; +import { getEvents } from '../services/events-service.js'; +import { getPosts } from '../services/posts-service.js'; class HomeRouteComponent extends LitElement { constructor() { super(); - console.debug('ENTER: home page route'); + this.events = []; + this.posts = []; } - connectedCallback() { + // @import "../../theme.css"; + static styles = css` + :host { + .as-view-home { + margin-bottom: 15px; + + .as-media-carousel { + @include media-breakpoint-down(xs) { + margin-top: -30px; + } + + @include media-breakpoint-only(sm) { + margin-top: 0; + } + + position: relative; + margin: 0 -15px 30px -15px; + } + + .as-media-carousel__label { + position: absolute; + bottom: 45px; + width: 100%; + padding: 15px; + background-color: transparentize($creme, .1); + font-size: 1.25rem; + letter-spacing: 2px; + + @include media-breakpoint-between(sm, md) { + font-size: 1rem; + text-align: center; + } + } + + .as-media-carousel__attribution-label { + position: absolute; + bottom: 0px; + right: 0px; + padding: 2px 4px; + background: transparentize($black, .5); + font-size: .5rem; + } + + .as-media-carousel__attribution-label, + .as-media-carousel__attribution-label-link { + color: $creme; + } + + .as-media-carousel__label, + .as-media-carousel__attribution-label { + @include media-breakpoint-down(sm) { + display: none; + } + } + + .as-welcome { + margin-bottom: 45px; + } + } + } + ` + + async connectedCallback() { super.connectedCallback(); - console.debug('// TODO - fetch events'); + this.events = await getEvents(); + this.posts = await getPosts(); + console.debug(this.posts); + console.debug(this.events); } render() { - console.debug('// TDOD - render events'); return html` -

Coming Soon!

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et dictum odio, et pulvinar massa. Aenean interdum gravida nunc. Duis iaculis lobortis nibh in mattis. Suspendisse tincidunt lorem sit amet ligula tristique convallis. Phasellus a sapien eros. Fusce eleifend pellentesque orci, suscipit sollicitudin ligula sollicitudin in. Etiam rutrum vehicula efficitur. Phasellus eu placerat eros, ac tincidunt massa. Vestibulum sed elit eu erat varius laoreet quis sit amet enim. Morbi congue, urna a vulputate scelerisque, purus turpis congue sapien, ac accumsan risus odio pharetra dolor. Integer aliquam sit amet tellus non bibendum. Suspendisse tincidunt tempor lectus, in egestas nulla porttitor et. Maecenas at lacus nibh. Nam ornare vulputate venenatis. Duis a purus augue.

-

Aliquam tellus lacus, semper id bibendum vitae, facilisis nec urna. Morbi nunc mauris, facilisis a scelerisque vitae, convallis ut metus. Sed sed erat eu magna fermentum euismod sit amet id turpis. Suspendisse potenti. Suspendisse at mauris nibh. Nulla egestas magna non aliquam consequat. Maecenas condimentum lorem sem, ut dignissim tellus malesuada et. Maecenas tempor volutpat gravida. Nam fringilla commodo nibh vel semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse volutpat tortor enim, id ultrices magna pulvinar quis. Pellentesque nec imperdiet sapien. In fringilla, leo vitae commodo gravida, tellus nibh mollis massa, quis tincidunt eros sapien ac neque. Pellentesque neque dui, aliquet at ornare condimentum, aliquam sit amet tortor. Aliquam laoreet lacinia augue sed tempor.

-

Aliquam neque augue, pulvinar ut libero a, sollicitudin rhoncus neque. Integer sed leo nulla. Curabitur sollicitudin justo vel nunc vestibulum, sit amet pretium diam tristique. Etiam convallis egestas blandit. Praesent aliquet justo consectetur orci imperdiet pellentesque at commodo felis. Phasellus venenatis consequat enim ut porta. Fusce non tristique nunc. Maecenas ac leo pellentesque, sagittis odio nec, maximus arcu. Sed scelerisque tortor id bibendum posuere. Mauris sit amet imperdiet risus. Nam semper posuere eros. Integer aliquet gravida arcu, at sagittis purus porta non. Aenean neque mauris, mollis sed iaculis vitae, finibus et odio. Proin venenatis finibus magna, at elementum arcu ultrices nec. Quisque id augue at magna tristique faucibus.

-

Suspendisse mollis suscipit lorem. Sed semper purus et ullamcorper varius. Maecenas rhoncus porttitor enim, sed bibendum nibh venenatis et. Aliquam erat volutpat. Fusce tristique lacinia erat nec faucibus. Nam elementum magna nisi, vitae elementum est mollis at. Suspendisse vulputate, lacus non gravida vulputate, elit sapien semper felis, eu accumsan ipsum ante a augue. Fusce lobortis lectus in viverra auctor. Vestibulum consequat sapien at ligula tincidunt vulputate. Quisque odio arcu, rhoncus eget leo quis, efficitur tincidunt justo. Suspendisse sagittis sodales risus, ac rutrum dolor porta et. Morbi ut dignissim risus, sed elementum leo.

-

Sed sagittis ut augue sed efficitur. Aliquam erat enim, faucibus ut cursus a, suscipit vitae turpis. Ut a auctor eros, et sagittis lectus. Nunc ac dolor et justo sagittis auctor. Aliquam nec orci pulvinar, eleifend augue et, euismod velit. Curabitur nec lorem consequat, auctor purus sit amet, tempus metus. Etiam sit amet varius nisl, et varius est. Aenean posuere dui quis tempor sagittis. Aliquam eget lectus leo. Sed vel tempor tortor, eu consectetur urna. Nullam vitae orci eget est convallis ullamcorper at in massa. Integer efficitur, nunc ac consectetur placerat, neque dui vulputate dolor, in mattis sapien dui sed nisi. Mauris porta dapibus sapien, in tempor augue mollis accumsan. Donec sit amet nunc id felis gravida blandit quis a leo.

+
+
+
+ + + +
+
+ +
+
+ +
+ +
+ +
+
+
`; } } diff --git a/src/services/events-service.js b/src/services/events-service.js new file mode 100644 index 0000000..d733132 --- /dev/null +++ b/src/services/events-service.js @@ -0,0 +1,8 @@ +const EVENTS_API_URL = '/api/events'; + +function getEvents() { + return fetch(EVENTS_API_URL) + .then(resp => resp.json()); +} + +export { getEvents }; \ No newline at end of file diff --git a/src/services/posts-service.js b/src/services/posts-service.js new file mode 100644 index 0000000..584484b --- /dev/null +++ b/src/services/posts-service.js @@ -0,0 +1,8 @@ +const POSTS_API_URL = '/api/posts'; + +function getPosts() { + return fetch(POSTS_API_URL) + .then(resp => resp.json()); +} + +export { getPosts }; \ No newline at end of file From a7e6037409884b1e4e39d4b0ca8f8b6e90dfbae6 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 6 Sep 2021 16:33:35 -0400 Subject: [PATCH 02/20] posts list --- src/components/posts-list/posts-list.js | 78 +++++++++++++++++++++++++ src/routes/home.js | 11 ++-- 2 files changed, 82 insertions(+), 7 deletions(-) create mode 100644 src/components/posts-list/posts-list.js diff --git a/src/components/posts-list/posts-list.js b/src/components/posts-list/posts-list.js new file mode 100644 index 0000000..7462d03 --- /dev/null +++ b/src/components/posts-list/posts-list.js @@ -0,0 +1,78 @@ +import { css, html, LitElement } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import { getPosts } from '../services/posts-service.js'; + +class PostsListComponent extends LitElement { + + static get properties() { + return { + max: { type: Number }, + posts: { type: Array } + }; + } + + constructor() { + super(); + + this.max = null; + this.posts = []; + } + + static get styles() { + return css` + h1 { + color: var(--color-font-secondary); + text-align: center; + }`; + } + + async connectedCallback() { + super.connectedCallback(); + + this.posts = (await getPosts()).reverse(); + } + + getFormateDate(timestamp) { + // SUNDAY, FEBRUARY 12, 2017, 8:47 AM + const days = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY']; + const months = ['JANUARY', 'FEBRUARY', 'MARCH', 'APRIL', 'MAY', 'JUNE', 'JULY', 'AUGUST', 'SEPTEMBER', 'OCOTOBER', 'NOVEMBER', 'DECEMBER']; + + const dateObj = new Date(timestamp); + const amPm = dateObj.getHours() < 12 ? 'AM' : 'PM'; + const hours = dateObj.getHours() < 12 ? dateObj.getHours() : dateObj.getHours() - 12; + + return `${days[dateObj.getDay()]}, ${months[dateObj.getMonth()]} ${dateObj.getDate()}, ${dateObj.getFullYear()}, ${hours}:${dateObj.getMinutes()} ${amPm}`; + } + + render() { + const maxDisplay = !this.max ? this.posts.length : this.max; // : this.max; + const maxPosts = this.posts.slice(0, maxDisplay); + + return html` +
+ +

Latest Posts

+
+ ${ + maxPosts.map((post) => { + const formattedDate = this.getFormateDate(post.createdTime * 1000); + + return html` +
+
Posted: ${formattedDate}
+ +

${post.title}

+ +
${unsafeHTML(post.summary)}
+
+ `; + }) + } +
+ +
+ `; + } +} + +customElements.define('app-posts-list', PostsListComponent); \ No newline at end of file diff --git a/src/routes/home.js b/src/routes/home.js index e08ef0b..b1dfb70 100644 --- a/src/routes/home.js +++ b/src/routes/home.js @@ -1,7 +1,7 @@ /* eslint-disable max-len */ import { css, html, LitElement } from 'lit'; import { getEvents } from '../services/events-service.js'; -import { getPosts } from '../services/posts-service.js'; +import '../components/posts-list/posts-list.js'; class HomeRouteComponent extends LitElement { @@ -9,7 +9,6 @@ class HomeRouteComponent extends LitElement { super(); this.events = []; - this.posts = []; } // @import "../../theme.css"; @@ -78,8 +77,6 @@ class HomeRouteComponent extends LitElement { super.connectedCallback(); this.events = await getEvents(); - this.posts = await getPosts(); - console.debug(this.posts); console.debug(this.events); } @@ -90,8 +87,8 @@ class HomeRouteComponent extends LitElement {