From e94730d88b4e86c77d365d1563629a2584af75a1 Mon Sep 17 00:00:00 2001 From: Scott Duncombe Date: Mon, 6 Nov 2023 14:30:51 -0800 Subject: [PATCH] Deliveries updates --- src/api/PizzaApi.ts | 2 +- src/components/app-root/app-root.tsx | 2 +- .../page-activity/page-activity.tsx | 6 +-- .../page-deliveries/page-deliveries.tsx | 52 ++++++------------- src/components/page-home/Deliveries.tsx | 28 +++++----- src/components/page-home/page-home.scss | 7 ++- src/components/page-home/page-home.tsx | 8 ++- .../ui-main-content/ui-main-content.scss | 4 +- src/util/format.ts | 5 ++ src/util/index.ts | 2 + src/util/urls.ts | 5 ++ 11 files changed, 55 insertions(+), 66 deletions(-) create mode 100644 src/util/format.ts create mode 100644 src/util/urls.ts diff --git a/src/api/PizzaApi.ts b/src/api/PizzaApi.ts index 89420302..b3ebe1d2 100644 --- a/src/api/PizzaApi.ts +++ b/src/api/PizzaApi.ts @@ -58,7 +58,7 @@ class PizzaApi { } public async getOrder(id: OrderId, errorHandler?: (error: ApiError) => void): Promise { - return this.handleResponse(await baseFetch(`/order/${id}`), errorHandler); + return this.handleResponse(await baseFetch(`/orders/${id}`), errorHandler); } public async getOrders(page: number = 0, limit: number = 100, errorHandler?: (error: ApiError) => void): Promise { diff --git a/src/components/app-root/app-root.tsx b/src/components/app-root/app-root.tsx index c9186453..5755897a 100644 --- a/src/components/app-root/app-root.tsx +++ b/src/components/app-root/app-root.tsx @@ -72,7 +72,7 @@ export class AppRoot { - + diff --git a/src/components/page-activity/page-activity.tsx b/src/components/page-activity/page-activity.tsx index ce5413cf..10f10da6 100644 --- a/src/components/page-activity/page-activity.tsx +++ b/src/components/page-activity/page-activity.tsx @@ -1,7 +1,7 @@ import { Component, h, Host, State } from "@stencil/core"; import { OrderDetails, PizzaApi } from "../../api"; -import { scrollPageToTop } from "../../util"; +import { locationURL, scrollPageToTop } from "../../util"; @Component({ tag: "page-activity", @@ -41,11 +41,11 @@ export class PageActivity {

{date}

- {orders.map(({ id, createdAt, orderType, pizzas, location: { fullAddress }, reports }: OrderDetails) => ( + {orders.map(({ id, createdAt, orderType, pizzas, location, reports }: OrderDetails) => (
  • {pizzas} {orderType} ordered at {new Date(createdAt).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })} for{" "} - {fullAddress} + {location.fullAddress}
      {reports.map(({ reportURL, createdAt: reportCreatedAt, waitTime }) => ( diff --git a/src/components/page-deliveries/page-deliveries.tsx b/src/components/page-deliveries/page-deliveries.tsx index 217004ca..f6367df2 100644 --- a/src/components/page-deliveries/page-deliveries.tsx +++ b/src/components/page-deliveries/page-deliveries.tsx @@ -4,7 +4,7 @@ import { MatchResults, RouterHistory } from "@stencil/router"; import {} from "googlemaps"; import { LocationInfo, LocationStatus, OrderDetails, OrderInfo, OrderTypes, PizzaApi, TruckDetails, TruckInfo } from "../../api"; -import { scrollPageToTop } from "../../util"; +import { formatDateTime, formatTime, scrollPageToTop } from "../../util"; import { UiGeoMap } from "../ui-geo-map/ui-geo-map"; enum FoodChoice { @@ -15,10 +15,6 @@ enum FoodChoice { type OrderOrTruckItem = { type: "pizza"; data: OrderDetails | null } | { type: "truck"; data: TruckDetails | null }; -const formatTime = (date: Date) => date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit", timeZoneName: "short" }); - -const formatDate = (date: Date) => date.toLocaleDateString([], { day: "2-digit", month: "2-digit" }); - const ReportLink = () => Make a report; const FoodChoices: FunctionalComponent<{ @@ -46,7 +42,7 @@ const OrderDetailDisplay: FunctionalComponent<{ x.location.fullAddress} />
      - `${x.quantity} ${x.orderType} at ${formatDate(x.createdAt)} ${formatTime(x.createdAt)}`} /> + `${x.quantity} ${x.orderType} at ${formatDateTime(x.createdAt)}`} />
      ); @@ -62,10 +58,7 @@ const OrderInfoDisplay: FunctionalComponent<{ `${x.quantity} ${x.orderType} en route`} />
      - `${formatDate(x.createdAt)} ${formatTime(x.createdAt)}${reportCount > 0 ? ` • ${reportCount} report${reportCount === 1 ? "" : "s"}` : ""}`} - /> + `${formatDateTime(x.createdAt)}${reportCount > 0 ? ` • ${reportCount} report${reportCount === 1 ? "" : "s"}` : ""}`} />
      ); @@ -80,7 +73,7 @@ const TruckInfoDisplay: FunctionalComponent<{ x.location.fullAddress} />
      - `Food truck on location since ${formatDate(x.createdAt)} ${formatTime(x.createdAt)}`} /> + `Food truck on location since ${formatDateTime(x.createdAt)}`} />
      ); @@ -117,14 +110,13 @@ export class PageDeliveries { @Prop() public match!: MatchResults; @State() private selectedAddress?: string; + @State() private selectedLocation?: LocationStatus; + @State() private selectedOrder?: OrderInfo; /** * Watched and used to re-center the map */ - // @ts-ignore @State() private mapCenterPoint: { lat: number; lng: number }; @State() private selectedFood: FoodChoice; - @State() private selectedLocation?: LocationStatus; - @State() private selectedOrder?: OrderInfo; @State() private recentOrders?: OrderDetails[]; @State() private recentTrucks?: TruckInfo[]; @State() private mapZoom: number; @@ -161,32 +153,19 @@ export class PageDeliveries { } } - /* - @Watch( "selectedFood" ) - public selectedFoodChanged( filter: FoodChoice ) { - const val = filter === FoodChoice.all - ? "" - : Object.keys( FoodChoice ).find( k => ( FoodChoice as any )[k] === filter ) + ""; - if( window.location.hash !== val ) { - window.location.hash = val; - } - } - */ - /** * Lookup location info when the selected address value changes */ @Watch("selectedAddress") public selectedAddressChanged(newAddress?: string, oldAddress?: string) { - const ownPathFragment = this.history.location.pathname.split("/").filter(x => x !== "")[0]; - if (newAddress == null && oldAddress != null) { - const path = `/${ownPathFragment}`; + if (newAddress === null && oldAddress != null) { + const path = `/deliveries`; this.selectedLocation = undefined; if (this.history.location.pathname !== path) { this.history.push(path, {}); } } else if (newAddress != null && newAddress !== oldAddress) { - const path = `/${ownPathFragment}/${newAddress}`; + const path = `/deliveries/${newAddress.replace(/\s/g, "+")}`; if (this.history.location.pathname !== path) { this.history.push(path, {}); } @@ -365,14 +344,14 @@ export class PageDeliveries {
      -

      Current Deliveries

      +

      Recent Deliveries

      {selectedLocation != null && selectedFood === FoodChoice.trucks && locationItems.length < 1 ? (

      There are no food trucks currently at this location.

      - ) : selectedLocation != null && ((selectedFood === FoodChoice.pizza && locationItems.length < 1) || selectedLocation.notFound === true) ? ( + ) : selectedLocation != null && (locationItems.length < 1 || selectedLocation.notFound === true) ? (

      There are no reports of lines at this location.
      @@ -433,9 +412,7 @@ export class PageDeliveries {

      {selectedOrder!.pizzas} Pizzas

      - - {formatDate(selectedOrder!.createdAt)}, {formatTime(selectedOrder!.createdAt)} - + {formatDateTime(selectedOrder!.createdAt)}

      From {selectedOrder!.restaurant}

        @@ -470,8 +447,9 @@ export class PageDeliveries { }; } - private setAddressFromUrl(match: MatchResults) { - const location = match.params.location; + private async setAddressFromUrl(match: MatchResults) { + const location = match.params.location.replace(/\+/g, " "); + if (location !== this.selectedAddress) { this.selectedAddress = location; // TODO: Lookup address lat/lng from selectedAddress diff --git a/src/components/page-home/Deliveries.tsx b/src/components/page-home/Deliveries.tsx index 80559a4e..6b497da5 100644 --- a/src/components/page-home/Deliveries.tsx +++ b/src/components/page-home/Deliveries.tsx @@ -1,29 +1,23 @@ import { h } from "@stencil/core"; import { OrderDetails } from "../../api"; +import { locationURL } from "../../util"; +import { formatDateTime } from "../../util"; const capitalize = (word: string): String => `${word.slice(0, 1).toUpperCase()}${word.slice(1, word.length)}`; -const formatDate = (date: Date): String => { - const day = date.getDate(); - const month = date.getMonth() + 1; - const hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours(); - const minutes = date.getMinutes(); - const meridian = date.getHours() > 12 ? "pm" : "am"; - - return `${day}/${month} ${hours}:${minutes} ${meridian}`; -}; - const Delivery = ({ order }: { order: OrderDetails }) => (
        -
        +
        {order.quantity} {capitalize(order.orderType)}
        - {formatDate(order.createdAt)} + {formatDateTime(order.createdAt)}

        - {order.location.address} in -
        - {order.location.city}, {order.location.state} + + {order.location.address} in +
        + {order.location.city}, {order.location.state} +

        ); @@ -36,6 +30,10 @@ const Deliveries = ({ orders }: { orders?: OrderDetails[] }) => ( ))}
      +
      + + See more deliveries +
      ); diff --git a/src/components/page-home/page-home.scss b/src/components/page-home/page-home.scss index 5752847b..a3fd8fc6 100644 --- a/src/components/page-home/page-home.scss +++ b/src/components/page-home/page-home.scss @@ -232,7 +232,7 @@ page-home { .deliveries-wrapper { overflow-y: scroll; - height: 100%; + height: 93%; } @media ($under-tweet) { @@ -250,7 +250,6 @@ page-home { border-bottom: 1px solid $gray2; margin: 10px 0; padding: 4px 0; - h5 { margin: 0; line-height: 0.5rem; @@ -263,6 +262,10 @@ page-home { p { color: $gray4; font-size: 0.75rem; + font-weight: normal; + a { + color: $gray4; + } } } } diff --git a/src/components/page-home/page-home.tsx b/src/components/page-home/page-home.tsx index 54c03504..b0450745 100644 --- a/src/components/page-home/page-home.tsx +++ b/src/components/page-home/page-home.tsx @@ -1,4 +1,4 @@ -import { Build, Component, h, Prop, State } from "@stencil/core"; +import { Component, h, Prop, State } from "@stencil/core"; import { RouterHistory } from "@stencil/router"; import { OrderDetails, PizzaApi, PizzaTotals } from "../../api"; @@ -20,10 +20,8 @@ export class PageHome { public async componentWillLoad() { document.title = `Home | Pizza to the Polls`; - if (Build.isBrowser) { - PizzaApi.getTotals().then(totals => (this.totals = totals)); - PizzaApi.getOrders(0, 20).then(({ results }) => (this.orders = results)); - } + PizzaApi.getTotals().then(totals => (this.totals = totals)); + PizzaApi.getOrders(0, 20).then(({ results }) => (this.orders = results)); } public render() { diff --git a/src/components/ui-main-content/ui-main-content.scss b/src/components/ui-main-content/ui-main-content.scss index 4f83c6e5..7e67d037 100644 --- a/src/components/ui-main-content/ui-main-content.scss +++ b/src/components/ui-main-content/ui-main-content.scss @@ -1,6 +1,6 @@ ui-main-content { .background { - background-image: url("images/redpepper.png"), url("images/pizza-star.svg"), url("images/basil.png"), url("images/pizza-yellow.svg"); + background-image: url("/images/redpepper.png"), url("/images/pizza-star.svg"), url("/images/basil.png"), url("/images/pizza-yellow.svg"); background-repeat: no-repeat; background-position: 2% 27.4rem, -3% 38rem, 98% 15rem, 102% 25rem; background-size: 3rem, 8rem, 4rem, 10rem; @@ -24,7 +24,7 @@ ui-main-content { &:before { position: absolute; content: ""; - background-image: url(images/pizza-pink.svg); + background-image: url("/images/pizza-pink.svg"); width: 10rem; height: 10rem; background-size: contain; diff --git a/src/util/format.ts b/src/util/format.ts new file mode 100644 index 00000000..f4bb92b2 --- /dev/null +++ b/src/util/format.ts @@ -0,0 +1,5 @@ +export const formatTime = (date: Date): string => date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit", timeZoneName: "short" }); + +export const formatDate = (date: Date): string => date.toLocaleDateString([], { day: "2-digit", month: "2-digit" }); + +export const formatDateTime = (date: Date): string => `${formatDate(date)} ${formatTime(date)}`; diff --git a/src/util/index.ts b/src/util/index.ts index 4d650863..d876d559 100644 --- a/src/util/index.ts +++ b/src/util/index.ts @@ -1,3 +1,5 @@ export { default as debounce } from "./debounce"; export { default as scrollPageToTop } from "./scrollPageToTop"; export { default as toQueryString } from "./toQueryString"; +export { orderURL, locationURL } from "./urls"; +export { formatDateTime, formatTime } from "./format"; diff --git a/src/util/urls.ts b/src/util/urls.ts new file mode 100644 index 00000000..8617a565 --- /dev/null +++ b/src/util/urls.ts @@ -0,0 +1,5 @@ +import { LocationInfo, OrderDetails } from "../api"; + +export const orderURL = (order: OrderDetails): string => `${locationURL(order.location)}/${order.id}`; + +export const locationURL = (location: LocationInfo): string => `/deliveries/${location.fullAddress.replace(/\s/g, "+")}`;