@necrolab/dashboard 0.4.61 → 0.4.208

package/src/components/Tasks/Task.vue

@@ -1,125 +1,144 @@
 <template>
-    <Row class="relative grid-cols-10 gap-2 text-white lg:grid-cols-12" @click="ui.setOpenContextMenu('')">
-        <div class="absolute left-1 top-1 block md:hidden">
-            <h4
-                class="text-xs font-bold text-white"
-                style="
-                    background: transparent !important;
-                    border: none !important;
-                    padding: 0 !important;
-                    margin: 0 !important;
-                    color: #c9cad1 !important;
-                    font-size: 11px !important;
-                    font-weight: 600 !important;
-                    letter-spacing: 0.4px !important;
-                ">
+    <Row
+        class="relative text-white"
+        @click="ui.setOpenContextMenu('')"
+        @click.right.prevent="ui.setOpenContextMenu('')"
+    >
+        <div class="block md:hidden absolute left-1 top-0">
+            <h4 class="text-xs task-id text-white">
                 {{ props.task.taskId }}
             </h4>
         </div>
-        <div class="col-span-1 flex items-center justify-start lg:col-span-2">
+        <div class="col-span-1 lg:col-span-2 flex">
             <Checkbox
-                class="ml-2 mr-4 flex-shrink-0"
+                class="ml-0 mr-4"
                 :toggled="props.task.selected"
-                @valueUpdate="ui.toggleTaskSelected(props.task.taskId)" />
-            <h4
-                class="task-event-id mx-auto hidden cursor-pointer text-white hover:text-light-300 lg:block"
-                @click="copy(props.task.eventId)">
+                @valueUpdate="ui.toggleTaskSelected(props.task.taskId)"
+            />
+            <h4 class="task-id-alt mx-auto hidden md:block text-white" @click="copy(props.task.eventId)">
                 {{ props.task.eventId }}
             </h4>
         </div>
+        <div class="col-span-2 hidden md:block">
+            <h4 class="text-white">{{ props.task.quantity }}</h4>
+        </div>
         <div class="col-span-2">
             <h4 class="text-white">
                 <span v-if="!props.task.reservedTicketsList">-</span>
                 <div v-else>
-                    <div v-for="l in props.task.reservedTicketsList.split('\n')" :key="l">
+                    <div v-for="l in props.task.reservedTicketsList.split(' | ')" :key="l">
                         <span v-if="!!l.trim()">{{ l.trim() }}</span>
                     </div>
                 </div>
                 <span
                     class="ml-1 font-bold"
-                    :class="{
-                        'text-red-400':
-                            props.task._timeLeftString === '00:00' || props.task._timeLeftString === 'No Cartholds'
-                    }">
-                    {{ props.task._timeLeftString !== "00:00" ? props.task._timeLeftString : "Expired" }}
-                </span>
+                    :class="[
+                        props.task._timeLeftString == '00:00' || props.task._timeLeftString == 'No Cartholds'
+                            ? 'text-red-400'
+                            : ''
+                    ]"
+                    >{{ props.task._timeLeftString !== "00:00" ? props.task._timeLeftString : "Expired" }}</span
+                >
             </h4>
         </div>
-        <div class="col-span-5 justify-center text-center md:col-span-4 lg:col-span-5">
-            <div class="status-container">
+        <div class="col-span-6 md:col-span-4 lg:col-span-3 text-center justify-center">
+            <div class="flex md:gap-x-2 rounded-2xl w-fit shadow-3xl mx-auto items-center justify-center bg-dark-600">
+                <!-- Status circle -->
                 <div
-                    class="status-indicator"
-                    :class="
+                    class="w-2 h-2 rounded-full mx-1 md:ml-3 ml-2"
+                    :class="[
                         colorToClass(
                             props.task.active || props.task.status.toLowerCase() === 'idle'
                                 ? props.task.statusColor
                                 : 'red'
                         )
-                    "></div>
-                <span class="status-text">{{ props.task.status }}</span>
+                    ]"
+                ></div>
+                <!-- Actual status -->
+                <span class="font-bold text-sm p-1 md:mr-3 mr-2 truncate uppercase">{{
+                    truncate(props.task.status, statusTruncateLength)
+                }}</span>
             </div>
         </div>
-        <div class="col-span-2 flex lg:col-span-3">
-            <ul class="task-buttons">
+        <div class="col-span-2 flex">
+            <ul class="task-buttons bg-dark-600 px-1 lg:px-2 rounded-full shadow-3xl items-center">
                 <li>
