https://lsu.edu.ph/_nuxt/By5KD_u9.js

1import{h,k as O,c as r,a as s,t as H,d as J,g as m,I as g,F as K,r as W,s as q,f as G,B as Q,o as i,p as Z,y,K as ee,e as oe,i as u}from"./sCfbBLcw.js";import{h as F}from"./B-YVwB4U.js";const te={class:"relative w-full h-screen bg-gray-100 p-4 select-none overflow-x-hidden"},ne={class:"flex gap-2 mb-4 items-center"},le={class:"ml-4 flex items-center gap-2"},re=["onMousedown"],ie=["onMousedown"],se=["onUpdate:modelValue","onChange"],ae=["onUpdate:modelValue"],ue=["onChange"],ce=["onUpdate:modelValue","onFocus"],pe=["onInput"],de={class:"w-full h-full p-2 overflow-hidden"},me=["onUpdate:modelValue"],_e=["src"],fe=["src"],ve=["src"],he=["onMousedown"],ye={__name:"index",setup(ge){const A=q(),w=h(A.public.apiUrl);Q();const p=h(!1),d=h("page1"),l=h([]);let k=10;O(()=>M());async function M(){try{const n=await fetch(`${w.value}/api/cms/boxes/`);if(!n.ok){l.value=[];return}const o=await n.json(),e=Array.isArray(o?.boxes)?o.boxes:[];l.value=e.map(t=>({file_url:Array.isArray(t.file_url)?t.file_url:t.file_url?[{url:t.file_url}]:[],component_properties:t.component_properties||{},zIndex:++k,cms_id:t.cms_id||"CMS"+F().valueOf(),component_width:Number(t.component_width)||240,component_height:Number(t.component_height)||180,component_top:Number(t.component_top)||100,component_left

1:Number(t.component_left)||100,component_type:t.component_type||"text",component_content:t.component_content||"",page_route_link_belong:t.page_route_link_belong||d.value}))}catch(n){console.error("loadBoxes error:",n),l.value=[]}}const $=G(()=>l.value.filter(n=>n.page_route_link_belong===d.value));function x(n){(!Array.isArray(n.file_url)||!n.file_url.length)&&(n.file_url=[{url:""}])}function T(){const n={cms_id:"CMS"+F().valueOf(),component_width:200,component_height:200,component_top:100,component_left:100,component_type:"text",component_content:"",component_properties:{},file_url:[],page_route_link_belong:d.value};l.value.push(n)}function Y(n){p.value&&(n.zIndex=++k)}function S(n){return l.value.findIndex(o=>o.cms_id===n)}async function D(n,o){const e=n.target.files[0];if(!e)return;const t=new FormData;t.append("file",e);try{const c=await(await fetch(`${w.value}/api/cms/upload-file/`,{method:"POST",body:t})).json(),v=S(o);if(v===-1)return;x(l.value[v]),l.value[v].file_url[0].url=c.storage_url||c.url||"",l.value[v].file_url[0].name=c.name||e.name}catch(a){console.error("upload error",a)}}function P(n,o){const e=n.target.value,t=S(o);if(t!==-1)try{const a=new URL(e);let c="";a.hostname.includes("youtube.com")?c=a.searchParams.get("v"):a.hostname.includes("youtu.be")&&(c=a.pathname.substring(1)),c&&(l.value[t].component_properties.videoEmbed=`https://www.youtube.com/embed/${c}`)}catch(a){console.warn("invalid video url",a)}}async function R(){const n=l.value.map(o=>({cms_id:o.cms_id,component_width:String(o.component_width||""),component_height:String(o.component_height||""),component_top:String(o.component_top||""),component_left

1:String(o.component_left||""),component_type:o.component_type||"text",component_content:o.component_content||"",component_properties:o.component_properties||{},file_url:Array.isArray(o.file_url)?o.file_url:o.file_url?[{url:o.file_url}]:[],page_route_link_belong:o.page_route_link_belong||d.value}));try{const o=await fetch(`${w.value}/api/cms/boxes/save/`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(n)});if(!o.ok){const t=await o.text();console.error("save error",o.status,t),alert("Save failed. See console.");return}const e=await o.json();alert(e.message||"Saved!"),await M()}catch(o){console.error("saveBoxes error",o),alert("Save failed — check console.")}}let _=null,I=0,C=0;function X(n,o){_=o;const e=l.value.find(t=>t.cms_id===o);I=n.clientX-(Number(e.component_left)||0),C=n.clientY-(Number(e.component_top)||0),window.addEventListener("mousemove",E),window.addEventListener("mouseup",U)}function E(n){if(!_)return;const o=l.value.find(e=>e.cms_id===_);o.component_left=n.clientX-I,o.component_top=n.clientY-C}function U(){_=null,window.removeEventListener("mousemove",E),window.removeEventListener("mouseup",U)}let f=null,V=0,L=0,N=0,z=0;function j(n,o){f=o;const e=l.value.find(t=>t.cms_id===o);V=Number(e.component_width)||0,L=Number(e.component_height)||0,N=n.clientX,z=n.clientY,window.addEventListener("mousemove",B),window.addEventListener("mouseup",b)}function B(n){if(!f)return;const o=l.value.find(e=>e.cms_id===f);o.component_width=Math.max(40,V+(n.clientX-N)),o.component_height=Math.max(40,L+(n.clientY-z))}function b(){f=null,window.removeEventListener("mousemove",B),window.removeEventListener("mouseup",b)}return(n,o)=>(i(),r("div",te,[s("div",ne,[s("button",{class:"px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700",onClick:T}," Add Box "),s("button",{class:"px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700",onClick:o[0]||(o[0]=e=>p.value=!p.value)},H(p.value?"Disable Edit Mode":"Enable Edit Mode"),1),s("button",{class:"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700",onClick:R}," Save Boxes "),s("div",le,[o[4]||(o[4]=J(" Current Page: ",-1)),m(s("input",{type:"text","onUpdate:modelValue":o[1]||(o[1]=e=>d.value=e),class:"border rounded px-1 w-32"},null,512),[[g,d.value]])])]),(i(!0),r(K,null,W($.value,e=>(i(),r("div",{key:e.cms_id,class:"absolute border border-purple-600 rounded-md shadow-md bg-white",style:Z({width:(e.component_width||240)+"px",height:(e.component_height||180)+"px",top:(e.component_top||100)+"px",left:(e.component_left||100)+"px",zIndex:e.zIndex||1}),onMousedown:t=>Y(e),onClick:o[3]||(o[3]=t=>!p.value)},[p.value?(i(),r("div",{key:0,class:"absolute -top-14 left-0 w-full bg-white shadow-md rounded p-2 flex gap-2 items-center z-50",onMousedown:o[2]||(o[2]=y(()=>{},["stop"]))},[s("div",{class:"px-2 py-1 bg-purple-600 text-white text-xs cursor-move rounded",onMousedown:y(t=>X(t,e.cms_id),["stop"])}," Drag ",40,ie),m(s("select",{"onUpdate:modelValue":t=>e.component_type=t,class:"border rounded px-1 text-sm",onChange:t=>x(e)},[...o[5]||(o[5]=[oe('<option value="text">Text</option><option value="image">Image</option><option value="image_link">Image Link</option><option value="video">Video</option><option value="file">File</option>',5)])],40,se),[[ee,e.component_type]]),m(s("input",{type:"text","onUpdate:modelValue":t=>e.page_route_link_belong=t,class:"border rounded px-1 text-sm w-32",placeholder:"page1"},null,8,ae),[[g,e.page_route_link_belong]]),e.component_type==="image"||e.component_type==="file"?(i(),r("input",{key:0,type:"file",onChange:t=>D(t,e.cms_id)},null,40,ue)):u("",!0),e.component_type==="image_link"?m((i(),r("input",{key:1,type:"url","onUpdate:modelValue":t=>e.file_url[0].url=t,class:"border rounded px-1 w-40",placeholder:"Image URL",onFocus:t=>x(e)},null,40,ce)),[[g,e.file_url[0].url]]):u("",!0),e.component_type==="video"?(i(),r("input",{key:2,type:"url",onInput:t=>P(t,e.cms_id),class:"border rounded px-1 w-40",placeholder:"YouTube URL"},null,40,pe)):u("",!0)],32)):u("",!0),s("div",de,[e.component_type==="text"?m((i(),r("textarea",{key:0,"onUpdate:modelValue":t=>e.component_content=t,class:"w-full h-full whitespace-pre-wrap"},`        
2        `,8,me)),[[g,e.component_content]]):u("",!0),["image","image_link"].includes(e.component_type)&&e.file_url.length&&e.file_url[0].url?(i(),r("img",{key:1,src:e.f

2ile_url[0].url,class:"w-full h-full object-contain"},null,8,_e)):u("",!0),e.component_type==="video"&&e.component_properties.videoEmbed?(i(),r("iframe",{key:2,src:e.component_properties.videoEmbed,class:"w-full h-64",frameborder:"0",allowfullscreen:""},null,8,fe)):u("",!0),e.component_type==="file"&&e.file_url.length&&e.file_url[0].url?(i(),r("iframe",{key:3,src:e.file_url[0].url,class:"w-full h-full"},null,8,ve)):u("",!0)]),p.value?(i(),r("div",{key:1,class:"absolute bottom-0 right-0 w-4 h-4 bg-purple-600 cursor-se-resize rounded-br",onMousedown:y(t=>j(t,e.cms_id),["stop"])},null,40,he)):u("",!0)],44,re))),128))]))}};export{ye as default};