deconstructing class

This commit is contained in:
sghsri
2019-10-27 10:20:21 -05:00
parent 8e4e1a3ecd
commit 05623b947c
5 changed files with 245 additions and 250 deletions

BIN
.DS_Store vendored

Binary file not shown.

View File

@@ -133,11 +133,23 @@
cursor: pointer;
}
.topbuttons .matbut {
.topbuttons .material-button {
display: inline-block;
}
.matbut {
.rmp-button {
}
.ecis-button {
}
.textbook-button{
}
.material-button {
border: none;
outline: none;
cursor: pointer;
@@ -149,14 +161,11 @@
font-style: bold;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
background: #ff9800;
}
.matbut {
position: relative;
overflow: hidden;
}
.matbut:after {
.material-button:after {
content: "";
position: absolute;
top: 50%;
@@ -187,7 +196,7 @@
}
}
.matbut:focus:not(:active)::after {
.material-button:focus:not(:active)::after {
animation: ripple 1s ease-out;
}
@@ -271,4 +280,4 @@
bottom: 0;
opacity: 0;
}
}
}

View File

@@ -1,194 +1,185 @@
class Template {
static Main = class Main {
static modal() {
return `<div class=modal id=myModal>
<div class=modal-content>
<span class=close>×</span>
class Template{}
Template.Main = class {
static modal() {
return `<div class=modal id=myModal>
<div class=modal-content>
<span class=close>×</span>
<div class=card>
<div class=cardcontainer>
<h2 class=title id="title">Computer Fluency (C S 302)</h2>
<h2 class=profname id="profname">with Bruce Porter</h2>
<div id="topbuttons" class=topbuttons>
<button class=material-button id="rateMyProf" style="background: #4CAF50;"> RMP </button>
<button class=material-button id="eCIS" style="background: #CDDC39;"> eCIS </button>
<button class=material-button id="textbook" style="background: #FFC107;"> Textbook </button>
<button class=material-button id="Syllabi"> Past Syllabi </button>
<button class=material-button id="saveCourse" value="add" style="background: #F44336;"> Save Course +</button>
</div>
</div>
</div>
<div class=card>
<div class=cardcontainer>
<h2 class=title id="title">Computer Fluency (C S 302)</h2>
<h2 class=profname id="profname">with Bruce Porter</h2>
<div id="topbuttons" class=topbuttons>
<button class=matbut id="rateMyProf" style="background: #4CAF50;"> RMP </button>
<button class=matbut id="eCIS" style="background: #CDDC39;"> eCIS </button>
<button class=matbut id="textbook" style="background: #FFC107;"> Textbook </button>
<button class=matbut id="Syllabi"> Past Syllabi </button>
<button class=matbut id="saveCourse" value="add" style="background: #F44336;"> Save Course +</button>
</div>
</div>
</div>
<div class=card>
<div class=cardcontainer style="">
<div class="chartloader">
<div class="loader" id='descload'></div>
</div>
<ul class=description id="description" style="list-style-type:disc"></ul>
</div>
</div>
<div class=card style='text-align:center'>
<select id="semesters" style='text-align-last:center;color:#666666;fill:#666666;'>
</select>
<div class=cardcontainer style="">
<div class="chartloader">
<div class="loader" id='chartload'></div>
</div>
<div id="chartcontainer" class=cardcontainer>
<div id=chart></div>
<div class="loader" id='descload'></div>
</div>
<ul class=description id="description" style="list-style-type:disc"></ul>
</div>
</div>
</div>`
}
static extension_button() {
return `<td data-th="Plus"><input type="image" class="distButton" id="distButton" width="20" height="20" src='${chrome.extension.getURL('images/disticon.png')}'/></td>`
}
}
static Catalog = class Catalog {
static loading() {
return `<div style="text-align:center">
<div class="loader" id='loader'></div>
<br>
<h1 id="nextlabel"style="color: #FF9800;display:none;">Loading Courses</h1>
<h1 id="retrylabel"style="color: #F44336;display:none;">Failed to Load Courses</h1>
<br>
<button class=matbut id="retry" style="background: #F44336;display:none;">Retry</button>
</div>`
}
}
static UTPlanner = class UTPlanner{
static modal(){
return `<div class=modal id=myModal>
<div class=modal-content>
<span class=close>×</span>
<div class=card>
<div class=cardcontainer>
<h2 class=title id="title">Computer Fluency (C S 302)</h2>
<h2 class=profname id="profname" style="margin-bottom:0px;">with Bruce Porter</h2>
<div id="topbuttons" class=topbuttons>
<button class=matbut id="moreInfo" style="background: #2196F3;"> More Info </button>
<button class=matbut id="textbook" style="background: #FFC107;"> Textbook </button>
<button class=matbut id="Syllabi"> Past Syllabi </button>
<button class=matbut id="saveCourse" value="add" style="background: #F44336;opacity:.4;"> Unable to Save</button>
</div>
</div>
<div class=card style='text-align:center'>
<select id="semesters" style='text-align-last:center;color:#666666;fill:#666666;'>
</select>
<div class="chartloader">
<div class="loader" id='chartload'></div>
</div>
<div class=card style='text-align:center'>
<select id="semesters" style='text-align-last:center;color:#666666;fill:#666666;'>
</select>
<div class="chartloader">
<div class="loader" id='chartload'></div>
</div>
<div id="chartcontainer" class=cardcontainer>
<div id=chart></div>
</div>
<div id="chartcontainer" class=cardcontainer>
<div id=chart></div>
</div>
</div>
</div>`
}
</div>
</div>`
}
static Calendar = class Calendar {
static line(line) {
let {
days,
start_time,
end_time,
location_link,
location_full
} = line;
return `<p class='time' style='font-size:large;'>
<span style='display:inline-block;'>${days}:</span>
<span style='margin-left:10px;display:inline-block;text-align:center;'>${start_time} to ${end_time}</span>
<span style='float:right;display:inline-block;text-align:right;width: 25%;'>
<a target='_blank' style='color:#3c87a3;text-decoration:none;'href='${location_link}'>${location_full}</a>
</span>
</p>`
}
static modal() {
return `<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<div class="card">
<div id="colorStrip" style="height:10px;"></div>
<div class="cardcontainer">
<div id='header'>
<div style="display:flex;">
<h2 id="classname">Classname</h2>
</div>
<p id="prof">Prof</p>
</div>
<button id="info" class="matbut" style="font-size:medium; margin-right: auto; margin-left:auto; background: #2196F3;">More Info</button>
<button id="register" class="matbut" style="font-size:medium; margin-right: auto; margin-left:10px; background: #4CAF50;">Register</button>
<button id="remove" class="matbut" style="font-size:medium;margin:10px;background: #FF0000;">Remove</button>
</div>
</div>
</div>`
}
static extension_button() {
return `<td data-th="Plus"><input type="image" class="distButton" id="distButton" width="20" height="20" src='${chrome.extension.getURL('images/disticon.png')}'/></td>`
}
}
Template.Catalog = class {
static loading() {
return `<div style="text-align:center">
<div class="loader" id='loader'></div>
<br>
<h1 id="nextlabel"style="color: #FF9800;display:none;">Loading Courses</h1>
<h1 id="retrylabel"style="color: #F44336;display:none;">Failed to Load Courses</h1>
<br>
<button class=material-button id="retry" style="background: #F44336;display:none;">Retry</button>
</div>`
}
}
Template.UTPlanner = class {
static modal(){
return `<div class=modal id=myModal>
<div class=modal-content>
<span class=close>×</span>
<div class=card>
<div class=cardcontainer>
<h2 class=title id="title">Computer Fluency (C S 302)</h2>
<h2 class=profname id="profname" style="margin-bottom:0px;">with Bruce Porter</h2>
<div id="topbuttons" class=topbuttons>
<button class=material-button id="moreInfo" style="background: #2196F3;"> More Info </button>
<button class=material-button id="textbook" style="background: #FFC107;"> Textbook </button>
<button class=material-button id="Syllabi"> Past Syllabi </button>
<button class=material-button id="saveCourse" value="add" style="background: #F44336;opacity:.4;"> Unable to Save</button>
</div>
</div>
</div>
<div class=card style='text-align:center'>
<select id="semesters" style='text-align-last:center;color:#666666;fill:#666666;'>
</select>
<div class="chartloader">
<div class="loader" id='chartload'></div>
</div>
<div id="chartcontainer" class=cardcontainer>
<div id=chart></div>
</div>
</div>
</div>
</div>`
}
}
Template.Calendar = class {
static line(line) {
let {
days,
start_time,
end_time,
location_link,
location_full
} = line;
return `<p class='time' style='font-size:large;'>
<span style='display:inline-block;'>${days}:</span>
<span style='margin-left:10px;display:inline-block;text-align:center;'>${start_time} to ${end_time}</span>
<span style='float:right;display:inline-block;text-align:right;width: 25%;'>
<a target='_blank' style='color:#3c87a3;text-decoration:none;'href='${location_link}'>${location_full}</a>
</span>
</p>`
}
static modal() {
return `<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<div class="card">
<div id="colorStrip" style="height:10px;"></div>
<div class="cardcontainer">
<div id='header'>
<div style="display:flex;">
<h2 id="classname">Classname</h2>
</div>
<p id="prof">Prof</p>
</div>
<button id="info" class="matbut" style="font-size:medium; margin-right: auto; margin-left:auto; background: #2196F3;">More Info</button>
<button id="register" class="matbut" style="font-size:medium; margin-right: auto; margin-left:10px; background: #4CAF50;">Register</button>
<button id="remove" class="matbut" style="font-size:medium;margin:10px;background: #FF0000;">Remove</button>
</div>
</div>
</div>`
}
}
Template.Popup = class {
static list_item(i, list_tile_color, unique, department, number, profname, list_sub_color, line) {
return `<li id='${i}' class='course_list_item'>
<div class='card course_list_card'>
<div class='container' style='background:${list_tile_color}'>
<button class='copy_button' title='Copy Unique #' value='${unique}'>
<i id='copyicon' class="material-icons copy_button_icon">content_copy</i>
</button>
<h4 class='course_name_truncate_box'>
<b>${department} ${number} <span class='course_list_item_subtext'> with ${profname} (${unique})</span></b>
</h4>
<p id='arrow' class='arrow'>&#9658;</p>
</div>
</div>
<div id='moreInfo' class='course_list_item_options'>
<p style='background-color:${list_sub_color};' class='course_list_item_time_box'>${line}</p>
<div id='infoButtons' class='course_list_item_options_button_container'>
<button class='material_button course_list_item_options_buttons remove_button' id='listRemove'>Remove</button>
<button class='material_button course_list_item_options_buttons register_button' id='register'>Register</button>
<button class='material_button course_list_item_options_buttons more_info_button' id='listMoreInfo'>More Info</button>
</div>
</div>
</li>`;
}
static conflict_message(conflict_message) {
return `<p id='conflict' class='conflict_message'>${conflict_message}</>`
}
static line(line) {
let {
days,
start_time,
end_time,
location_link,
location_full
} = line;
return `<span class='time_line_days'>${days}:</span>
<span class='time_line_hours'>${start_time} to ${end_time}</span>
<span class='time_line_location'>
<a target='_blank' class= 'time_line_location_link' href='${location_link}'>${location_full}</a>
</span>
<br>`
}
}
Template.Import = class {
static button_text_default = "<span style='font-size:small'>Import to </span><b>UT Reg +<b>";
static waitlist_button_text_default = "<span style='font-size:small'>Import Waitlists to </span><b>UT Reg +<b>";
static button_success = "Courses Saved!";
static import_button() {
return `<button class='material-button' id='import' style='margin:15px 0px;'>${this.button_text_default}</button><br>`;
}
static waitlist_import_button() {
return `<button class='material-button' id='import_waitlist' style='margin:0px'>${this.waitlist_button_text_default}</button><br>`;
}
static Popup = class Popup {
static list_item(i, list_tile_color, unique, department, number, profname, list_sub_color, line) {
return `<li id='${i}' class='course_list_item'>
<div class='card course_list_card'>
<div class='container' style='background:${list_tile_color}'>
<button class='copy_button' title='Copy Unique #' value='${unique}'>
<i id='copyicon' class="material-icons copy_button_icon">content_copy</i>
</button>
<h4 class='course_name_truncate_box'>
<b>${department} ${number} <span class='course_list_item_subtext'> with ${profname} (${unique})</span></b>
</h4>
<p id='arrow' class='arrow'>&#9658;</p>
</div>
</div>
<div id='moreInfo' class='course_list_item_options'>
<p style='background-color:${list_sub_color};' class='course_list_item_time_box'>${line}</p>
<div id='infoButtons' class='course_list_item_options_button_container'>
<button class='material_button course_list_item_options_buttons remove_button' id='listRemove'>Remove</button>
<button class='material_button course_list_item_options_buttons register_button' id='register'>Register</button>
<button class='material_button course_list_item_options_buttons more_info_button' id='listMoreInfo'>More Info</button>
</div>
</div>
</li>`;
}
static conflict_message(conflict_message) {
return `<p id='conflict' class='conflict_message'>${conflict_message}</>`
}
static line(line) {
let {
days,
start_time,
end_time,
location_link,
location_full
} = line;
return `<span class='time_line_days'>${days}:</span>
<span class='time_line_hours'>${start_time} to ${end_time}</span>
<span class='time_line_location'>
<a target='_blank' class= 'time_line_location_link' href='${location_link}'>${location_full}</a>
</span>
<br>`
}
}
static Import = class Import {
static button_text_default = "<span style='font-size:small'>Import to </span><b>UT Reg +<b>";
static waitlist_button_text_default = "<span style='font-size:small'>Import Waitlists to </span><b>UT Reg +<b>";
static button_success = "Courses Saved!";
static import_button() {
return `<button class='matbut' id='import' style='margin:15px 0px;'>${this.button_text_default}</button><br>`;
}
static waitlist_import_button() {
return `<button class='matbut' id='import_waitlist' style='margin:0px'>${this.waitlist_button_text_default}</button><br>`;
}
}
}

View File

@@ -1,61 +1,56 @@
class Timing {
static fade_time = 100;
static calendar_fade_time = 100;
static button_delay = 75;
class Timing{}
Timing.fade_time = 100;
Timing.calendar_fade_time = 100;
Timing.button_delay = 75;
class Colors{}
Colors.material_colors = ['#4CAF50', '#CDDC39',
'#FFC107', '#2196F3', '#F57C00', '#9C27B0', '#FF5722', '#673AB7',
'#FF5252', '#E91E63', '#009688', '#00BCD4',
'#4E342E', '#424242', '#9E9E9E'
];
Colors.open = "#4CAF50";
Colors.waitlisted = "#FF9800";
Colors.closed = "#FF5722";
Colors.no_status = "#607D8B";
Colors.open_light = "#C8E6C9";
Colors.waitlisted_light = "#FFE0B2";
Colors.closed_light = "#FFCCBC";
Colors.no_status_light = "#CFD8DC";
Colors.highlight_conflict = "#F44336";
Colors.highlight_default = "#333333";
Colors.highlight_saved = "#4CAF50";
Colors.badge_flash = "#FF5722";
Colors.badge_default = "#bf5700";
class Export{}
Export.png_options = {
foreignObjectRendering: true,
logging: true,
removeContainer: true,
async: true,
}
class Popup {}
Popup.num_semesters = 2;
class Colors {
static material_colors = ['#4CAF50', '#CDDC39',
'#FFC107', '#2196F3', '#F57C00', '#9C27B0', '#FF5722', '#673AB7',
'#FF5252', '#E91E63', '#009688', '#00BCD4',
'#4E342E', '#424242', '#9E9E9E'
];
static open = "#4CAF50";
static waitlisted = "#FF9800";
static closed = "#FF5722";
static no_status = "#607D8B";
class Text{}
Text.emptyText = function(){
let arr = ["Doesn't Look Like Anything To Me.", "You Can't Fail Classes You're Not In.", "Pro-Tip: Don't Take O-Chem.",
"No Work Happens On PCL 5th Floor.", "Sophomore But Freshman By Credit.", "Pain is temporary, GPA is forever.",
"You've Yee'd Your Last Haw.", "lol everything is already waitlisted.", "At Least You're Not At A&M.",
`It's ${moment().format("h:mm")} and OU Still Sucks.`, 'TeXAs iS BaCK GuYZ', "'Academically Challenged'",
'Does McCombs teach Parseltongue?', 'Lets make Daddy Fenves proud.', 'Feel bad if you say Wampus.', 'No Cruce Enfrente Del Bus.',
'Midterm 1 has been Unmuted', 'Omae Wa Mou Shindeiru...', 'Bevo Bucks are the new Bitcoin', 'Subway Robber > Machete Guy'
]
let index = Math.floor(Math.random() * arr.length);
static open_light = "#C8E6C9";
static waitlisted_light = "#FFE0B2";
static closed_light = "#FFCCBC";
static no_status_light = "#CFD8DC";
static highlight_conflict = "#F44336";
static highlight_default = "#333333";
static highlight_saved = "#4CAF50";
static badge_flash = "#FF5722";
static badge_default = "#bf5700";
}
class Export {
static png_options = {
foreignObjectRendering: true,
logging: true,
removeContainer: true,
async: true,
}
}
class Popup {
static num_semesters = 2;
}
class Text {
static emptyText() {
let arr = ["Doesn't Look Like Anything To Me.", "You Can't Fail Classes You're Not In.", "Pro-Tip: Don't Take O-Chem.",
"No Work Happens On PCL 5th Floor.", "Sophomore But Freshman By Credit.", "Pain is temporary, GPA is forever.",
"You've Yee'd Your Last Haw.", "lol everything is already waitlisted.", "At Least You're Not At A&M.",
`It's ${moment().format("h:mm")} and OU Still Sucks.`, 'TeXAs iS BaCK GuYZ', "'Academically Challenged'",
'Does McCombs teach Parseltongue?', 'Lets make Daddy Fenves proud.', 'Feel bad if you say Wampus.', 'No Cruce Enfrente Del Bus.',
'Midterm 1 has been Unmuted', 'Omae Wa Mou Shindeiru...', 'Bevo Bucks are the new Bitcoin', 'Subway Robber > Machete Guy'
]
let index = Math.floor(Math.random() * arr.length);
return arr[index];
}
return arr[index];
}

View File

@@ -12,12 +12,12 @@
<div>
<h2 style="padding: 5px 16px 5px 16px; font-weight: normal;display: inline-block;text-align:left;">Conflict
Highlighting</h2>
<button id="togglecourseConflictHighlight" class="matbut"
<button id="togglecourseConflictHighlight" class="material-button"
style="float:right; display:inline-block;font-size:medium;background:#F44336;">Turn
Off</button>
<h2 style="padding: 5px 16px 16px 16px; font-weight: normal;display: inline-block;text-align:left;">Scroll To
Load More Courses</h2>
<button id="toggleloadAll" class="matbut"
<button id="toggleloadAll" class="material-button"
style="float: right;display:inline-block;font-size:medium;background:#F44336;">Turn
Off</button>
</div>
@@ -28,4 +28,4 @@
<script src="js/options.js"></script>
</body>
</html>
</html>