-                    <button v-if="task.active" @click="ui.stopTask(task.taskId)">
+                    <button class="p-1" v-if="task.active" @click="ui.stopTask(task.taskId)">
                         <PauseIcon />
                     </button>
-                    <button v-else @click="ui.startTask(task.taskId)">
+                    <button class="p-1" v-else @click="ui.startTask(task.taskId)">
                         <PlayIcon />
                     </button>
                 </li>
-                <li v-if="task.status?.toLowerCase() == 'waiting' && props.task._timeLeftString !== '00:00'">
-                    <button @click="ui.continueTask(task.taskId, 'autocheckout')">
+                <li v-if="task.status?.toLowerCase() === 'waiting' && props.task._timeLeftString !== '00:00'">
+                    <button class="p-1" @click="ui.continueTask(task.taskId, 'autocheckout')">
                         <BagWhiteIcon />
                     </button>
                 </li>
-                <li v-if="task.status?.toLowerCase() == 'waiting'">
-                    <button @click="ui.continueTask(task.taskId, 'change_reservation')">
+                <li v-if="task.status?.toLowerCase() === 'waiting'">
+                    <button class="p-1" @click="ui.continueTask(task.taskId, 'change_reservation')">
                         <EditIcon />
                     </button>
                 </li>
                 <li>
-                    <button @click="ui.deleteTask(task.taskId)">
+                    <button class="p-1" @click="ui.deleteTask(task.taskId)">
                         <TrashIcon />
                     </button>
                 </li>
-                <li @contextmenu.prevent="handleRightClick">
-                    <button @click="props.task.isExpanded = !props.task.isExpanded">
-                        <span>{{ props.task.isExpanded ? "−" : "+" }}</span>
+                <li
+                    class="text-xl -mt-2"
+                    @click.right.prevent="window.setTimeout(() => ui.setOpenContextMenu(task.taskId), 10)"
+                >
+                    <!-- eslint-disable-next-line vue/no-mutating-props -->
+                    <button class="p-1 mt-1" @click="props.task.isExpanded = !props.task.isExpanded">
+                        <span>{{ props.task.isExpanded ? "-" : "+" }}</span>
                     </button>
                 </li>
             </ul>
         </div>
-        <div class="absolute right-5 top-4 col-span-1 hidden items-center justify-center md:block lg:flex">
-            <h4 class="task-id text-center text-xs text-white">
+        <div class="hidden md:block col-span-1 absolute right-5 top-4 lg:flex items-center justify-center">
+            <h4 class="text-center text-xs task-id text-white">
                 {{ props.task.taskId }}
             </h4>
         </div>
         <transition name="fade">
             <div
-                class="col-span-10 flex flex-wrap gap-x-4 gap-y-4 pb-2 pt-8 will-change-auto lg:col-span-12 lg:gap-x-10 xl:justify-around"
-                v-if="props.task.isExpanded">
+                class="col-span-12 flex flex-wrap gap-x-4 gap-y-4 lg:gap-x-10 pt-8 pb-2 xl:justify-around will-change-auto"
+                v-if="props.task.isExpanded"
+            >
+                <!-- <div class="flex gap-x-2 " @click="copy(props.task.eventId)">
+          <StadiumWhiteIcon />
+          <h4 class="text-white">{{ props.task.eventId }}</h4>
+        </div>
+        <div class="flex gap-x-2 md:hidden">
+          <BagWhiteIcon />
+          <h4 class="text-white">{{ props.task.quantity }}</h4>
+        </div> -->
+
                 <!-- Details -->
                 <TaskLabel
                     class="md:hidden"
                     image="stadium_w"
                     :text="props.task.eventId"
-                    @click="copy(props.task.eventId)" />
+                    @click="copy(props.task.eventId)"
+                />
 
-                <TaskLabel class="md:hidden" image="bag_w" :text="String(props.task.quantity)" />
+                <TaskLabel class="md:hidden" image="bag_w" :text="props.task.quantity" />
                 <TaskLabel
                     v-if="props.task.email"
                     image="mail"
                     :text="props.task.email"
-                    @click="copy(props.task.email)" />
+                    @click="copy(props.task.email)"
+                />
                 <TaskLabel
                     v-if="props.task.password"
                     image="key"
                     :text="props.task.password"
