@jjlmoya/utils-travel 1.1.0

package/src/tool/suitcase-checklist/component.astro

@@ -0,0 +1,710 @@
+---
+import { Icon } from "astro-icon/components";
+import type { SuitcaseChecklistUI } from "./index";
+
+interface Props {
+  ui: SuitcaseChecklistUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="suitcase-checklist">
+    <div class="sc-main-card">
+        <div class="sc-form" id="sc-form-container">
+            <div class="sc-header">
+                <h2>{ui.title}</h2>
+            </div>
+
+            <div class="sc-form-grid">
+                <div class="sc-form-group">
+                    <label class="sc-label"><Icon name="mdi:map-marker-radius" /> {ui.form.destTitle}</label>
+                    <div class="sc-radio-grid">
+                        {ui.form.destTypes.map((type, idx) => (
+                            <label class="sc-radio-card">
+                                <input type="radio" name="dest-type" value={type.id} checked={idx === 0} />
+                                <div class="sc-radio-content">
+                                    <Icon name={type.icon} />
+                                    <span>{type.name}</span>
+                                </div>
+                            </label>
+                        ))}
+                    </div>
+                </div>
+
+                <div class="sc-form-row">
+                    <div class="sc-form-group">
+                        <label class="sc-label"><Icon name="mdi:calendar-clock" /> {ui.form.daysTitle}</label>
+                        <div class="sc-number-input">
+                            <button type="button" class="sc-num-btn" id="sc-minus"><Icon name="mdi:minus" /></button>
+                            <input type="number" id="sc-travel-days" value="3" min="1" max="90" readonly />
+                            <button type="button" class="sc-num-btn" id="sc-plus"><Icon name="mdi:plus" /></button>
+                        </div>
+                    </div>
+
+                    <div class="sc-form-group">
+                        <label class="sc-label"><Icon name="mdi:earth" /> {ui.form.intlTitle}</label>
+                        <label class="sc-toggle">
+                            <input type="checkbox" id="sc-is-intl" />
+                            <div class="sc-toggle-slider"></div>
+                            <span>{ui.form.intlLabel}</span>
+                        </label>
+                    </div>
+                </div>
+
+                <div class="sc-form-group">
+                    <label class="sc-label"><Icon name="mdi:briefcase-variant" /> {ui.form.reasonTitle}</label>
+                    <div class="sc-radio-grid cols-2">
+                        {ui.form.reasons.map((reason, idx) => (
+                            <label class="sc-radio-card">
+                                <input type="radio" name="travel-type" value={reason.id} checked={idx === 0} />
+                                <div class="sc-radio-content">
+                                    <Icon name={reason.icon} />
+                                    <span>{reason.name}</span>
+                                </div>
+                            </label>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            <button class="sc-submit-btn" id="sc-generate-btn">
+                <Icon name="mdi:magic" />
+                {ui.form.submitBtn}
+            </button>
+        </div>
+
+        <div class="sc-results hidden" id="sc-results-container">
+            <div class="sc-results-header">
+                <div class="sc-results-title">
+                    <Icon name="mdi:bag-suitcase-outline" />
+                    <h2>{ui.results.title}</h2>
+                </div>
+
+                <div class="sc-progress">
+                    <div class="sc-progress-bar">
+                        <div class="sc-progress-fill" id="sc-progress-fill"></div>
+                    </div>
+                    <span id="sc-progress-text">0% {ui.results.progressText}</span>
+                </div>
+
+                <div class="sc-actions">
+                    <button class="sc-btn-outline" id="sc-back-btn">
+                        <Icon name="mdi:arrow-left" />
+                        {ui.results.editBtn}
+                    </button>
+                    <button class="sc-btn-primary" id="sc-print-btn">
+                        <Icon name="mdi:printer" />
+                        {ui.results.printBtn}
+                    </button>
+                </div>
+            </div>
+
+            <div class="sc-tips" id="sc-tips-container">
+                <h3><Icon name="mdi:lightbulb-on" /> {ui.results.tipsTitle}</h3>
+                <ul id="sc-tips-list"></ul>
+            </div>
+
+            <div class="sc-categories">
+                {Object.values(ui.itemsDb).map(cat => (
+                    <div class="sc-category-card" data-cat-id={cat.id}>
+                        <div class="sc-category-header">
+                            <Icon name={cat.icon} />
+                            <h3>{cat.title}</h3>
+                        </div>
+                        <ul class="sc-item-list">
+                            {cat.items.map(item => (
+                                <li>
+                                    <label class="sc-checkbox">
+                                        <input type="checkbox" class="sc-item-cb" />
+                                        <div class="sc-cb-box"></div>
+                                        <span id={item.dynamicId}>{item.label}</span>
+                                    </label>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                ))}
+
+                {Object.values(ui.specificItems.destType).map(cat => (
+                    <div class="sc-category-card hidden" data-cat-id={cat.id}>
+                        <div class="sc-category-header">
+                            <Icon name={cat.icon} />
+                            <h3>{cat.title}</h3>
+                        </div>
+                        <ul class="sc-item-list">
+                            {cat.items.map(item => (
+                                <li>
+                                    <label class="sc-checkbox">
+                                        <input type="checkbox" class="sc-item-cb" />
+                                        <div class="sc-cb-box"></div>
+                                        <span id={item.dynamicId}>{item.label}</span>
+                                    </label>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                ))}
+
+                {Object.values(ui.specificItems.travelType).map(cat => (
+                    <div class="sc-category-card hidden" data-cat-id={cat.id}>
+                        <div class="sc-category-header">
+                            <Icon name={cat.icon} />
+                            <h3>{cat.title}</h3>
+                        </div>
+                        <ul class="sc-item-list">
+                            {cat.items.map(item => (
+                                <li>
+                                    <label class="sc-checkbox">
+                                        <input type="checkbox" class="sc-item-cb" />
+                                        <div class="sc-cb-box"></div>
+                                        <span id={item.dynamicId}>{item.label}</span>
+                                    </label>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                ))}
+            </div>
+        </div>
+    </div>
+</div>
+
+<script is:inline define:vars={{ ui }}>
+    const formContainer = document.getElementById("sc-form-container");
+    const resultsContainer = document.getElementById("sc-results-container");
+    const generateBtn = document.getElementById("sc-generate-btn");
+    const backBtn = document.getElementById("sc-back-btn");
+    const printBtn = document.getElementById("sc-print-btn");
+    
+    const daysInput = document.getElementById("sc-travel-days");
+    const minusBtn = document.getElementById("sc-minus");
+    const plusBtn = document.getElementById("sc-plus");
+    
+    const isIntlCheck = document.getElementById("sc-is-intl");
+    
+    const progressFill = document.getElementById("sc-progress-fill");
+    const progressText = document.getElementById("sc-progress-text");
+    const tipsList = document.getElementById("sc-tips-list");
+
+    const qtyRopaInterior = document.getElementById("qty-ropa-interior");
+    const qtyCamisetas = document.getElementById("qty-camisetas");
+    const qtyPantalones = document.getElementById("qty-pantalones");
+    const qtyCalcetines = document.getElementById("qty-calcetines");
+    const itemIntl = document.getElementById("item-internacional");
+    const itemAdap = document.getElementById("item-adaptador");
+
+    function getSelectedRadio(name) {
+        return document.querySelector(`input[name="${name}"]:checked`)?.value;
+    }
+
+    function calculateQuantities(days) {
+        const max = 14;
+        if (qtyRopaInterior) qtyRopaInterior.textContent = `${ui.itemsDb.clothing_base.items[0].label} (${Math.min(days + 1, max)} mudas)`;
+        if (qtyCamisetas) qtyCamisetas.textContent = `${ui.itemsDb.clothing_base.items[1].label} (${Math.min(days, max)} ud.)`;
+        if (qtyPantalones) qtyPantalones.textContent = `${ui.itemsDb.clothing_base.items[2].label} (${Math.min(Math.ceil(days / 2) + 1, 8)} ud.)`;
+        if (qtyCalcetines) qtyCalcetines.textContent = `${ui.itemsDb.clothing_base.items[3].label} (${Math.min(days + 1, max)} pares)`;
+    }
+
+    function updateProgress() {
+        const total = document.querySelectorAll(".sc-category-card:not(.hidden) .sc-item-cb").length;
+        const checked = document.querySelectorAll(".sc-category-card:not(.hidden) .sc-item-cb:checked").length;
+        const perc = total === 0 ? 0 : Math.round((checked / total) * 100);
+        
+        if (progressFill) progressFill.style.width = `${perc}%`;
+        if (progressText) progressText.textContent = `${perc}% ${ui.results.progressText}`;
+    }
+
+    function generateTips(days, isIntl, dType) {
+        const tips = [ui.tips.military];
+        if (days > 7) tips.push(ui.tips.longTravel);
+        if (isIntl) {
+            tips.push(ui.tips.intlPassport);
+            tips.push(ui.tips.intlBank);
+            tips.push(ui.tips.intlAdapter);
+        }
+        if (dType === "frio") {
+            tips.push(ui.tips.coldLayers);
+            tips.push(ui.tips.coldHeavyOn);
+        }
+        if (dType === "playa") tips.push(ui.tips.beachWet);
+        
+        if (tipsList) {
+            tipsList.innerHTML = tips.map(t => `<li>${t}</li>`).join("");
+        }
+    }
+
+    minusBtn?.addEventListener("click", () => {
+        const val = parseInt(daysInput.value);
+        if (val > 1) daysInput.value = val - 1;
+    });
+
+    plusBtn?.addEventListener("click", () => {
+        const val = parseInt(daysInput.value);
+        if (val < 90) daysInput.value = val + 1;
+    });
+
+    generateBtn?.addEventListener("click", () => {
+        const days = parseInt(daysInput.value);
+        const dType = getSelectedRadio("dest-type");
+        const tType = getSelectedRadio("travel-type");
+        const isIntl = isIntlCheck.checked;
+
+        document.querySelectorAll(".sc-category-card[data-cat-id^='dest-'], .sc-category-card[data-cat-id^='travel-']").forEach(el => el.classList.add("hidden"));
+
+        document.querySelector(`.sc-category-card[data-cat-id="dest-${dType}"]`)?.classList.remove("hidden");
+        document.querySelector(`.sc-category-card[data-cat-id="travel-${tType}"]`)?.classList.remove("hidden");
+
+        calculateQuantities(days);
+        if (itemIntl) itemIntl.parentElement.parentElement.style.display = isIntl ? "flex" : "none";
+        if (itemAdap) itemAdap.parentElement.parentElement.style.display = isIntl ? "flex" : "none";
+        
+        generateTips(days, isIntl, dType);
+        
+        formContainer.classList.add("hidden");
+        resultsContainer.classList.remove("hidden");
+        updateProgress();
+        resultsContainer.scrollIntoView({ behavior: "smooth" });
+    });
+
+    backBtn?.addEventListener("click", () => {
+        resultsContainer.classList.add("hidden");
+        formContainer.classList.remove("hidden");
+    });
+
+    printBtn?.addEventListener("click", () => window.print());
+
+    document.querySelectorAll(".sc-item-cb").forEach(cb => {
+        cb.addEventListener("change", updateProgress);
+    });
+</script>
+
+<style>
+.suitcase-checklist {
+    --sc-primary: #3b82f6;
+    --sc-primary-hover: #2563eb;
+    --sc-bg: #f8fafc;
+    --sc-card-bg: #fff;
+    --sc-text: #1e293b;
+    --sc-text-muted: #64748b;
+    --sc-border: #e2e8f0;
+    --sc-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+:global(.theme-dark) .suitcase-checklist {
+    --sc-bg: #0f172a;
+    --sc-card-bg: #1e293b;
+    --sc-text: #f1f5f9;
+    --sc-text-muted: #94a3b8;
+    --sc-border: #334155;
+    --sc-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+}
+
+.sc-main-card {
+    background: var(--sc-card-bg);
+    border-radius: 2rem;
+    padding: 2.5rem;
+    box-shadow: var(--sc-shadow);
+    border: 1px solid var(--sc-border);
+}
+
+.sc-header h2 {
+    font-size: 2rem;
+    font-weight: 800;
+    margin-bottom: 2rem;
+    text-align: center;
+}
+
+.sc-form-grid {
+    display: grid;
+    gap: 2rem;
+}
+
+.sc-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--sc-text-muted);
+    text-transform: uppercase;
+    font-size: 0.85rem;
+}
+
+.sc-radio-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+}
+
+.sc-radio-card {
+    position: relative;
+    cursor: pointer;
+}
+
+.sc-radio-card input {
+    position: absolute;
+    opacity: 0;
+}
+
+.sc-radio-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1.5rem;
+    background: var(--sc-bg);
+    border: 2px solid var(--sc-border);
+    border-radius: 1.25rem;
+    transition: all 0.2s;
+}
+
+.sc-radio-content svg {
+    font-size: 2rem;
+}
+
+.sc-radio-card input:checked + .sc-radio-content {
+    border-color: var(--sc-primary);
+    background: rgba(59, 130, 246, 0.1);
+    color: var(--sc-primary);
+}
+
+.sc-form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+}
+
+.sc-number-input {
+    display: flex;
+    align-items: center;
+    background: var(--sc-bg);
+    padding: 0.25rem;
+    border-radius: 1rem;
+    border: 1px solid var(--sc-border);
+    width: 100%;
+    min-height: 56px;
+}
+
+.sc-num-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 0.75rem;
+    border: none;
+    background: var(--sc-card-bg);
+    color: var(--sc-primary);
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.sc-number-input input {
+    flex: 1;
+    text-align: center;
+    background: transparent;
+    border: none;
+    font-size: 1.25rem;
+    font-weight: 800;
+    color: var(--sc-text);
+}
+
+.sc-toggle {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    cursor: pointer;
+}
+
+.sc-toggle-slider {
+    width: 50px;
+    height: 26px;
+    background: #cbd5e1;
+    border-radius: 13px;
+    position: relative;
+    transition: 0.3s;
+}
+
+.sc-toggle-slider::after {
+    content: '';
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border-radius: 50%;
+    top: 3px;
+    left: 3px;
+    transition: 0.3s;
+}
+
+.sc-toggle input:checked + .sc-toggle-slider {
+    background: var(--sc-primary);
+}
+
+.sc-toggle input:checked + .sc-toggle-slider::after {
+    left: 27px;
+}
+
+.sc-toggle input { display: none; }
+
+.sc-submit-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    width: 100%;
+    padding: 1.25rem;
+    margin-top: 2rem;
+    background: var(--sc-primary);
+    color: white;
+    border: none;
+    border-radius: 1.25rem;
+    font-size: 1.1rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.sc-submit-btn:hover {
+    background: var(--sc-primary-hover);
+    transform: translateY(-2px);
+}
+
+.sc-results.hidden { display: none; }
+.hidden { display: none; }
+
+.sc-results-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+}
+
+.sc-results-title {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.sc-results-title svg {
+    font-size: 2.5rem;
+    color: var(--sc-primary);
+}
+.sc-results-title h2 {
+    margin: 0;
+}
+
+.sc-progress {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 200px;
+}
+
+.sc-progress-bar {
+    height: 10px;
+    background: var(--sc-bg);
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.sc-progress-fill {
+    height: 100%;
+    background: var(--sc-primary);
+    width: 0%;
+    transition: width 0.3s;
+}
+
+.sc-progress span {
+    font-size: 0.85rem;
+    font-weight: 700;
+    color: var(--sc-text-muted);
+}
+
+.sc-actions {
+    display: flex;
+    gap: 1rem;
+}
+
+.sc-btn-outline {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    border: 2px solid var(--sc-border);
+    border-radius: 1rem;
+    background: transparent;
+    color: var(--sc-text);
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.sc-btn-primary {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    background: var(--sc-primary);
+    border: none;
+    border-radius: 1rem;
+    color: white;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.sc-tips {
+    background: var(--sc-bg);
+    padding: 2rem;
+    border-radius: 1.5rem;
+    margin-bottom: 2.5rem;
+}
+
+.sc-tips h3 {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-top: 0;
+    color: var(--sc-primary);
+}
+.sc-tips ul {
+    margin: 0;
+    padding-left: 1.5rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+.sc-tips li {
+    font-size: 0.95rem;
+    line-height: 1.5;
+    color: var(--sc-text-muted);
+}
+
+.sc-categories {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 2rem;
+}
+
+.sc-category-card {
+    background: var(--sc-bg);
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+    border: 1px solid var(--sc-border);
+}
+
+.sc-category-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 2px solid var(--sc-border);
+}
+
+.sc-category-header h3 {
+    margin: 0;
+    font-size: 1.1rem;
+}
+.sc-category-header svg {
+    color: var(--sc-primary);
+    font-size: 1.5rem;
+}
+
+.sc-item-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.sc-item-list li {
+    margin-bottom: 0.75rem;
+}
+
+.sc-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: 500;
+}
+
+.sc-cb-box {
+    width: 24px;
+    height: 24px;
+    background: var(--sc-card-bg);
+    border: 2px solid var(--sc-border);
+    border-radius: 6px;
+    position: relative;
+    transition: 0.2s;
+    flex-shrink: 0;
+}
+
+.sc-checkbox input {
+    display: none;
+}
+.sc-checkbox input:checked + .sc-cb-box {
+    background: var(--sc-primary);
+    border-color: var(--sc-primary);
+}
+
+.sc-checkbox input:checked + .sc-cb-box::after {
+    content: 'X';
+    position: absolute;
+    color: white;
+    font-size: 14px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.sc-checkbox input:checked ~ span {
+    opacity: 0.5;
+    text-decoration: line-through;
+}
+
+@media print {
+    .sc-form,
+    .sc-actions,
+    .sc-tips,
+    .sc-results-header {
+        display: none;
+    }
+    .suitcase-checklist {
+        padding: 0;
+        margin: 0;
+        max-width: 100%;
+    }
+    .sc-main-card {
+        border: none;
+        box-shadow: none;
+        padding: 0;
+    }
+    .sc-results.hidden {
+        display: block;
+    }
+    .sc-categories {
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+    }
+    .sc-category-card {
+        break-inside: avoid;
+    }
+    .sc-results-title {
+        display: block;
+        margin-bottom: 1rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .sc-form-row {
+        grid-template-columns: 1fr;
+    }
+    .sc-tips ul {
+        grid-template-columns: 1fr;
+    }
+    .sc-results-header {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}
+</style>