111 lines
13 KiB
JavaScript
111 lines
13 KiB
JavaScript
import { defineComponent, ref, reactive, unref, useSSRContext } from "vue";
|
|
import { ssrRenderAttrs, ssrInterpolate, ssrRenderList, ssrRenderAttr, ssrIncludeBooleanAttr, ssrRenderClass } from "vue/server-renderer";
|
|
import "/app/node_modules/hookable/dist/index.mjs";
|
|
import "/app/node_modules/klona/dist/index.mjs";
|
|
import { a as useI18n } from "../server.mjs";
|
|
import "/app/node_modules/ofetch/dist/node.mjs";
|
|
import "#internal/nuxt/paths";
|
|
import "/app/node_modules/unctx/dist/index.mjs";
|
|
import "/app/node_modules/h3/dist/index.mjs";
|
|
import "pinia";
|
|
import "/app/node_modules/defu/dist/defu.mjs";
|
|
import "vue-router";
|
|
import "/app/node_modules/ufo/dist/index.mjs";
|
|
import "/app/node_modules/cookie-es/dist/index.mjs";
|
|
import "/app/node_modules/destr/dist/index.mjs";
|
|
import "/app/node_modules/ohash/dist/index.mjs";
|
|
import "/app/node_modules/@unhead/vue/dist/index.mjs";
|
|
import "@vue/devtools-api";
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "badges",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const { t } = useI18n();
|
|
const loading = ref(true);
|
|
const error = ref(false);
|
|
const saving = ref(false);
|
|
const badges = ref([]);
|
|
const showModal = ref(false);
|
|
const showDeleteModal = ref(false);
|
|
const editingBadge = ref(null);
|
|
const deletingBadge = ref(null);
|
|
ref(false);
|
|
const toast = ref(null);
|
|
const form = reactive({
|
|
name: "",
|
|
description: "",
|
|
icon_url: ""
|
|
});
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<div${ssrRenderAttrs(_attrs)}><div class="mb-8"><h1 class="text-2xl font-bold text-white">${ssrInterpolate(unref(t)("gamification.badges.title"))}</h1><p class="text-slate-400 mt-1">${ssrInterpolate(unref(t)("gamification.badges.subtitle"))}</p></div>`);
|
|
if (unref(loading)) {
|
|
_push(`<div class="flex items-center justify-center py-20"><div class="text-slate-400 flex items-center gap-3"><svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg><span>${ssrInterpolate(unref(t)("gamification.badges.loading"))}</span></div></div>`);
|
|
} else if (unref(error)) {
|
|
_push(`<div class="bg-rose-500/10 border border-rose-500/30 rounded-xl p-6 mb-8"><p class="text-rose-400">${ssrInterpolate(unref(t)("gamification.badges.error"))}</p><button class="mt-3 text-sm text-rose-300 hover:text-rose-200 underline">${ssrInterpolate(unref(t)("gamification.badges.retry"))}</button></div>`);
|
|
} else {
|
|
_push(`<!--[--><div class="mb-6 flex justify-end"><button class="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-medium transition flex items-center gap-2"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg> ${ssrInterpolate(unref(t)("gamification.badges.create"))}</button></div><div class="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden"><table class="w-full"><thead><tr class="border-b border-slate-700"><th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">${ssrInterpolate(unref(t)("gamification.badges.id"))}</th><th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">${ssrInterpolate(unref(t)("gamification.badges.name"))}</th><th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">${ssrInterpolate(unref(t)("gamification.badges.description"))}</th><th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">${ssrInterpolate(unref(t)("gamification.badges.icon"))}</th><th class="text-right px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">${ssrInterpolate(unref(t)("gamification.badges.actions"))}</th></tr></thead><tbody class="divide-y divide-slate-700/50"><!--[-->`);
|
|
ssrRenderList(unref(badges), (badge) => {
|
|
_push(`<tr class="hover:bg-slate-700/30 transition"><td class="px-6 py-4 text-sm text-slate-400">${ssrInterpolate(badge.id)}</td><td class="px-6 py-4"><span class="text-sm font-semibold text-white">${ssrInterpolate(badge.name)}</span></td><td class="px-6 py-4 text-sm text-slate-300 max-w-xs truncate">${ssrInterpolate(badge.description || "—")}</td><td class="px-6 py-4">`);
|
|
if (badge.icon_url) {
|
|
_push(`<div class="flex items-center gap-2"><img${ssrRenderAttr("src", badge.icon_url)} alt="" class="w-8 h-8 rounded-full object-cover bg-slate-700"><span class="text-xs text-slate-400 truncate max-w-[120px]">${ssrInterpolate(badge.icon_url)}</span></div>`);
|
|
} else {
|
|
_push(`<span class="text-sm text-slate-500">—</span>`);
|
|
}
|
|
_push(`</td><td class="px-6 py-4 text-right"><div class="flex items-center justify-end gap-2"><button class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition"${ssrRenderAttr("title", unref(t)("gamification.badges.edit"))}><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg></button><button class="p-1.5 rounded-lg text-slate-400 hover:text-rose-400 hover:bg-rose-500/10 transition"${ssrRenderAttr("title", unref(t)("gamification.badges.delete"))}><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg></button></div></td></tr>`);
|
|
});
|
|
_push(`<!--]-->`);
|
|
if (unref(badges).length === 0) {
|
|
_push(`<tr><td colspan="5" class="px-6 py-12 text-center text-sm text-slate-500">${ssrInterpolate(unref(t)("gamification.badges.no_items"))}</td></tr>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</tbody></table></div><!--]-->`);
|
|
}
|
|
if (unref(showModal)) {
|
|
_push(`<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"><div class="bg-slate-800 rounded-xl border border-slate-700 p-6 w-full max-w-lg mx-4 shadow-2xl"><h2 class="text-lg font-semibold text-white mb-6">${ssrInterpolate(unref(editingBadge) ? unref(t)("gamification.badges.edit_title") : unref(t)("gamification.badges.create_title"))}</h2><form class="space-y-4"><div><label class="block text-sm font-medium text-slate-300 mb-1">${ssrInterpolate(unref(t)("gamification.badges.name"))} <span class="text-rose-400">*</span></label><input${ssrRenderAttr("value", unref(form).name)} type="text" required maxlength="100" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-sm text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"${ssrRenderAttr("placeholder", unref(t)("gamification.badges.name_placeholder"))}></div><div><label class="block text-sm font-medium text-slate-300 mb-1">${ssrInterpolate(unref(t)("gamification.badges.description"))} <span class="text-rose-400">*</span></label><textarea required maxlength="500" rows="3" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-sm text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none"${ssrRenderAttr("placeholder", unref(t)("gamification.badges.desc_placeholder"))}>${ssrInterpolate(unref(form).description)}</textarea></div><div><label class="block text-sm font-medium text-slate-300 mb-1">${ssrInterpolate(unref(t)("gamification.badges.icon"))}</label><input${ssrRenderAttr("value", unref(form).icon_url)} type="url" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-sm text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"${ssrRenderAttr("placeholder", unref(t)("gamification.badges.icon_placeholder"))}><p class="text-xs text-slate-500 mt-1">${ssrInterpolate(unref(t)("gamification.badges.icon_hint"))}</p></div>`);
|
|
if (unref(form).icon_url) {
|
|
_push(`<div class="flex items-center gap-3 p-3 bg-slate-700/50 rounded-lg"><img${ssrRenderAttr("src", unref(form).icon_url)} alt="Preview" class="w-10 h-10 rounded-full object-cover bg-slate-600"><div class="text-xs text-slate-400"><span class="text-emerald-400">✔</span> ${ssrInterpolate(unref(t)("gamification.badges.icon_preview"))}</div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`<div class="flex items-center justify-end gap-3 pt-2"><button type="button" class="px-4 py-2 text-sm font-medium text-slate-300 hover:text-white transition">${ssrInterpolate(unref(t)("gamification.badges.cancel"))}</button><button type="submit"${ssrIncludeBooleanAttr(unref(saving)) ? " disabled" : ""} class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 disabled:bg-indigo-600/50 disabled:cursor-not-allowed text-white rounded-lg text-sm font-medium transition flex items-center gap-2">`);
|
|
if (unref(saving)) {
|
|
_push(`<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(` ${ssrInterpolate(unref(editingBadge) ? unref(t)("gamification.badges.save") : unref(t)("gamification.badges.create_btn"))}</button></div></form></div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if (unref(showDeleteModal)) {
|
|
_push(`<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"><div class="bg-slate-800 rounded-xl border border-slate-700 p-6 w-full max-w-md mx-4 shadow-2xl"><div class="flex items-center gap-3 mb-4"><div class="p-2 rounded-full bg-rose-500/10 text-rose-400"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path></svg></div><div><h2 class="text-lg font-semibold text-white">${ssrInterpolate(unref(t)("gamification.badges.delete_title"))}</h2><p class="text-sm text-slate-400 mt-1">${ssrInterpolate(unref(t)("gamification.badges.delete_confirm"))}</p></div></div><div class="bg-slate-700/50 rounded-lg p-4 mb-6"><p class="text-sm font-medium text-white">${ssrInterpolate(unref(deletingBadge)?.name)}</p><p class="text-xs text-slate-400 mt-1">${ssrInterpolate(unref(deletingBadge)?.description)}</p></div><div class="flex items-center justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-slate-300 hover:text-white transition">${ssrInterpolate(unref(t)("gamification.badges.cancel"))}</button><button${ssrIncludeBooleanAttr(unref(saving)) ? " disabled" : ""} class="px-4 py-2 bg-rose-600 hover:bg-rose-500 disabled:bg-rose-600/50 disabled:cursor-not-allowed text-white rounded-lg text-sm font-medium transition flex items-center gap-2">`);
|
|
if (unref(saving)) {
|
|
_push(`<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(` ${ssrInterpolate(unref(t)("gamification.badges.delete_btn"))}</button></div></div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if (unref(toast)) {
|
|
_push(`<div class="${ssrRenderClass([unref(toast).type === "success" ? "bg-emerald-600 text-white" : "bg-rose-600 text-white", "fixed bottom-6 right-6 z-50 px-4 py-3 rounded-lg shadow-xl text-sm font-medium transition-all duration-300"])}">${ssrInterpolate(unref(toast).message)}</div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/gamification/badges.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
export {
|
|
_sfc_main as default
|
|
};
|
|
//# sourceMappingURL=badges-BJ6bQeZt.js.map
|