-                    @click="copy(props.task.password)" />
+                    @click="copy(props.task.password)"
+                />
                 <TaskLabel v-if="!props.task.email && !props.task.password" image="mail" text="No account chosen yet" />
                 <TaskLabel v-if="props.task.profileName" image="profile" :text="props.task.profileName" />
+                <TaskLabel image="camera" :text="props.task.proxy" @click="copy(props.task.proxy)" />
                 <TaskLabel image="timer" :text="props.task.smartTimer ? 'On' : 'Off'" />
                 <TaskLabel image="groups" :text="props.task.loginAfterCart ? 'On' : 'Off'" />
                 <TaskLabel image="hand" :text="props.task.manual ? 'On' : 'Off'" />
@@ -132,359 +151,88 @@
                     v-if="props.task.presaleCode"
                     @click="copy(props.task.presaleCode)"
                     image="pencil"
-                    :text="props.task.presaleCode" />
+                    :text="props.task.presaleCode"
+                />
 
                 <TaskLabel v-if="props.task.eventName" image="stadium_w" :text="props.task.eventName" />
                 <TaskLabel v-if="props.task.eventVenue" image="stadium_w" :text="props.task.eventVenue" />
                 <TaskLabel
                     v-if="props.task.eventLocalDate"
                     image="stadium_w"
-                    :text="formatDate(props.task.eventLocalDate)" />
+                    :text=" formatDate(props.task.eventLocalDate)"
+                />
                 <TaskLabel image="sandclock" :text="props.task.agedAccount ? 'On' : 'Off'" />
             </div>
         </transition>
 
         <!-- Context menu -->
-        <transition name="fade">
-            <div
-                v-if="ui.openContextMenu === task.taskId"
-                ref="contextMenuRef"
-                class="w-42 context-menu z-max fixed grid grid-cols-1 gap-1 rounded-lg border border-dark-650 bg-dark-500 p-1 text-white shadow-xl"
-                :style="contextMenuPosition">
-                <button class="btn-primary" @click="openInNewTab(`${ui.currentCountry.url}/event/${task.eventId}`)">
-                    Open Event
-                </button>
-                <button v-if="task.openerLink" class="btn-primary" @click="openInBrowser(false)">
-                    Open in browser (proxy)
-                </button>
-                <button v-if="task.openerLink" class="btn-primary" @click="openInBrowser(true)">
-                    Open in browser (debug)
-                </button>
-            </div>
-        </transition>
+
+        <div class="absolute -bottom-1.5 right-5">
+            <transition name="fade">
+                <div
+                    v-if="ui.openContextMenu === task.taskId"
+                    class="bg-light-300 text-white w-42 grid grid-cols-1 p-1 gap-1 z-50 rounded-lg shadow-xl relative"
+                >
+                    <!-- <span class="text-light-400">{{ task.taskId }}</span> -->
+                    <button
+                        class="bg-dark-500 smooth-hover p-1 rounded-lg"
+                        @click="openInNewTab(`${ui.currentCountry.url}/event/${task.eventId}`)"
+                    >
+                        Open Event
+                    </button>
+                    <button
+                        v-if="task.openerLink"
+                        class="bg-dark-500 smooth-hover p-1 rounded-lg"
+                        @click="openInBrowser(false)"
+                    >
+                        Open in browser (proxy)
+                    </button>
+                    <button
+                        v-if="task.openerLink"
+                        class="bg-dark-500 smooth-hover p-1 rounded-lg"
+                        @click="openInBrowser(true)"
+                    >
+                        Open in browser (debug)
+                    </button>
+                </div>
+            </transition>
+        </div>
     </Row>
 </template>
 <style lang="scss" scoped>
 h4 {
     @apply text-center;
-    color: #e2e2e5;
-}
-
-.status-container {
-    @apply mx-auto flex w-fit items-center justify-center rounded-lg border border-dark-650 bg-dark-500;
-    padding: 6px 12px;
-    gap: 6px;
-    transition: all 0.15s ease;
-    max-width: 100%;
-
-    &:hover {
-        @apply border-dark-700 bg-dark-550;
-    }
-}
-
-.status-text {
-    @apply truncate text-sm font-medium uppercase;
-    color: #e2e2e5;
-    letter-spacing: 0.025em;
 }
 
