@per-diem-calculator/vanilla 1.0.0

package/src/ts/components/LocationSelect/template.html

@@ -0,0 +1,45 @@
+<div
+    class="group flex items-center justify-between border-b border-b-neutral-100
+        px-3"
+>
+    <pdc-label styled="true"></pdc-label>
+    <select hidden></select>
+    <button
+        tabindex="0"
+        type="button"
+        id=""
+        class="group-[.active]:focus-visible:border-primary-800 absolute
+            right-[24px] rounded-full border-3 border-transparent p-1
+            transition-colors focus:outline-none
+            group-[.active]:focus-visible:[&_svg]:-rotate-180"
+    >
+        <svg
+            class="group-[.active]:group-hover:stroke-primary-800
+                group-[.active]:group-focus-visible:stroke-primary-800 size-4
+                shrink-0 rotate-0 fill-none stroke-neutral-400
+                transition-[transform_stroke] duration-500
+                group-[.active]:group-hover:-rotate-180 sm:size-5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+        >
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M19 9l-7 7-7-7"
+            />
+        </svg>
+    </button>
+    <!-- Loading indicator-->
+    <div
+        id="loading-spinner"
+        class="absolute z-0 flex w-full items-center justify-center bg-inherit
+            opacity-0 transition-opacity duration-700 [.active]:z-50
+            [.active]:opacity-100"
+    >
+        <div
+            class="border-t-primary-600 border-primary-50 h-10 w-10 animate-spin
+                rounded-full border-4 border-t-4"
+        ></div>
+    </div>
+</div>

package/src/ts/components/index.ts

@@ -0,0 +1,6 @@
+export { PdcExpenseRow } from './ExpenseRow/ExpenseRow';
+export { PdcLocationCategory } from './LocationCategory/LocationCategory';
+export { PdcLocationSelect } from './LocationSelect/LocationSelect';
+export { PdcLocationDate } from './LocationDate/LocationDate';
+export { PdcButton } from './Button/Button';
+export { PdcLabel } from './Label/Label';

package/src/ts/controller.ts

