Merge pull request #35 from pvdthings/dev

v0.11.0

package.json

@@ -1,6 +1,6 @@
 {
-	"name": "things-app",
-	"version": "0.10.0",
+	"name": "things-catalog-app",
+	"version": "0.11.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
@@ -18,6 +18,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
 		"autoprefixer": "^10.4.13",
+		"daisyui": "^3.5.1",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^4.0.0",

src/lib/Foundation.svelte

@@ -1,9 +1,7 @@
 <script context="module">
     export { default as Button } from "./foundation/Button.svelte";
     export { default as Column } from "./foundation/Column.svelte";
-    export { default as Link } from "./foundation/Link.svelte";
     export { default as Row } from "./foundation/Row.svelte";
-    export { default as Text } from "./foundation/Text.svelte";
     export { default as TextInput } from "./foundation/TextInput.svelte";
     export { default as Title } from "./foundation/Title.svelte";
 </script>

src/lib/language/translations.ts

@@ -8,7 +8,15 @@ export default {
         "Donate": "Donate",
         "Click to Donate": "Click to Donate",
         "Available": "Available",
-        "Unavailable": "Unavailable"
+        "Unavailable": "Unavailable",
+        "How to Borrow": "How to Borrow",
+        "How to Borrow.Step1": "Purchase a PVD Things membership and pay annual dues.",
+        "How to Borrow.Step2": "Visit us at 12 Library Court in Providence.",
+        "Learn More": "Learn More",
+        "OK": "OK",
+        "Hours": "Hours",
+        "Wednesday": "Wednesday",
+        "Saturday": "Saturday"
     },
     es: {
         "Button.Home": "Inicio",
@@ -19,6 +27,14 @@ export default {
         "No Results": "No hay resultados",
         "Donate": "Donar",
         "Click to Donate": "Clic para donar",
+        "How to Borrow": "Como pedir prestado",
+        "How to Borrow.Step1": "Compre una membresía de PVD Things y pague cuotas anuales.",
+        "How to Borrow.Step2": "Visítenos en 12 Library Court en Providence.",
+        "Learn More": "Aprende más",
+        "OK": "OK",
+        "Hours": "Horas",
+        "Wednesday": "Miércoles",
+        "Saturday": "Sábado",
         "Available": "Disponible",
         "Unavailable": "Indisponible",
         "All": "Todas",

src/lib/layout/Footer.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { Column, Link, Row, Text } from "$lib/Foundation.svelte";
+	import { Column, Row } from "$lib/Foundation.svelte";
 </script>
 
 <footer class="bg-bg py-10 relative z-40">

src/lib/things/BorrowModal.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import Button from "$lib/foundation/Button.svelte";
+	import { ButtonTheme } from "$lib/foundation/button";
+  import { showBorrowModal } from "./borrowModalStore";
+  import CloseIcon from "$lib/icons/x-mark.svg";
+	import { onDestroy } from "svelte";
+	import { t } from "$lib/language/translate";
+
+  let dialog: HTMLDialogElement;
+
+  const unsubscribe = showBorrowModal.subscribe((value) => {
+    if (value) dialog.showModal();
+  });
+
+  const closeModal = () => showBorrowModal.set(false);
+
+  const learnMore = () => {
+    closeModal();
+    window.open("https://www.pvdthings.coop/membership", '_blank').focus();
+  };
+
+  onDestroy(unsubscribe);
+</script>
+
+<dialog bind:this={dialog} id="borrow-modal" class="modal modal-bottom sm:modal-middle">
+  <form method="dialog" class="modal-box">
+    <button class="btn btn-circle btn-ghost outline-none absolute right-2 top-2" on:click={() => showBorrowModal.set(false)}>
+      <img src={CloseIcon} alt="Close" height="24" width="24" />
+    </button>
+    <h3 class="font-bold text-lg">{$t('How to Borrow')}</h3>
+    <ol class="py-4">
+      <li class="mb-2">1. {$t('How to Borrow.Step1')}</li>
+      <li class="mb-2">2. {$t('How to Borrow.Step2')}</li>
+    </ol>
+    <h4 class="font-bold">{$t('Hours')}</h4>
+    <ul class="pt-1 pb-6">
+      <li>{$t('Wednesday')} 6PM - 8PM</li>
+      <li>{$t('Saturday')} 11AM - 2PM</li>
+    </ul>
+    <div class="modal-bottom flex flex-row justify-between">
+      <Button on:click={learnMore}>
+        {$t('Learn More')}
+      </Button>
+      <Button theme={ButtonTheme.primary} on:click={closeModal}>
+        {$t('OK')}
+      </Button>
+    </div>
+  </form>
+</dialog>