-.task-buttons {
-    @apply mx-auto flex items-center justify-center rounded border border-dark-650 bg-dark-500;
-    padding: 2px;
-    gap: 1px;
-
-    button {
-        @apply relative flex items-center justify-center rounded border-0 outline-0 transition-all duration-150;
-        background: transparent;
-        width: 22px;
-        height: 22px;
-        color: #cccccc;
-        border-radius: 4px;
-
-        &:hover {
-            background: rgba(255, 255, 255, 0.1);
-            color: #ffffff;
-            transform: scale(1.05);
-        }
-
-        &:active {
-            background: rgba(255, 255, 255, 0.2);
-            transform: scale(0.95);
-        }
-    }
-
-    svg,
-    img {
-        width: 12px;
-        height: 12px;
-        position: relative;
-        z-index: 1;
-    }
-
-    svg path {
-        fill: currentColor;
-    }
-
-    span {
-        @apply relative z-[1] text-xs font-medium;
+@media (max-width: 1024px) {
+    h4 {
+        font-size: 10px !important;
     }
-}
-
-/* Tablet sizing - medium buttons */
-@media (min-width: 768px) and (max-width: 1023px) {
     .task-buttons {
-        padding: 2px;
-        gap: 1px;
-        border-radius: 6px;
-
-        button {
-            width: 26px;
-            height: 26px;
-            border-radius: 5px;
-        }
-
-        svg,
-        img {
-            width: 14px;
-            height: 14px;
-        }
-
-        span {
-            font-size: 0.75rem;
-        }
+        @apply gap-x-3;
     }
-}
-
-/* Desktop sizing - large buttons */
-@media (min-width: 1024px) {
-    .task-buttons {
-        padding: 3px;
-        gap: 2px;
-        border-radius: 8px;
-
-        button {
-            width: 28px;
-            height: 28px;
-            border-radius: 6px;
-        }
-
-        svg,
-        img {
-            width: 16px;
-            height: 16px;
-        }
-
-        span {
-            font-size: 0.875rem;
-        }
-    }
-}
-
-/* Mobile portrait specific styling */
-@media (max-width: 480px) and (orientation: portrait) {
-    /* Position adjustment for mobile taskId */
-    .block.md\\:hidden {
-        left: 4rem !important;
-        top: 0.25rem !important;
-        z-index: 1 !important;
-    }
-
-    /* Improved button layout for mobile portrait */
-    .task-buttons {
-        padding: 1px;
-        gap: 1px;
-        border-radius: 4px;
-        border: 1px solid #3d3e44 !important;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
-        max-width: 100%;
-        min-height: 28px;
-        height: auto;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        background: #2e2f34;
-
-        button {
-            width: 20px;
-            height: 20px;
-            border-radius: 3px;
-            min-width: 20px;
-            border: none !important;
-            flex-shrink: 0;
-            margin: 0.5px;
-            background: transparent;
-
-            &:hover {
-                background: rgba(255, 255, 255, 0.1);
-                transform: scale(1.05);
-            }
-
-            &:active {
-                background: rgba(255, 255, 255, 0.15);
-                transform: scale(0.95);
-            }
-        }
-
-        svg,
-        img {
-            width: 10px;
-            height: 10px;
-        }
-
-        span {
-            font-size: 0.7rem;
-            line-height: 1;
-        }
-
-        /* Improved list item layout */
-        li {
-            display: flex;
-            margin: 0;
-            padding: 0;
-        }
-    }
-
-    /* Make the actions column more flexible */
-    .col-span-2.lg\\:col-span-3 {
-        min-width: 0;
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0 2px;
-    }
-
-    /* Compact status container */
-    .status-container {
-        border: none !important;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
-        padding: 2px 4px;
-        font-size: 0.7rem;
-        max-width: 100%;
-    }
-
-    .status-text {
-        font-size: 0.65rem;
-        letter-spacing: 0;
-    }
-
-    /* Reduce row height to accommodate smaller elements */
-    .task-row-container {
-        min-height: 45px !important;
-    }
-}
-
-.task-id {
-    font-size: 10px;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-    margin: 0;
-    color: #a0a0a6;
-    background: rgba(46, 47, 52, 0.4);
-    padding: 2px 6px;
-    border-radius: 4px;
-    border: 1px solid #3d3e44;
-}
-
-.task-event-id {
-    font-size: 11px;
-    font-weight: 500;
-    text-align: center;
-    color: #d0d0d3;
-
-    &:hover {
-        color: #ffffff;
-    }
-
-    @media (max-width: 1024px) {
-        font-size: 10px;
-    }
-
-    @media (max-width: 768px) {
-        font-size: 9px;
-    }
-}
-
-/* Responsive task styling */
-@screen lg {
-    h4 {
-        font-size: 10px;
-    }
-
     .task-id {
-        font-size: 8px;
+        font-size: 6px !important;
     }
-
-    .task-event-id {
-        font-size: 10px;
+    .task-id-alt {
+        font-size: 7px !important;
     }
 }
 </style>
-
 <script setup>
-/// <reference path="@/types/index.js" />
-
 import { Row } from "@/components/Table";
 import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 import TaskLabel from "@/components/Tasks/TaskLabel.vue";
-import { computed, ref, onMounted, onUnmounted, nextTick } from "vue";
+import { ref } from "vue";
 
 const ui = useUIStore();
 
-/** @type {{ task: Task }} */
 const props = defineProps({
     task: { type: Object }
 });
 
-// Context menu positioning
-const contextMenuPosition = ref({});
-const contextMenuRef = ref(null);
-
-// Handle right-click to position context menu
-const handleRightClick = (event) => {
-    const menuWidth = 168; // w-42 = 10.5rem = 168px
-    const menuHeight = 200; // Approximate height
-
-    let x = event.clientX;
-    let y = event.clientY - 55;
-
-    // Prevent menu from going off screen
-    if (x + menuWidth > window.innerWidth) {
-        x = event.clientX - menuWidth; // Show to the left instead
-    }
-    if (y + menuHeight > window.innerHeight) {
-        y = event.clientY - menuHeight; // Show above instead
-    }
-
-    contextMenuPosition.value = {
-        left: `${x}px`,
-        top: `${y}px`
-    };
-
-    // Open the context menu for this task
-    ui.setOpenContextMenu(props.task.taskId);
-
-    // Add click outside listener after menu opens
-    nextTick(() => {
-        document.addEventListener("click", handleClickOutside);
-    });
-};
-
-// Handle clicking outside the context menu
-const handleClickOutside = (event) => {
-    if (contextMenuRef.value && !contextMenuRef.value.contains(event.target)) {
-        ui.setOpenContextMenu("");
-        document.removeEventListener("click", handleClickOutside);
-    }
-};
-
-// Cleanup on unmount
-onUnmounted(() => {
-    document.removeEventListener("click", handleClickOutside);
-});
-
 const copy = (txt) => {
     if (!txt) return;
     navigator.clipboard.writeText(txt);
@@ -500,29 +248,28 @@ const colorToClass = (color) => {
     return colorMapping.get(color) || "bg-white";
 };
 
+const truncate = (text, after) => {
+    if (text?.length <= after || after === -1) return text;
+    return text?.substring(0, after) + "...";
+};
+
 const openInBrowser = (debug) => {
     if (!props.task.openerLink) return;
     ui.showSuccess(`Opening in browser ${debug ? "(debug)" : ""}`);
     const input = props.task.openerLink;
-    const data = JSON.parse(atob(input.split("://").pop()));
+    const data = JSON.parse(atob(input.split("://")[1]));
     data.config.debug = debug;
-    const out = "necro://" + btoa(JSON.stringify(data));
+    const out = "russonoro://" + btoa(JSON.stringify(data));
     openInNewTab(out);
 };
 
 const formatDate = (date) => {
-    if (!date) return "TBA";
+    if (!date) return "-";
     const d = new Date(date);
-    const iso = d.toISOString();
-    const [year, month, day] = iso.substring(0, 10).split("-");
-    const time = iso.substring(11, 16);
-    const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-    const dayName = dayNames[d.getUTCDay()];
-    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-    const monthName = monthNames[parseInt(month) - 1];
-    return `${dayName} ${monthName} ${parseInt(day)} ${year} ${time}`;
+    return `${d.toDateString()} ${d.toTimeString().split(":").slice(0, 2).join(":")}`;
 };
 
+
 const openInNewTab = (href) => {
     if (!href) return;
     ui.logger.Info("Opening", href);
@@ -532,4 +279,15 @@ const openInNewTab = (href) => {
         href: href
     }).click();
 };
+
+const getMaxStatusLength = (width) => {
+    if (width > 1279) return -1;
+    if (width > 767) return 25;
+    if (width > 639) return 30;
+    if (width > 540) return 18;
+    return 13;
+};
+
+let statusTruncateLength = ref(getMaxStatusLength(window.innerWidth));
+window.addEventListener("resize", () => (statusTruncateLength.value = getMaxStatusLength(window.innerWidth)));
 </script>