@@ -0,0 +1,193 @@
+// Types
+import type {
+    LocationKeys,
+    StateLocationItem,
+    AllViewLocationsValid,
+} from './types/locations';
+import { StateExpenseItemUpdate } from './types/expenses';
+import type { Config } from './types/config';
+
+// Utils
+import { sanitizeConfig } from './utils/config';
+
+// Model
+import * as model from './model';
+
+// Views
+import { PdcLocationView } from './views';
+import { PdcExpenseView } from './views';
+customElements.define('pdc-expense-view', PdcExpenseView);
+customElements.define('pdc-location-view', PdcLocationView);
+
+export class Pdc {
+    /* SETUP
+     */
+    #container: Element;
+    #config: Config;
+    #viewLocation;
+    #viewExpense;
+    #styled;
+    #eventTarget;
+
+    constructor(container: Element, configUser: Partial<Config> | null = null) {
+        this.#container = container;
+        this.#config = sanitizeConfig(configUser);
+        this.#styled = this.#config.styled;
+
+        this.#viewLocation = new PdcLocationView(
+            this.#styled,
+            this.#config.location,
+        );
+        this.#viewExpense = new PdcExpenseView();
+
+        this.#viewLocation.controllerHandler(
+            this.#locationUpdated,
+            this.#locationDeleted,
+            this.#locationsValidate,
+        );
+        this.#eventTarget = new EventTarget();
+
+        this.#container.insertAdjacentElement('afterbegin', this.#viewLocation);
+        this.#container.insertAdjacentElement('beforeend', this.#viewExpense);
+    }
+
+    #dispatchEvent() {
+        const event = new CustomEvent('expenseUpdate', {
+            detail: {
+                data: model.returnExpenses(),
+            },
+        });
+        this.#eventTarget.dispatchEvent(event);
+    }
+
+    addEventListener(eventName: 'expenseUpdate', callback: EventListener) {
+        this.#eventTarget.addEventListener(eventName, callback);
+    }
+
+    removeEventListener(eventName: 'expenseUpdate', callback: EventListener) {
+        this.#eventTarget.removeEventListener(eventName, callback);
+    }
+
+    /* LOCATION
+     */
+    #locationDeleted = async (
+        updatedRows: StateLocationItem[],
+    ): Promise<void> => {
+        this.#viewExpense.renderEmtpy();
+        model.updateAllStateLocations(updatedRows);
+        const row = updatedRows[updatedRows.length - 1];
+        const { index, start, end, category, country, city } = row;
+        if (!city && country) {
+            this.#viewLocation.restrictRow(index, 'country');
+            await this.#createSelectOptions(row);
+        }
+        if (!country && category) {
+            this.#viewLocation.restrictRow(index, 'category');
+            await this.#createSelectOptions(row);
+        }
+        if (!end && start) this.#viewLocation.restrictRow(index, 'end');
+        if (start && !end) this.#viewLocation.restrictRow(index, 'start');
+    };
+
+    #locationUpdated = async (
+        row: StateLocationItem,
+        changedAttr: LocationKeys,
+        newValue: string | null,
+    ): Promise<void> => {
+        const { index, start, end, category, country, city } = row;
+        this.#viewExpense.renderEmtpy();
+        model.updateStateLocation(row);
+        let startDate, endDate;
+        switch (true) {
+            case !newValue && !!country && !!category && !!end && !!start:
+                this.#viewLocation.restrictRow(index, 'country');
+                await this.#createSelectOptions(row);
+                return;
+            case !newValue && !!category && !!end && !!start:
+                this.#viewLocation.restrictRow(index, 'category');
+                await this.#createSelectOptions(row);
+                return;
+            case !newValue && !!end && !!start:
+                this.#viewLocation.restrictRow(index, 'end');
+                return;
+            case !newValue:
+                this.#viewLocation.restrictRow(index, 'start');
+                return;
+            case (changedAttr === 'start' || changedAttr === 'end') && // To account for when rows are deleted and the only updates are to the start/end dates of prev/next rows
+                !!start &&
+                !!end &&
+                !!category &&
+                !!country &&
+                !!city:
+                startDate = new Date(start);
+                endDate = new Date(end);
+                if (startDate <= endDate) {
+                    return;
+                } else {
+                    this.#viewLocation.restrictRow(index, changedAttr);
+                }
+                return;
+            default:
+                this.#viewLocation.restrictRow(index, changedAttr);
+                if (changedAttr === 'category' || changedAttr === 'country') {
+                    await this.#createSelectOptions(row);
+                }
+                return;
+        }
+    };
+
+    #createSelectOptions = async (row: StateLocationItem) => {
+        const { index } = row;
+        const locationCategory = row.country ? 'city' : 'country';
+        this.#viewLocation.showLoadingSpinner(index, true, locationCategory);
+        const list = await model.returnOptions(row);
+        this.#viewLocation.createOptions(index, list, locationCategory);
+        this.#viewLocation.showLoadingSpinner(index, false, locationCategory);
+    };
+
+    #locationsValidate = (viewValidator: AllViewLocationsValid): void => {
+        this.#viewExpense.renderEmtpy();
+        if (!viewValidator.valid) return;
+        if (!model.validateStateLocations()) return;
+        this.#createExpenses(viewValidator);
+    };
+
+    /* EXPENSE
+     */
+    async #createExpenses(viewValidator: AllViewLocationsValid) {
+        try {
+            this.#viewExpense.render(this.#styled, this.#config.expense);
+            this.#viewExpense.renderLoadingSpinner(true);
+            this.#viewExpense.controllerHandler(
+                this.#expenseUpdated,
+                this.#expenseTable,
+            );
+            const expenses = await model.generateExpenses(viewValidator);
+            await this.#viewExpense.addRows(
+                expenses,
+                viewValidator.expensesCategory,
+            );
+            this.#viewExpense.renderLoadingSpinner(false);
+            this.#dispatchEvent();
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    #expenseUpdated = (row: StateExpenseItemUpdate): void => {
+        const { date, newRowMieTotal, totalMie, totalLodging } =
+            model.updateStateExpenseItem(row);
+        this.#viewExpense.updateRowMie(
+            date,
+            newRowMieTotal,
+            totalMie,
+            totalLodging,
+        );
+        this.#viewExpense.emptyExpenseTable();
+        this.#dispatchEvent();
+    };
+
+    #expenseTable = (): void => {
+        this.#viewExpense.createExpenseTable(model.returnExpenses());
+    };
+}

package/src/ts/model.ts

