ocw/front/src/index.ts

let phone = 0;
const leafletLoaderJS = document.createElement("script");
leafletLoaderJS.setAttribute("src", "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js");
leafletLoaderJS.setAttribute("integrity", "sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==");
leafletLoaderJS.setAttribute("crossorigin", "anonymous");
const leafletLoaderCSS = document.createElement("link");
leafletLoaderCSS.setAttribute("rel", "stylesheet")
leafletLoaderCSS.setAttribute("href", "https://unpkg.com/leaflet@1.7.1/dist/leaflet.css")
leafletLoaderCSS.setAttribute("integrity", "sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==");
leafletLoaderCSS.setAttribute("crossorigin", "anonymous");

const request = (resource: string, data: any) =>
  fetch(`/api/${resource}.shs`, {
    method: "POST",
    body: new URLSearchParams(data).toString(),
    credentials: "include",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
  }).then((res) => res.json());

const openError = (content: string) => {
  const errorBox = <HTMLDivElement>document.querySelector(".error-box")!;
  const txt = <HTMLSpanElement>errorBox.querySelector(".error-box-text")!;
  txt.innerText = content;
  errorBox.style.display = "block";
};

const openLockerConfirm = (lat: string, lon: string, openCode: string, id: string) => {
  (document.querySelector(".areyousure-box") as HTMLElement).style.display = "none";
  request("collect", {
    lat,
    lon,
    openCode,
    id,
  }).then((res) => {
    if (res.status != 200) {
      openError(res.description || res.msg);
    }
  });
};

const openLocker = (lat: string, lon: string, openCode: string, id: string) => {
  (document.querySelector(".areyousure-box") as HTMLElement).style.display = "block";
  (document.querySelector(".areyousure-button") as HTMLElement)!.onclick = () => {
    openLockerConfirm(lat, lon, openCode, id);
  };
};

const refreshPackages = () =>
  request("packages", {}).then((res) => {
    const table = document.querySelector("tbody")!;
    res.forEach((shipment: Package) => {
      const row = table.insertRow();
      const id = row.insertCell(0);
      const sender = row.insertCell(1);
      const status = row.insertCell(2);
      const locker = row.insertCell(3);
      const details = row.insertCell(4);
      const opener = row.insertCell(5);

      row.dataset.pickupPointLat = shipment.pickupPoint.location.latitude.toString();
      row.dataset.pickupPointLon = shipment.pickupPoint.location.longitude.toString();
      row.dataset.pickupPointDescription = shipment.pickupPoint.description;
      row.dataset.pickupPointName = shipment.pickupPoint.name;
      row.dataset.pickupPointStatus = shipment.pickupPoint.status;
      row.dataset.pickupPointStreet = shipment.pickupPoint.address.street;
      row.dataset.pickupPointStreetNumber = shipment.pickupPoint.address.buildingNumber;
      row.dataset.pickupPointCity = shipment.pickupPoint.address.city;
      row.dataset.pickupPointProvince = shipment.pickupPoint.address.province;
      row.dataset.pickupPointPostCode = shipment.pickupPoint.address.postCode;
      row.dataset.openCode = shipment.openCode;
      row.dataset.id = shipment.shipmentNumber;
      row.dataset.sender = shipment.senderName;
      row.dataset.status = shipment.status;
      

      id.innerText = shipment.shipmentNumber;
      sender.innerText = shipment.senderName;
      status.innerText = shipment.status;
      locker.innerText = `${shipment.pickupPoint.name} - ${shipment.pickupPoint.description}`;

      const showDetailsAction = document.createElement("a");
      showDetailsAction.classList.add("button", "is-light", "is-small");
      showDetailsAction.innerHTML = "Info";

	  showDetailsAction.addEventListener("click", (event) => {
	  	const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
	  	console.log(data)
	  	document.querySelector("head").appendChild(leafletLoaderCSS);
	  	document.querySelector("head").appendChild(leafletLoaderJS);
	  	leafletLoaderJS.addEventListener('load', () => {
	  	  const map = L.map('map').setView([Number(data.pickupPointLat), Number(data.pickupPointLon)], 17);
	  	  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	  	  	  attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
	  	  	  maxZoom: 19,
	  	  }).addTo(map);
	  	  L.marker([Number(data.pickupPointLat), Number(data.pickupPointLon)]).addTo(map);
	  	})
	  })
      
      const openAction = document.createElement("a");
      openAction.classList.add("button", "is-light", "is-small");
      openAction.innerHTML = "Open";
      if (shipment.status == "ready_to_pickup") {
        openAction.addEventListener("click", (event) => {
          const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
          openLocker(data.pickupPointLat!, data.pickupPointLon!, data.openCode!, data.id!);
        });
      } else {
      	openAction.setAttribute("disabled", "");
      }
      
      opener.appendChild(openAction);
      details.appendChild(showDetailsAction);
    });
  });
