From ddb0e75356f2e53d95352965c6ebea184aa12525 Mon Sep 17 00:00:00 2001
From: Tyler Brown <tylerbrown10704@gmail.com>
Date: Wed, 25 Oct 2023 16:23:02 -0400
Subject: [PATCH] css stuff

---
 class_registration_app/src/assets/main.css    |   6 +-
 .../src/components/ScheduleView.vue           | 404 +++++++++++++-----
 class_registration_app/src/main.ts            |   4 +-
 3 files changed, 303 insertions(+), 111 deletions(-)

diff --git a/class_registration_app/src/assets/main.css b/class_registration_app/src/assets/main.css
index ae11a22..0085fb8 100644
--- a/class_registration_app/src/assets/main.css
+++ b/class_registration_app/src/assets/main.css
@@ -23,7 +23,7 @@ a,
     cursor:pointer;
   }
 }
-
+/*
 @media (min-width: 1024px) {
   body {
     display: flex;
@@ -33,10 +33,10 @@ a,
   #app {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
+    padding: 0 auto;
   }
 }
-
+*/
 .btn-97,
 .btn-97 *,
 .btn-97 :after,
diff --git a/class_registration_app/src/components/ScheduleView.vue b/class_registration_app/src/components/ScheduleView.vue
index f64990a..4711f2b 100644
--- a/class_registration_app/src/components/ScheduleView.vue
+++ b/class_registration_app/src/components/ScheduleView.vue
@@ -1,116 +1,308 @@
-<script setup lang="ts">
-</script>
-
 <template>
     <section>
-    <div class="month">
-        <ul>
-          <li class="prev">&#10094;</li>
-          <li class="next">&#10095;</li>
-          <li>October<br><span style="font-size:18px">2023</span></li>
-        </ul>
+      <div id="head">Uconn</div>
+      <div id=week>
+          <div id=time-column>Time</div>
+          <div class="day">M</div>
+          <div class="day">T</div>
+          <div class="day">W</div>
+          <div class="day">Th</div>
+          <div class="day">F</div>
       </div>
-      
-      <ul class="weekdays">
-        <li>Mo</li>
-        <li>Tu</li>
-        <li>We</li>
-        <li>Th</li>
-        <li>Fr</li>
-        <li>Sa</li>
-        <li>Su</li>
-      </ul>
-      
-      <ul class="days">
-        <li><span class="active">1</span></li>
-        <li>2</li>
-        <li>3</li>
-        <li>4</li>
-        <li>5</li>
-        <li>6</li>
-        <li>7</li>
-      </ul>
-      
+      <div id="cur"></div>
     </section>
 </template>
 
 <style scoped>
-section{
-    position: fixed;
-    height: 100vh;
-    width: 100vw;
-    top: 0;
-    left: 0;
+
+#head{
+  margin: 0 auto 10px;
+  width: 90%;
+  height: auto;
+  font-size: 50px;
+  text-align: center;
+  background-color: #0f1938;
+  color: #ffffff;
+}
+
+#week{
+  box-sizing: border-box;
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0 auto;
+  width: 70vw;
+  display: grid;
+  text-align: center;
+  grid-template-columns: [time] 15% [first] 17% [line2] 17% [line3] 17% [col4-start] 17% [five] 17% [end];
+  grid-template-rows: [day] 40px repeat(18,30px)
+}
+
+.class{
+  background-color: #dfd;
+}
+
+.day{
+  background-color: #888;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid;
 }
 
-/* Month header */
-.month {
-    padding: 10px 25px;
-    width: 100%;
-    background: navy;
-    text-align: center;
-  }
-  
-  /* Month list */
-  .month ul {
-    margin: 0;
+.time{
+  background-color: #888;
+  font-size: 15px;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid;
+}
+
+#time-column{
+  vertical-align: middle;
+  background-color: #888;
+  color: black;
+  font-size: 20px;
+  text-align: center;
+}
+
+#cur{
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 10px auto;
+  width: 70%;
+  height: auto;
+  padding: 10px;
+  background-color: #bfb;
+}
+#app{
     padding: 0;