@@ -0,0 +1,163 @@
+// Types
+import type {
+    AllViewLocationsValid,
+    Location,
+    StateLocationItem,
+} from './types/locations';
+import type {
+    StateExpenseItemUpdate,
+    StateExpenseItemValid,
+} from './types/expenses';
+import type { State } from './types/config';
+
+// Utils
+import {
+    getCountriesDomestic,
+    getCountriesIntl,
+    getCitiesDomestic,
+    getCitiesIntl,
+    returnValidStateLocation,
+} from './utils/locations';
+import { createExpenseObjs, getMieRates } from './utils/expenses';
+import {
+    getLodgingRateDomestic,
+    getLodgingRateIntl,
+    returnValidStateExpense,
+} from './utils/expenses';
+import { US_STATE_LENGTH } from './utils/config';
+
+const state: State = {
+    locations: [],
+    locationsValid: [],
+    expenses: [],
+    expensesValid: [],
+};
+
+export const updateAllStateLocations = (
+    updatedRows: StateLocationItem[],
+): void => {
+    state.locations = updatedRows;
+    // logStateLocation();
+};
+
+export const updateStateLocation = (
+    updatedLocation: StateLocationItem,
+): void => {
+    state.locations[updatedLocation.index] = updatedLocation;
+    // logStateLocation();
+};
+
+// Function to log every time state is updated during development
+// const logStateLocation = () => {
+//     console.table(state.locations, [
+//         'start',
+//         'end',
+//         'category',
+//         'country',
+//         'city',
+//     ]);
+// }
+
+export const returnOptions = async (
+    row: StateLocationItem,
+): Promise<Location[]> => {
+    const { index, end, category, country } = row;
+    const listType = country ? 'city' : 'country';
+    if (!end) throw new Error(`Location ${index} - no end date`);
+    const list =
+        country ?
+            country.length === US_STATE_LENGTH ?
+                // Domestic countries are all state abbreviations with length of 2 (e.g. 'NY')
+                await getCitiesDomestic(end, country)
+            :   await getCitiesIntl(end, country)
+        : category === 'domestic' ? await getCountriesDomestic(end)
+        : await getCountriesIntl(end);
+    if (list.length === 0)
+        throw new Error(`Failed to get ${listType} list for ${end}`);
+    return list;
+};
+
+export const validateStateLocations = (): boolean => {
+    state.locationsValid.length = 0;
+    state.locations.forEach(location => {
+        const validLocation = returnValidStateLocation(location);
+        if (validLocation) state.locationsValid.push(validLocation);
+    });
+    return state.locations.length === state.locationsValid.length;
+};
+
+export const generateExpenses = async (
+    viewValidator: AllViewLocationsValid,
+) => {
+    const { expensesCategory } = viewValidator;
+    state.expenses.length = 0;
+    state.locationsValid.map(location =>
+        state.expenses.push(...createExpenseObjs(location)),
+    );
+    const expensesWithSomeRates = await Promise.all(
+        state.expenses.map(expense => {
+            return expense.country.length === US_STATE_LENGTH ?
+                    getLodgingRateDomestic(expense)
+                :   getLodgingRateIntl(expense);
+        }),
+    );
+    const expensesWithAllRates = await Promise.all(
+        expensesWithSomeRates.map(expense => {
+            return getMieRates(expensesCategory, expense);
+        }),
+    );
+    state.expensesValid = expensesWithAllRates.map(expense => {
+        return returnValidStateExpense(expense);
+    });
+    return state.expensesValid;
+};
+
+export const updateStateExpenseItem = (update: StateExpenseItemUpdate) => {
+    const { date, lodgingAmount, ...deductions } = update;
+    const item = state.expensesValid.find(expense => expense.date === date);
+    if (!item) throw new Error(`Failed to find expense matching the update.`);
+    item.lodgingAmount = lodgingAmount;
+    item.deductions = {
+        ...item.deductions,
+        ...deductions,
+    };
+    if (item.mieAmount > 0) updateExpenseMie(item, update);
+    item.totalAmount = item.lodgingAmount + item.mieAmount;
+    const { totalMie, totalLodging } = getExpenseSubtotals();
+    return {
+        date: item.date,
+        newRowMieTotal: item.mieAmount,
+        totalMie,
+        totalLodging,
+    };
+};
+
+const updateExpenseMie = (
+    item: StateExpenseItemValid,
+    update: StateExpenseItemUpdate,
+) => {
+    let total =
+        item.deductions.FirstLastDay ?
+            item.rates.maxMieFirstLast
+        :   item.rates.maxMie;
+    if (update.breakfastProvided) total -= item.rates.deductionBreakfast;
+    if (update.lunchProvided) total -= item.rates.deductionLunch;
+    if (update.dinnerProvided) total -= item.rates.deductionDinner;
+    if (total < item.rates.maxIncidental) total = item.rates.maxIncidental;
+    item.mieAmount = total;
+};
+
+const getExpenseSubtotals = () => {
+    return state.expensesValid.reduce(
+        (result, item) => {
+            result.totalMie += item.mieAmount;
+            result.totalLodging += item.lodgingAmount;
+            return result;
+        },
+        { totalMie: 0, totalLodging: 0 },
+    );
+};
+
+export const returnExpenses = () => {
+    return state.expensesValid;
+};