window.addEventListener("load", () => {
  const login = document.querySelector(".login-form")!;
  login.addEventListener("submit", (event) => {
    event.preventDefault();
    const form = event.target as HTMLFormElement;
    request("login", {
      login: form.login.value,
      password: form.password.value,
    }).then((res) => {
      if (res.status == 200) {
        refreshPackages().then(() => {
          [".login-box", ".register-box"].forEach((elementName) => {
            (document.querySelector(elementName)! as HTMLDivElement).style.display = "none";
          });
          (document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
        });
      } else {
        openError(res.msg || "Error during login. Try again in a while?");
      }
    });
  });

  const logout = document.querySelector(".logout-button")!;
  logout.addEventListener("click", (event) => {
    request("logout", {}).then(() => {
      document.location = document.location;
    });
  });

  const register = document.querySelector(".register-form")!;
  register.addEventListener("submit", async (event) => {
    event.preventDefault();
    const form = event.target as HTMLFormElement;
    phone = form.phone.value;
    const res = await request("register", {
      login: form.login.value,
      password: form.password.value,
      phone: form.phone.value,
    });
    if (res.status == 200) {
      [".register-box", ".login-box"].forEach(
        (element) => ((document.querySelector(element)! as HTMLDivElement).style.display = "none"),
      );
      (document.querySelector(".sms-box")! as HTMLDivElement).style.display = "block";
    } else {
      openError(res.description || res.msg);
    }
  });

  const sms = document.querySelector(".sms-form")!;
  sms.addEventListener("submit", async (event) => {
    event.preventDefault();
    const form = event.target as HTMLFormElement;
    const res = await request("smscode", {
      code: form.code.value,
      phone,
    });
    if (res.status == 200) {
      (document.querySelector(".sms-box")! as HTMLDivElement).style.display = "none";
      await refreshPackages();
      (document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
    } else {
      openError(res.description || res.msg);
    }
  });

  const errorBoxWindow = <HTMLDivElement>document.querySelector(".error-box")!;
  const errorBoxButton = <HTMLAnchorElement>document.querySelector(".error-box-button")!;
  errorBoxButton.addEventListener("click", () => {
    errorBoxWindow.style.display = "none";
  });

  const areYouNotSureButton = <HTMLAnchorElement>document.querySelector(".areyousure-button-deny")!;
  areYouNotSureButton.addEventListener("click", () => {
    (document.querySelector(".areyousure-box") as HTMLElement).style.display = "none";
  });

  request("session", {}).then((res) => {
    if (res.status == 200) {
      // logged in
      refreshPackages().then(() => {
        (document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
      });
    } else {
      // not logged in
      [".login-box", ".register-box"].forEach((elementName) => {
        (document.querySelector(elementName)! as HTMLDivElement).style.display = "block";
      });
    }
  });
});

interface Package {
  openCode: string;
  pickupPoint: Locker;
  senderName: string;
  shipmentNumber: string;
  status: PackageStatus;
}

interface Locker {
  name: string;
  status: string;
  description: string;
  location: Location;
  address: Address;
}

interface Address {
  buildingNumber: string;
  city: string;
  postCode: string;
  province: string;
  street: string;
}

interface Location {
  latitude: number;
  longitude: number;
}

enum PackageStatus {
  /** Przesyłka została utworzona, ale nie jest gotowa do nadania. */
  CREATED = "created",
  /** Oferty dla przesyłki zostały przygotowane. */
  OFFERS_PREPARED = "offers_prepared",
  /** Klient wybrał jedną z zaproponowanych ofert. */
  OFFER_SELECTED = "offer_selected",
  /** Nadawca poinformował nas, że przygotował przesyłkę do nadania. Podróż przesyłki jeszcze się nie rozpoczęła. */
  CONFIRMED = "confirmed",
  /** Paczka oczekuje na wyjęcie z Paczkomatu przez doręczyciela. Stąd trafi do najbliższego oddziału InPost i wyruszy w trasę do Paczkomatu odbiorczego. */
  DISPATCHED_BY_SENDER = "dispatched_by_sender",
  /** Kurier odebrał paczkę od Nadawcy i przekazuje ją do oddziału InPost. */
  COLLECTED_FROM_SENDER = "collected_from_sender",
  /** Przesyłka została odebrana od Nadawcy i wyruszyła w dalszą drogę. */
  TAKEN_BY_COURIER = "taken_by_courier",
  /** Przesyłka trafiła do oddziału InPost, skąd wkrótce wyruszy w dalszą drogę. */
  ADOPTED_AT_SOURCE_BRANCH = "adopted_at_source_branch",
  /** Przesyłka jest transportowana między oddziałami InPost. */
  SENT_FROM_SOURCE_BRANCH = "sent_from_source_branch",
  /** Prosimy o odebranie przesyłki z punktu InPost w ciągu 3 dni. */
  READY_TO_PICKUP_FROM_POK = "ready_to_pickup_from_pok",
  /** Prosimy o odebranie przesyłki z punktu InPost w ciągu 3 dni. Adres. */
  READY_TO_PICKUP_FROM_POK_REGISTERED = "ready_to_pickup_from_pok_registered",
  /** Paczka nie mieści się w skrytce Paczkomatu. */
  OVERSIZED = "oversized",
  /** Przesyłka czeka na przesiadkę do miasta docelowego. W Sortowni Głównej zatrzymuje się na chwilę większość przesyłek InPost. W supernowoczesnym magazynie sortowanych jest nawet milion przesyłek dziennie! */
  ADOPTED_AT_SORTING_CENTER = "adopted_at_sorting_center",
  /** Przesyłka jedzie do miasta Odbiorcy. */
  SENT_FROM_SORTING_CENTER = "sent_from_sorting_center",
  /** Przesyłka jest już w mieście Odbiorcy. Wkrótce trafi do rąk doręczyciela i rozpocznie ostatni etap podróży. */
  ADOPTED_AT_TARGET_BRANCH = "adopted_at_target_branch",
  /** Przesyłka trafi do odbiorcy najpóźniej w najbliższym dniu roboczym. Doręczyciel InPost rozwozi przesyłki nawet do późnych godzin wieczornych, dlatego warto mieć włączony telefon. */
  OUT_FOR_DELIVERY = "out_for_delivery",
  /** I gotowe! Paczka poczeka na odbiór 48 godzin od momentu umieszczenia w Paczkomacie. Odbiorca otrzymuje SMS-a i e-maila z kodem odbioru. Jeśli paczka nie zostanie odebrana w tym czasie, zostanie zwrócona do Nadawcy, o czym poinformujemy Odbiorcę w osobnych komunikatach. */
  READY_TO_PICKUP = "ready_to_pickup",
  /** Paczka oczekuje w Paczkomacie. Przetrzymamy ją tylko przez kolejne 24 godziny. Jeśli nie zostanie odebrana z Paczkomatu, zostanie zwrócona do Nadawcy. Jeśli chcesz odpłatnie przedłużyć pobyt przesyłki w Paczkomacie, przeczytaj o SMS’ach Premium na naszej stronie https://inpost.pl/pomoc-jak-przedluzyc-termin-odbioru-paczki-w-paczkomacie. */
  PICKUP_REMINDER_SENT = "pickup_reminder_sent",
  /** Podróż przesyłki od Nadawcy do Odbiorcy zakończyła się, ale nie musi to oznaczać końca naszej znajomości:) Jeśli lubisz InPost, odwiedź nasz fanpage na Facebooku. Dziękujemy! */
  DELIVERED = "delivered",
  /** Czas na odbiór Paczki z Paczkomatu już minął. Paczka zostanie zwrócona do Nadawcy. Odbiorca  jeszcze ma szansę odebrać paczkę, jeśli dotrze do Paczkomatu przed Doręczycielem InPost. */
  PICKUP_TIME_EXPIRED = "pickup_time_expired",
  /** Kurier InPost ponownie nie zastał Odbiorcy pod wskazanym adresem. Przesyłka wyruszyła w drogę powrotną do Nadawcy. */
  AVIZO = "avizo",
  /** Prosimy o dokończenie procesu reklamacji poprzez wypełnienie formularza na stronie InPost. */
  CLAIMED = "claimed",
  /** Przesyłka wyruszyła w drogę powrotną do Nadawcy. */
  RETURNED_TO_SENDER = "returned_to_sender",
  /** Etykieta nadawcza została anulowana lub utraciła ważność. Przesyłka nie została wysłana do Odbiorcy. */
  CANCELED = "canceled",
  /** Przesyłka znajduje się w nierozpoznanym statusie. */
  OTHER = "other",
  /** Nadawca przekazał przesyłkę pracownikowi punktu InPost. Tu rozpoczyna się jej podróż do Odbiorcy. */
  DISPATCHED_BY_SENDER_TO_POK = "dispatched_by_sender_to_pok",
  /** Przesyłka jest już na ostatnim etapie podróży - została przekazana kurierowi w celu dostarczenia pod wskazany adres. */
  OUT_FOR_DELIVERY_TO_ADDRESS = "out_for_delivery_to_address",
  /** Kurier InPost nie zastał Odbiorcy pod wskazanym adresem. Kolejna próba doręczenia nastąpi w następnym dniu roboczym. */
  PICKUP_REMINDER_SENT_ADDRESS = "pickup_reminder_sent_address",
  /** Odbiorca odmówił przyjęcia przesyłki. */
  REJECTED_BY_RECEIVER = "rejected_by_receiver",
  /** Brak możliwości doręczenia w dniu dzisiejszym. Powód: błędne dane adresowe. */
  UNDELIVERED_WRONG_ADDRESS = "undelivered_wrong_address",
  /** Brak możliwości doręczenia w dniu dzisiejszym. Powód: niepełne dane adresowe. */
  UNDELIVERED_INCOMPLETE_ADDRESS = "undelivered_incomplete_address",
  /** Brak możliwości doręczenia w dniu dzisiejszym. Powód: Odbiorca nieznany. */
  UNDELIVERED_UNKNOWN_RECEIVER = "undelivered_unknown_receiver",
  /** Brak możliwości doręczenia w dniu dzisiejszym - Odbiorca nie miał gotówki do opłacenia kwoty pobrania. */
  UNDELIVERED_COD_CASH_RECEIVER = "undelivered_cod_cash_receiver",
  /** Doręczyciel InPost odebrał przesyłkę nadaną w Punkcie Obsługi Klienta i przekazuje ją do oddziału InPost, skąd zostanie wysłana w dalszą drogę. */
  TAKEN_BY_COURIER_FROM_POK = "taken_by_courier_from_pok",
  /** Przekazanie do magazynu przesyłek niedoręczalnych. */
  UNDELIVERED = "undelivered",
  /** Przesyłka została odebrana. Zwrotne Potwierdzenie Odbioru zostało wysłane do Nadawcy. */
  RETURN_PICKUP_CONFIRMATION_TO_SENDER = "return_pickup_confirmation_to_sender",
  /** Jeśli Twoja paczka trafiła do oddziału InPost, skontaktuj się z Infolinią, aby sprawdzić możliwości jej odbioru. */
  READY_TO_PICKUP_FROM_BRANCH = "ready_to_pickup_from_branch",
  /** Dostawa się opóźni - najmocniej przepraszamy. W kolejnych wiadomościach poinformujemy Odbiorcę o nowym terminie doręczenia. */
  DELAY_IN_DELIVERY = "delay_in_delivery",
  /** Adresat tej paczki kurierskiej skorzystał z darmowej opcji dynamicznego przekierowania do Paczkomatu InPost. Po dostarczeniu paczki do wybranej maszyny, odbiorca otrzyma komunikat e-mail/SMS zawierający dane potrzebne do jej odbioru. */
  REDIRECT_TO_BOX = "redirect_to_box",
  /** Przekierowanie tej paczki kurierskiej do Paczkomatu InPost okazało się niemożliwe ze względu na zbyt duży gabaryt. Przesyłka zostanie doręczona do Odbiorcy na adres wskazany w zamówieniu. */
  CANCELED_REDIRECT_TO_BOX = "canceled_redirect_to_box",
  /** Przesyłka kurierska została bezpłatnie przekierowana na inny adres na życzenie Odbiorcy. */
  READDRESSED = "readdressed",
  /** Brak możliwości doręczenia w dniu dzisiejszym. Powód: brak skrzynki pocztowej. */
  UNDELIVERED_NO_MAILBOX = "undelivered_no_mailbox",
  /** Brak możliwości doręczenia w dniu dzisiejszym. Powód: Odbiorca nie mieszka pod wskazanym adresem. */
  UNDELIVERED_NOT_LIVE_ADDRESS = "undelivered_not_live_address",
  /** Paczka wyruszyła w drogę powrotną do Nadawcy. */
  UNDELIVERED_LACK_OF_ACCESS_LETTERBOX = "undelivered_lack_of_access_letterbox",
  /** translation missing: pl_PL.statuses.missing.description */
  MISSING = "missing",
  /** Kliknij i dowiedz się więcej na temat magazynowania paczek w POP. https://inpost.pl/pomoc-czym-jest-magazynowanie-paczek-w-pop */
  STACK_IN_CUSTOMER_SERVICE_POINT = "stack_in_customer_service_point",
  /** Upłynął termin odebrania paczki z POP, ale paczka nadal jest w nim magazynowana - czeka na przyjazd kuriera, który ją zabierze do paczkomatu. */
  STACK_PARCEL_PICKUP_TIME_EXPIRED = "stack_parcel_pickup_time_expired",
  /** Kurier wiezie Twoją paczkę do paczkomatu. */
  UNSTACK_FROM_CUSTOMER_SERVICE_POINT = "unstack_from_customer_service_point",
  /** Paczka została awizowana w Punkcie Obsługi Paczek. Jeśli jej nie odbierzesz w ciągu trzech dni roboczych, wróci do Nadawcy. */
  COURIER_AVIZO_IN_CUSTOMER_SERVICE_POINT = "courier_avizo_in_customer_service_point",
  /** Czas na odbiór paczki minął. Została odebrana przez Kuriera z Punktu Obsługi Paczek i niebawem wyruszy w podróż powrotną do Nadawcy. */
  TAKEN_BY_COURIER_FROM_CUSTOMER_SERVICE_POINT = "taken_by_courier_from_customer_service_point",
  /** Kliknij i dowiedz się więcej na temat magazynowania paczek w Paczkomatach tymczasowych: https://inpost.pl/pomoc-czym-jest-magazynowanie-paczek-w-paczkomatach-tymczasowych */
  STACK_IN_BOX_MACHINE = "stack_in_box_machine",
  /** Czas na odbiór paczki magazynowanej w Paczkomacie tymczasowym upłynął. Paczka jest w drodze do pierwotnie wybranego Paczkomatu. Poinformujemy Cię, gdy będzie na miejscu. */
  UNSTACK_FROM_BOX_MACHINE = "unstack_from_box_machine",
  /** Upłynął termin odebrania paczki z Paczkomatu tymczasowego, ale paczka nadal jest w nim magazynowana - czeka na przyjazd kuriera, który ją zabierze do pierwotnie wybranego Paczkomatu. */
  STACK_PARCEL_IN_BOX_MACHINE_PICKUP_TIME_EXPIRED = "stack_parcel_in_box_machine_pickup_time_expired",
}