From 90fad74e3a63028a3ade54aba495b6f2ded69074 Mon Sep 17 00:00:00 2001 From: brian Date: Tue, 24 Sep 2024 21:46:14 -0700 Subject: [PATCH] add minified html/css files --- app/static/css/create_event.min.css | 1 + app/static/css/event.min.css | 1 + app/static/js/create.min.js | 1 + app/static/js/event.min.js | 1 + app/templates/event/create.html | 4 ++-- app/templates/event/event.html | 4 ++-- 6 files changed, 8 insertions(+), 4 deletions(-) create mode 100644 app/static/css/create_event.min.css create mode 100644 app/static/css/event.min.css create mode 100644 app/static/js/create.min.js create mode 100644 app/static/js/event.min.js diff --git a/app/static/css/create_event.min.css b/app/static/css/create_event.min.css new file mode 100644 index 0000000..881a52d --- /dev/null +++ b/app/static/css/create_event.min.css @@ -0,0 +1 @@ +button,button:focus{outline:0}#cancel,#submit{font-size:20px;padding:16px}#planmeets,.day li.selected-day{font-weight:900}#cancel,input,select{background-color:var(--background-color)}:root{--primary-color:#000000;--secondary-color:#5c656e;--accent-color:#3c4bd3;--border-color:#dddddd;--background-color:#ffffff}*{margin:0;padding:0}a{text-decoration:none;display:block}body{font-family:"DM Sans",sans-serif;font-size:20px}button{background:0 0;border:none;cursor:pointer}ul{list-style:none;flex-wrap:wrap;display:flex;text-align:center}h1{font-size:28px;font-weight:700}input,select,select option{color:var(--secondary-color);font-size:16px}.calendar div img,label img{width:24px;height:24px;margin-right:8px}.calendar-nav button img{width:24px;height:24px}.day li,.week li{width:calc(100% / 7);padding:1rem 0}.day li.not-current-month,input[type=text]{color:var(--secondary-color)}.day li.current-month{color:var(--primary-color)}#cancel,#planmeets,.day li.selected-day{color:var(--accent-color)}.day li:not(.not-current-month):hover{font-weight:900;cursor:pointer;color:var(--accent-color)}.calendar header{display:flex;justify-content:space-between}.calendar-nav,.timezone-container{display:flex}.calendar header h1{display:flex;justify-content:center;align-items:center;color:var(--secondary-color);font-size:18px;font-weight:400}.calendar header div,.form-fields label{display:flex;align-items:center}.calendar-nav button{display:flex;justify-content:center;align-items:center}.timezone-container div{flex-grow:1}.calendar-nav button:first-child{margin-right:8px}#submit{background-color:var(--accent-color);color:var(--background-color);border-radius:4px}#cancel{border:1px solid var(--accent-color);border-radius:4px}#to{display:flex;justify-content:center;align-items:center;color:var(--secondary-color)}#form-container button,#form-container div,#planmeets,.calendar header{margin-top:1rem;margin-bottom:1rem}#create-meeting{margin-top:2.5rem;margin-bottom:2.5rem}#form-container{display:flex;flex-direction:column}#planmeets{font-size:40px}input,select{border:1px solid var(--border-color);border-radius:1px;padding:8px;width:100%;margin-top:.5rem;box-sizing:border-box}select option{padding:10px}.container{width:100%;margin-left:auto;margin-right:auto;padding-left:.5rem;padding-right:.5rem}@media (min-width:475px){.container{max-width:475px}#create-meeting{display:block}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}#create-meeting{display:flex}#form-container{width:35%;margin-right:4rem}.calendar-container{width:65%}}@media (min-width:1280px){.container{max-width:1280px}} \ No newline at end of file diff --git a/app/static/css/event.min.css b/app/static/css/event.min.css new file mode 100644 index 0000000..b5d650f --- /dev/null +++ b/app/static/css/event.min.css @@ -0,0 +1 @@ +button,button:focus{outline:0}#display-times,.filler{min-width:55px;max-width:55px}input,select{background-color:var(--background-color);box-sizing:border-box;color:var(--secondary-color)}.available-time,input,select{box-sizing:border-box}#available div:first-child,#display-participants p,#signin p,#unavailable div:first-child,.available-day div:last-child,.meeting-info-container div:first-child div:last-child,.meeting-info-container div:nth-child(2) div:last-child,input,input[type=text],select,select option{color:var(--secondary-color)}:root{--primary-color:#000000;--secondary-color:#5c656e;--accent-color:#3c4bd3;--border-color:#dddddd;--background-color:#ffffff}*{margin:0;padding:0}a{text-decoration:none;display:block}body{font-family:"DM Sans",sans-serif;font-size:20px}button{background:0 0;border:none;cursor:pointer}#signin button,.legend-key{border-radius:4px}h1{font-size:28px;font-weight:700}#planmeets{font-size:40px;font-weight:900;color:var(--accent-color);margin-top:1rem;margin-bottom:1rem}#available-days,#available-times,#display-participants div,#display-times div,#edit-main-content,#main-content,#time-container,#view-main-content,.available-day,.available-time-col{display:flex}#display-times div,.filler{width:80px;height:30px}#signin button,input{width:200px;padding:8px}.available-day{width:55px;height:fit-content}.available-time{border-right:1px solid #000;border-bottom:1px solid #000;width:55px;height:30px}#available,#display-times,#main-content,#unavailable,#view-main-content,.available-day,.available-time-col{flex-direction:column}#display-times div{align-items:center;font-size:12px;font-weight:400}#signin button,input,select,select option{font-size:16px}.hide-display-participants{display:none}.highlight-time,.some-participants{background-color:#949ce7}#signin button,.all-participants{background-color:var(--accent-color)}.most-participants{background-color:#636fdc}img{width:24px;height:24px;margin-right:8px}#edit-main-content div h1,#signin label,.meeting-info-container div div,.meeting-info-timezone label{display:flex;align-items:center;margin-top:1rem;margin-bottom:1rem}#main-content,#signin,.meeting-info-container{margin-top:2.5rem;margin-bottom:2.5rem}#signin button,.legend div{color:var(--background-color)}#edit-main-content #available-days .available-day div,#view-main-content #available-days .available-day div{display:flex;justify-content:center;align-items:center;font-size:6px}#signin div{display:flex;height:40px}#signin p{font-size:14px}#main-content section{margin-bottom:2.5rem}#display-participants h1,#main-content section div h1{font-size:20px;font-weight:400;margin-top:1rem;margin-bottom:1rem}#display-participants #available div,#display-participants #unavailable div{margin-top:2px;margin-bottom:2px;font-size:14px;white-space:nowrap}#display-participants div div:first-child{margin-right:1rem}#edit-main-content #available-times div div{cursor:grab}#edit-main-content div,#main-content div,#view-main-content{width:100%}.filler{height:fit-content}#available-days{height:fit-content;margin-top:8px;margin-bottom:8px}#view-main-content div h1{white-space:nowrap;display:flex;justify-content:space-between;align-items:center}.legend{display:flex;justify-content:flex-end;gap:10px;font-size:14px}.legend div{display:flex;justify-content:center;align-items:center}.legend-key{padding:4px;max-width:2.5rem;max-height:2.5rem}input{border:1px solid var(--border-color);border-radius:1px}select{border:1px solid var(--border-color);border-radius:1px;padding:8px;width:100%}select option{padding:10px}.container{width:100%;margin-left:auto;margin-right:auto;padding-left:.5rem;padding-right:.5rem}@media (min-width:475px){.container{max-width:475px}#edit-main-content #available-days .available-day div,#view-main-content #available-days .available-day div{font-size:8px}}@media (min-width:640px){.container{max-width:640px}#display-times div{font-size:14px}#display-times,.filler{min-width:80px;max-width:80px}#edit-main-content #available-days .available-day div,#view-main-content #available-days .available-day div{font-size:12px}}@media (min-width:768px){.container{max-width:768px}#display-times div{font-size:16px}#edit-main-content #available-days .available-day div{font-size:14px}}@media (min-width:1024px){.container{max-width:1024px}.meeting-info-container{display:flex;flex-direction:row;justify-content:space-between}.meeting-info-container div:first-child div:last-child{width:300px}.meeting-info-container div:nth-child(2) div:last-child{width:400px}#view-main-content #available-days .available-day div{font-size:12px}#view-main-content{margin-right:2rem;width:100%;min-width:70%;max-width:70%}#display-participants{width:100%}#everyone-availability{display:flex}}@media (min-width:1280px){.container{max-width:1280px}.meeting-info-container div:first-child div:last-child{width:400px}.meeting-info-container div:nth-child(2) div:last-child{width:500px}} \ No newline at end of file diff --git a/app/static/js/create.min.js b/app/static/js/create.min.js new file mode 100644 index 0000000..11050cd --- /dev/null +++ b/app/static/js/create.min.js @@ -0,0 +1 @@ +const selectedDays={};function handleCalendar(){let e={1:"January",2:"February",3:"March",4:"April",5:"May",6:"June",7:"July",8:"August",9:"September",10:"October",11:"November",12:"December"},t=document.querySelector(".day"),n=document.querySelector(".calendar header span"),a=new Date,r=a.getFullYear(),l=a.getMonth()+1;function o(){let a=new Date(r,l-1,0),o=new Date(r,l,0).getDate(),s=new Date(a);s.setDate(s.getDate()-a.getDay()),lastSundayPrevMonth=s.getDate(),a=a.getDate(),n.textContent=e[l]+" "+r;for(let c=lastSundayPrevMonth;c<=a;c++){let d=document.createElement("li");d.classList.add("not-current-month"),d.textContent=c,t.appendChild(d)}for(let i=1;i<=o;i++){let{formatKey:u,formatValue:y}=f(l,i,r),m=document.createElement("li");m.classList.add("current-month"),m.textContent=i,m.id=u,selectedDays.hasOwnProperty(u)&&m.classList.add("selected-day"),m.addEventListener("click",e=>{if(e.target.classList.toggle("selected-day")){if(14===Object.keys(selectedDays).length)return e.target.classList.remove("selected-day"),alert("You can only select up to 14 days.");selectedDays[u]=y}else delete selectedDays[u]}),t.appendChild(m)}for(let h=1;h<42-o-(a-lastSundayPrevMonth);h++){let g=document.createElement("li");g.classList.add("not-current-month"),g.textContent=h,t.appendChild(g)}function f(t,n,a){let r=new Date(a,t-1,n),l=e[t],o=r.toLocaleDateString("en-US",{weekday:"long"});return{formatKey:`${t}-${n}-${a}`,formatValue:{month:t,day:n,dayLong:o,monthLong:l,year:a}}}}document.querySelectorAll(".calendar-nav button").forEach(e=>{e.addEventListener("click",e=>{e.preventDefault(),"prev"===e.target.id?(1===l?(l=12,r-=1):l-=1,a=new Date(r,l-1)):(12===l?(l=1,r+=1):l+=1,a=new Date(r,l-1)),t.replaceChildren(),o()})}),o()}function handleFormSubmit(){document.querySelector("form").addEventListener("submit",async e=>(e.preventDefault(),0===Object.entries(selectedDays).length)?alert("Meeting days cannot be empty."):e.srcElement[0].value.length>=61?alert("Meeting name cannot be over 60 characters."):e.srcElement[1].value.length>=256?alert("Meeting description cannot be over 255 characters."):void handleRequest(e)),document.querySelector("#cancel").addEventListener("click",e=>{e.preventDefault(),window.location.reload()})}async function handleRequest(e){let t=new FormData(e.target),n=sortDates(),a={};t.forEach((e,t)=>{a[t]=e}),a.selectedDays=n;try{let r=await fetch("/api/event/create",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(a)});if(!r.ok)throw Error(`HTTP error! Status: ${r.status}`);let l=await r.json();l.redirect_url&&(window.location.href=l.redirect_url)}catch(o){console.error(o)}}function sortDates(){let e=Object.entries(selectedDays);return e.sort((e,t)=>{let n=e[1],a=t[1];return n.year!==a.year?n.year-a.year:n.month!==a.month?n.month-a.month:n.day-a.day}),Object.fromEntries(e)}function loadTimezone(){let e=Intl.DateTimeFormat().resolvedOptions().timeZone,t=document.getElementById("timezone");for(let n=0;n{a(t.value),updateDisplayTime(i())})}function updateDisplayTime(e){let t=document.querySelectorAll("#display-times div");for(let i=0;i<=meeting.times.length-1;i++){let a=n(meeting.times[i],e).split(", ")[1];t[i].textContent=a,user&&(t[i+meeting.times.length].textContent=a)}function n(e,t){let i=new Date().toISOString().split("T")[0],a=`${i}T${e}:00Z`,n=new Date(a);return new Intl.DateTimeFormat("en-US",{timeZone:t,dateStyle:"short",timeStyle:"short"}).format(n)}}function handleGrid(){return function e(t){let i=Object.entries(meeting.days),a=document.querySelector(`#${t} #available-days`),n=document.querySelector(`#${t} #available-times`),l=document.querySelector(`#${t} #display-times`);for(let r of meeting.times){let d=document.createElement("div");d.id=d.textContent=r,l.appendChild(d)}for(let[s,[o,c]]of i.entries()){let p=document.createElement("div"),m=document.createElement("div"),u=document.createElement("div");m.textContent=`${c.monthLong.substring(0,3)} ${c.day}`,u.textContent=`${c.dayLong.substring(0,3)}`,p.className="available-day",p.append(m,u),a.appendChild(p);let g=document.createElement("div");for(let[h,v]of(g.className="available-time-col",meeting.times.entries())){let y=document.createElement("div"),f=(s+1).toString(),b=(h+1).toString();y.id=o,y.className="available-time",y.setAttribute("data-col",f),y.setAttribute("data-row",b),y.addEventListener("dragstart",e=>{e.preventDefault()}),"edit-main-content"===t?g.appendChild(initHighlight(y,f,b)):"view-main-content"===t&&g.appendChild(handleDisplayAvailability(y,f,b))}n.appendChild(g)}}}function updateDisplayAvailability(){let e=document.querySelectorAll("#view-main-content .available-time-col .available-time");for(let t of e){t.classList="available-time";let i=t.getAttribute("data-col"),a=t.getAttribute("data-row");handleDisplayAvailability(t,i,a)}}function handleDisplayAvailability(e,t,i){let a=Object.entries(participants).length,n=0;for(let[l,r]of Object.entries(participants))r[e.id]?.find(({col:e,row:a})=>t===e&&i===a)&&(n+=1);return a>0&&n===a?e.classList.add("all-participants"):n>=Math.ceil(.5*a)&&n=Math.ceil(.01*a)&&nn===e&&a===t)?(u+=1,d.appendChild(v)):s.appendChild(v)}l.textContent=`${u}/${c} Available`,r.textContent=function e(t){let[i,a,n]=t.split("-").map(Number),l=new Date(n,i-1,a),r=new Intl.DateTimeFormat("en-US",{weekday:"short",day:"2-digit",month:"short",year:"numeric"}).format(l),d=r.split(",");return`${d[0]}, ${d[1]} ${d[2]}`}(i.id),o.classList.remove("hide-display-participants")},mouseleave:function e(t){let i=document.querySelector("#display-participants");i.classList.add("hide-display-participants")}}}function handleSignIn(){document.getElementById("signin").addEventListener("submit",async e=>{e.preventDefault();let a=document.getElementById("username");if(""===a.value)return alert("Username cannot be empty.");if(a.value.length>=21)return alert("Username cannot be over 20 characters.");let n=await handleRequest("/event/signin",{eventId,username:a.value});n.ok&&(user=a.value,201===n.status&&(participants[user]={}),document.getElementById("signin").remove(),function e(){let t=document.createElement("div"),i=document.createElement("h1"),a=document.createElement("img"),n=document.createTextNode("My Availability");a.src="static/svg/calendar.svg",a.alt="Calendar Icon",i.appendChild(a),i.appendChild(n);let l=document.createElement("div");l.id="available-days";let r=document.createElement("div");r.className="filler",l.appendChild(r);let d=document.createElement("div");d.id="time-container";let s=document.createElement("div");s.id="display-times";let o=document.createElement("div");o.id="available-times",d.appendChild(s),d.appendChild(o);let c=document.createElement("section");c.id="edit-main-content",t.appendChild(i),t.appendChild(l),t.appendChild(d),c.appendChild(t);let p=document.getElementById("main-content"),m=document.getElementById("everyone-availability");p.insertBefore(c,m)}(),renderGrid("edit-main-content"),setupGridListeners("#edit-main-content",{mousedown:function e(i){let a=i.target,n=i.target.getAttribute("data-row"),l=i.target.getAttribute("data-col");t("down",a,l,n)},mouseup:function e(i){let a=i.target,n=i.target.getAttribute("data-row"),l=i.target.getAttribute("data-col");t("up",a,l,n),handleHighlight(),debouncedHandleUpdateReq()}}),updateDisplayTime(i()))})}async function handleRequest(e,t){try{let i=await fetch(`/api${e}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)});if(!i.ok)throw Error(`HTTP error! Status: ${i.status}`);return i}catch(a){console.error(a)}}function setupGridListeners(e,t){document.querySelectorAll(`${e} #available-times div`).forEach(e=>{if(!e.classList.contains("available-time-col"))for(let[i,a]of Object.entries(t))e.addEventListener(i,a)})}function selectionState(){let e={down:{element:void 0,col:void 0,row:void 0},up:{element:void 0,col:void 0,row:void 0}};return{select:e,setSelection:function t(i,a,n,l){("down"===i||"up"===i)&&(e[i]={element:a,col:n,row:l})}}}function timezoneState(){let e="";function t(t){e=t}return{getTimezone:()=>e,setTimezone:t}}function initHighlight(e,t,i){if(!participants[user][e.id]||!participants[user][e.id].length)return e;for(let a of participants[user][e.id])a.col===t&&a.row===i&&e.classList.add("highlight-time");return e}function handleHighlight(){let{element:t,col:i,row:a}=e.down,{col:n,row:l}=e.up,r=Math.min(i,n),d=Math.max(i,n),s=Math.min(a,l),o=Math.max(a,l),c=t.classList.contains("highlight-time"),p=document.querySelectorAll("#edit-main-content #available-times div"),m=meeting.times.length;for(let u=r;u<=d;u++){let g=u*(m+1)-m,h=g+s-1,v=g+o-1;for(let y=h;y<=v;y++)f(c,p[y]),updateDisplayAvailability()}function f(e,t){let i=t.getAttribute("data-row"),a=t.getAttribute("data-col");if(e){t.classList.remove("highlight-time");let n=participants[user][t.id].filter(e=>e.col!==a||e.row!==i);participants[user][t.id]=n}else t.classList.add("highlight-time"),participants[user][t.id]?participants[user][t.id].push({col:a,row:i}):participants[user][t.id]=[{col:a,row:i}]}}async function handleUpdateReq(){try{let e=await handleRequest("/event/update",{username:user,eventId:eventId,selectedTimes:participants[user]});e.ok||(alert("Server Error, Reloading Page."),window.location.reload())}catch(t){console.error(t),alert("Server Error, Reloading Page."),window.location.reload()}}function debounce(e,t){let i;return(...a)=>{clearTimeout(i),i=setTimeout(()=>{e(...a)},t)}}window.onload=function(){renderGrid("view-main-content"),setupGridListeners("#view-main-content",handleDisplayParticipants()),loadTimezone(),handleSignIn()}; \ No newline at end of file diff --git a/app/templates/event/create.html b/app/templates/event/create.html index c49a19c..b30ef54 100644 --- a/app/templates/event/create.html +++ b/app/templates/event/create.html @@ -10,7 +10,7 @@ /> @@ -141,7 +141,7 @@

When are you available?

diff --git a/app/templates/event/event.html b/app/templates/event/event.html index 243211f..f78006f 100644 --- a/app/templates/event/event.html +++ b/app/templates/event/event.html @@ -10,7 +10,7 @@ /> @@ -112,7 +112,7 @@