package/src/ts/types/config.ts

@@ -0,0 +1,22 @@
+import type { StateLocationItem, StateLocationItemValid } from './locations';
+import type { StateExpenseItem, StateExpenseItemValid } from './expenses';
+
+export interface Config {
+    styled: boolean;
+    location: ConfigSectionText;
+    expense: ConfigSectionText;
+}
+
+export interface ConfigSectionText {
+    heading?: string;
+    headingPrint?: string;
+    body?: string;
+    bodyPrint?: string;
+}
+
+export interface State {
+    locations: StateLocationItem[];
+    locationsValid: StateLocationItemValid[];
+    expenses: StateExpenseItem[];
+    expensesValid: StateExpenseItemValid[];
+}

package/src/ts/types/dates.ts

@@ -0,0 +1,82 @@
+export type YYYY =
+    | '2021'
+    | '2022'
+    | '2023'
+    | '2024'
+    | '2025'
+    | '2026'
+    | '2027'
+    | '2028'
+    | '2029'
+    | '2030'
+    | '2031'
+    | '2032'
+    | '2033'
+    | '2034'
+    | '2035'
+    | '2036'
+    | '2037'
+    | '2038'
+    | '2039'
+    | '2040';
+
+type MM =
+    | '01'
+    | '02'
+    | '03'
+    | '04'
+    | '05'
+    | '06'
+    | '07'
+    | '08'
+    | '09'
+    | '10'
+    | '11'
+    | '12';
+type DD =
+    | '01'
+    | '02'
+    | '03'
+    | '04'
+    | '05'
+    | '06'
+    | '07'
+    | '08'
+    | '09'
+    | '10'
+    | '11'
+    | '12'
+    | '13'
+    | '14'
+    | '15'
+    | '16'
+    | '17'
+    | '18'
+    | '19'
+    | '20'
+    | '21'
+    | '22'
+    | '23'
+    | '24'
+    | '25'
+    | '26'
+    | '27'
+    | '28'
+    | '29'
+    | '30'
+    | '31';
+
+export type DateRaw = `${YYYY}-${MM}-${DD}`;
+export type ShortMonth =
+    | 'Jan'
+    | 'Feb'
+    | 'Mar'
+    | 'Apr'
+    | 'May'
+    | 'Jun'
+    | 'Jul'
+    | 'Aug'
+    | 'Sep'
+    | 'Oct'
+    | 'Nov'
+    | 'Dec';

package/src/ts/types/expenses.ts