-  }
-  
-  .month ul li {
-    color: white;
-    font-size: 20px;
-    text-transform: uppercase;
-    letter-spacing: 3px;
-  }
-  
-  /* Previous button inside month header */
-  .month .prev {
-    float: left;
-    padding-top: 10px;
-  }
-  
-  /* Next button */
-  .month .next {
-    float: right;
-    padding-top: 10px;
-  }
-  
-  /* Weekdays (Mon-Sun) */
-  .weekdays {
-    margin: 0;
-    padding: 10px 0;
-    background-color:#ddd;
-  }
-  
-  .weekdays li {
-    display: inline-block;
-    width: 13.6%;
-    color: #666;
-    text-align: center;
-  }
-  
-  /* Days (1-31) */
-  .days {
-    padding: 10px 0;
-    background: #eee;
-    margin: 0;
-  }
-  
-  .days li {
-    list-style-type: none;
-    display: inline-block;
-    width: 13.6%;
-    text-align: center;
-    margin-bottom: 5px;
-    font-size:12px;
-    color: #777;
-  }
-  
-  /* Highlight the "current" day */
-  .days li .active {
-    padding: 5px;
-    background: #1abc9c;
-    color: white !important
-  }
-</style>
\ No newline at end of file
+}
+</style>
+
+<script setup lang="js">
+function all(){
+const grid = document.getElementById('week');
+const current = document.getElementById('cur');
+
+const time_times = ['8:00am-8:30am','8:30am-9:00am','9:00am-9:30am','9:30am-10:00am',
+'10:00am-10:30am','10:30am-11:00am','11:00am-11:30am','11:30am-12:00pm',
+'12:00pm-12:30pm','12:30pm-1:00pm','1:00pm-1:30pm','1:30pm-2:00pm',
+'2:00pm-2:30pm','2:30pm-3:00pm','3:00pm-3:30pm','3:30pm-4:00pm',
+'4:00pm-4:30pm','4:30pm-5:00pm']
+
+const class_slots = [
+    [[0,2,4],2], //1
+    [[10,12,14],2,"MWF"],
+    [[20,22,24],2,"MWF"],
+    [[30,32,34],2,"MWF"],
+    [[40,42,44],2,"MWF"],
+    [[50,52,54],2,"MWF"], //6
+    [[60,62,64],2,"MWF"],
+    [[70,72,74],2,"MWF"],
+    [[80,82,84],2,"MWF"],
+    [[1,3],3,"TTh"],
+    [[16,18],3,"TTh"], //11
+    [[31,33],3,"TTh"],
+    [[46,48],3,"TTh"],
+    [[61,63],3,"TTh"],
+    [[76,78],3,"TTh"],
+    [[0],4,"M"], //16
+    [[20],4,"M"],
+    [[40],4,"M"],
+    [[60],4,"M"],
+    [[2],4,"W"],
+    [[22],4,"W"], //21
+    [[42],4,"W"],
+    [[62],4,"W"],
+    [[4],4,"F"],
+    [[24],4,"F"],
+    [[44],4,"F"], //26
+    [[64],4,"F"]
+]
+
+const colors = ['rgb(120,255,150)', 'rgb(120,150,255)','rgb(255,120,150)','rgb(255,255,120)']
+
+for (var i = 0; i <18;i++){
+
+    let time = document.createElement('div');
+    time.classList.add('time');
+    time.innerHTML = time_times[i];
+    grid.appendChild(time);
+
+    for (var j=0; j<5; j++){
+        let child = document.createElement('div');
+        child.classList.add('class')
+        child.id = 'slot' + (5*i+j)
+        grid.appendChild(child);
+    }
+}
+
+const classes1 = [
+    {
+        "period": "2",
+        "class_name": "CSE1010",
+        "prof": "John",
+        "description": "Intro CS",
+        "room": "McHugh 101",
+        "credits": "3"
+    },
+    {
+        "period": "4",
+        "class_name": "MATH1131" ,
+        "prof": "Bob",
+        "description": "Calc 1",
+        "room": "McHugh 101",
+        "credits": "3"
+    },
+    {
+        "period": "12",
+        "class_name": "ANTH1000" ,
+        "prof": "Joey",
+        "description": "Intro Anth",
+        "room": "McHugh 101",
+        "credits": "3"
+    },
+    {
+        "period": "13",
+        "class_name": "CHEM1127",
+        "prof": "Joe",
+        "description": "Intro Chem",
+        "room": "McHugh 101",
+        "credits": "3"
+    },
+    {
+        "period": "23",
+        "class_name": "MATH1071",
+        "prof": "Billy",
+        "description": "Business Calc",
+        "room": "McHugh 101",
+        "credits": "2"
+    }
+]
+const classes2 = [
+    {
+        "period": "5",
+        "class_name": "CSE2050",
+        "prof": "Joe",
+        "description": "Data Structures",
+        "room": "McHugh 101",
+        "credits": "3"
+    },
+    {
+        "period": "13",
+        "class_name": "MATH1132",
+        "prof": "Joseph",
+        "description": "Calc 2",
+        "room": "McHugh 101",
+        "credits": "3"
+    },
+    {
+        "period": "8",
+        "class_name": "ANTH1000" ,
+        "prof": "Joey",
+        "description": "Intro Anthropology",
+        "room": "McHugh 101",
+        "credits": "3"
+    },
+    {
+        "period": "16",
+        "class_name": "COMM1000" ,
+        "prof": "Steve",
+        "description": "Intro Comm",
+        "room": "McHugh 101",
+        "credits": "2"
+    }
+]
+
+let colorct = 0
+
+function add_class_to_schedule(myClass){
+    let period = myClass.period;
+    let class_name = myClass.class_name;
+
+    let ends = [...class_slots[period-1][0]]
+
+    for(i=0;i<ends.length;i++){
+        ends[i] = ends[i] + (class_slots[period-1][1]-1)*5
+    }
+    
+    let days = class_slots[period-1][0].length;
+    
+    let times = [...class_slots[period-1][0]]
+    
+    for(i=0;i<class_slots[period-1][0].length;i++){
+        for(j=1;j<class_slots[period-1][1];j++){
+            times.push(class_slots[period-1][0][i]+5*j)
+        }
+    }
+
+    let ct = 0
+    times.forEach((slot) => {
+        let place = document.getElementById("slot"+slot)
+        place.style.backgroundColor = colors[colorct%4]
+        place.style.borderLeft = "2px solid black"
+        place.style.borderRight = "2px solid black"
+        
+        let start = class_slots[period-1][0][0] 
+        let starttime = 8+.5*Math.floor(start/5)
+        
+        let end = class_slots[period-1][0][0] + 5*class_slots[period-1][1]
+        let endtime = 8+.5*Math.floor(end/5)-.25
+
+        let timestring = toTime(starttime) + "-" + toTime(endtime);
+
+        place.setAttribute("name",myClass.class_name)
+        place.setAttribute("days",class_slots[period-1][2])
+        place.setAttribute("prof",myClass.prof)
+        place.setAttribute("description",myClass.description)
+        place.setAttribute("time",timestring)
+        place.setAttribute("credits",myClass.credits)
+        place.setAttribute("room",myClass.room)
+
+
+        if(ct<days){
+            place.style.borderTop = "2px solid black"
+            place.innerText = class_name
+        }
+        if(ends.includes(slot)){
+            place.style.borderBottom = "2px solid black"
+            place.innerHTML = timestring   
+        }
+        place.addEventListener("click", (event) => {
+            let t = event.target
+            current.innerHTML = "";
+
+            current.innerHTML += `<h4>Class Name: ${t.getAttribute("name")}</h4>`
+            current.innerHTML += `<h4>Description: ${t.getAttribute("description")}</h4>`
+            current.innerHTML += `<h4>Time: ${t.getAttribute("time") + " " + t.getAttribute("days")}</h4>`
+            current.innerHTML += `<h4>Professor:  ${t.getAttribute("prof")}</h4>`
+            current.innerHTML += `<h4>Room: ${t.getAttribute("room")}</h4>`
+        });
+        ct++;
+    })
+    colorct+=1;
+}
+
+function toTime(time){
+    let timestring = ""
+    if(time%1==0){
+        timestring = (time-1)%12+1 + ":00"
+    }
+    else{
+        timestring = Math.floor((time-1)%12 + 1).toString() + ":" + 60*(time%1)
+    }
+
+    if (time<12){
+        timestring += "am"
+    }
+    else{
+        timestring += "pm"
+    }
+    return timestring
+}
+
+classes1.forEach((element) => {add_class_to_schedule(element)})
+}
+setTimeout(all,100) 
+</script>
+
+
+
+
diff --git a/class_registration_app/src/main.ts b/class_registration_app/src/main.ts
index 4b1559f..cb3fecf 100644
--- a/class_registration_app/src/main.ts
+++ b/class_registration_app/src/main.ts
@@ -7,8 +7,8 @@ import App from './App.vue'
 import router from './router'
 
 import { Amplify, Auth } from "aws-amplify";
-import awsconfig from './aws-exports.js'; 
-Amplify.configure(awsconfig);
+//import awsconfig from './aws-exports.js'; 
+//Amplify.configure(awsconfig);
 
 const app = createApp(App)