altChip

Untitled

Nov 29th, 2020
473
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script>
  2.   import differenceInHours from "date-fns/differenceInHours";
  3.   import { utcToZonedTime, format } from "date-fns-tz";
  4.   import Fa from "svelte-fa";
  5.   import { faTrash, faArrowsAlt } from "@fortawesome/free-solid-svg-icons";
  6.  
  7.   export let date;
  8.   export let editButtonsVisible;
  9.   let displayedTimeDiff;
  10.  
  11.   let timeZones = [
  12.     { id: 1, timeZone: "America/Argentina/Buenos_Aires" },
  13.     { id: 2, timeZone: "Europe/Oslo" },
  14.     { id: 3, timeZone: "Australia/Sydney" },
  15.   ];
  16.   let totalTimeZones = timeZones.length;
  17.  
  18.   //const timeZone = "America/Argentina/Buenos_Aires";
  19.   const pattern = "HH:mm:ss";
  20.   // Get the last name of the full TZ name
  21.   // and replace the underscore with a space
  22.   $: formattedTimeZone = timeZone
  23.     .split("/")
  24.     .slice(-1)
  25.     .pop()
  26.     .replace(/_/g, " ");
  27.  
  28.   $: zonedDate = utcToZonedTime(date, timeZone);
  29.   $: output = format(zonedDate, pattern, { timeZone: timeZone });
  30.  
  31.   $: timeDiff = differenceInHours(date, zonedDate);
  32.  
  33.   $: if (timeDiff > 0) {
  34.     displayedTimeDiff = `${timeDiff} Hour(s) Behind`;
  35.   } else if (timeDiff < 0) {
  36.    // Math.abs() inverts the number to be positive
  37.    // https://stackoverflow.com/a/4652112
  38.    displayedTimeDiff = `${Math.abs(timeDiff)} Hour(s) Ahead`;
  39.  } else {
  40.    displayedTimeDiff = "No Time Difference";
  41.  }
  42. </script>
  43.  
  44. <ul role="list" class="datetime-list stack-large">
  45.   <!-- datetime-1 -->
  46.   <li class="datetime">
  47.     <div class="cards">
  48.       <div class="card">
  49.         {#each timeZones as timeZone, index (timeZones.id)}
  50.           <span class="time-elsewhere label-wrapper">
  51.             <label for="datetime-1" class="datetime-label">
  52.               <span>
  53.                 <span
  54.                  class="location">{formattedTimeZone}</span>
  55.                 <br />
  56.                 <span class="hours-behind">{displayedTimeDiff}</span>
  57.               </span>
  58.               <span class="world-time">{output}</span>
  59.             </label>
  60.           </span>
  61.           {#if editButtonsVisible}
  62.             <span class="btn-group">
  63.               <!-- TODO?(alt): Make this one of those :: things infront of the label instead -->
  64.               <button type="button" class="btn--secondary" aria-pressed="false">
  65.                 <Fa icon={faArrowsAlt} size="1.2x" />
  66.                 <!-- <span class="visually-hidden">Jakarta</span> -->
  67.               </button>
  68.               <button type="button" class="btn--danger" aria-pressed="false">
  69.                 <Fa icon={faTrash} size="1.2x" />
  70.                 <!-- <span class="visually-hidden">Jakarta</span> -->
  71.               </button>
  72.             </span>
  73.           {/if}
  74.         {/each}
  75.       </div>
  76.     </div>
  77.   </li>
  78. </ul>
  79.  
RAW Paste Data