@@ -0,0 +1,73 @@
+import type { DateRaw } from './dates';
+
+// Format of lodging rate data coming from GSA
+export interface RateLodging {
+    Jan: string;
+    Feb: string;
+    Mar: string;
+    Apr: string;
+    May: string;
+    Jun: string;
+    Jul: string;
+    Aug: string;
+    Sep: string;
+    Oct: string;
+    Nov: string;
+    Meals: number;
+    City: string;
+    State: string;
+    County: string | null;
+    DID: number;
+    Dec: string;
+}
+
+// Format of meals rate data coming from GSA
+export interface RateMeals {
+    total: number;
+    breakfast: number;
+    lunch: number;
+    dinner: number;
+    incidental: number;
+    FirstLastDay: number;
+    max?: number;
+}
+
+interface ExpenseDeductions {
+    FirstLastDay: boolean;
+    breakfastProvided: boolean;
+    lunchProvided: boolean;
+    dinnerProvided: boolean;
+}
+
+export interface ExpenseRates {
+    maxLodging: number;
+    maxMie: number;
+    maxMieFirstLast?: number;
+    deductionBreakfast?: number;
+    deductionLunch?: number;
+    deductionDinner?: number;
+    maxIncidental?: number;
+    effDate: DateRaw;
+}
+
+export interface StateExpenseItem {
+    date: DateRaw;
+    country: string;
+    city: string;
+    deductions: ExpenseDeductions;
+    rates?: ExpenseRates;
+}
+
+export type StateExpenseItemInclRates = StateExpenseItem & {
+    rates: Required<ExpenseRates>;
+    lodgingAmount: number;
+    mieAmount: number;
+    totalAmount: number;
+};
+
+export type StateExpenseItemValid = Required<StateExpenseItemInclRates> & {
+    source: string;
+};
+
+export type StateExpenseItemUpdate = Omit<ExpenseDeductions, 'FirstLastDay'> &
+    Pick<StateExpenseItemValid, 'date' | 'lodgingAmount'>;

package/src/ts/types/locations.ts

@@ -0,0 +1,25 @@
+import { DateRaw } from './dates';
+
+export interface Location {
+    city?: string;
+    country?: string;
+    label?: string;
+    category?: 'domestic' | 'intl';
+}
+
+export interface AllViewLocationsValid {
+    valid: boolean;
+    expensesCategory: 'mie' | 'lodging' | 'both';
+}
+
+export type StateLocationItem = Omit<Location, 'label'> & {
+    index: number;
+    start?: DateRaw;
+    end?: DateRaw;
+};
+
+export type LocationKeys = keyof Omit<StateLocationItem, 'index'>;
+
+export type StateLocationItemValid = Required<
+    Omit<StateLocationItem, 'index' | 'category'>
+>;

package/src/ts/utils/config/configDefault.ts

@@ -0,0 +1,13 @@
+// Types
+import type { Config } from '../../types/config';
+
+export const configDefault: Config = {
+    styled: true,
+    location: {
+        heading: 'Trip Details',
+    },
+    expense: {
+        heading: 'Expenses',
+        body: 'Confirm lodging amount and meals provided for each day',
+    },
+};

package/src/ts/utils/config/index.ts

@@ -0,0 +1,12 @@
+export { configDefault } from './configDefault';
+export {
+    ROW_CLOSED_HEIGHT,
+    DEBOUNCE_TIME,
+    BTN_ANIMATE_MS,
+    ROW_ANIMATE_MS,
+    US_STATE_LENGTH,
+    MILLISECONDS_IN_DAY,
+    APPROX_DAYS_IN_6_MONTHS,
+    OCTOBER,
+} from './numbers';
+export { sanitizeConfig } from './sanitizeConfig';

package/src/ts/utils/config/numbers.ts

@@ -0,0 +1,24 @@
+export const ROW_CLOSED_HEIGHT = 96;
+export const DEBOUNCE_TIME = 150;
+export const BTN_ANIMATE_MS = 450;
+export const ROW_ANIMATE_MS = 800;
+export const US_STATE_LENGTH = 'NY'.length;
+export const OCTOBER = 10;
+
+const MILLISECONDS_IN_SECOND = 1000;
+const SECONDS_IN_MINUTE = 60;
+const MINUTES_IN_HOUR = 60;
+const HOURS_IN_DAY = 24;
+export const MILLISECONDS_IN_DAY =
+    MILLISECONDS_IN_SECOND * SECONDS_IN_MINUTE * MINUTES_IN_HOUR * HOURS_IN_DAY;
+
+const AVERAGE_DAYS_IN_YEAR = 365.25;
+const MONTHS_IN_YEAR = 12;
+const MONTHS_IN_DURATION = 6;
+
+// Calculate the average days in a month
+const AVERAGE_DAYS_IN_MONTH = AVERAGE_DAYS_IN_YEAR / MONTHS_IN_YEAR;
+
+// The constant for approximate days in 6 months
+export const APPROX_DAYS_IN_6_MONTHS =
+    AVERAGE_DAYS_IN_MONTH * MONTHS_IN_DURATION;