Fixed AJAX bug where it wouldnt get all array locs, added css

academe/settings.py

@@ -136,7 +136,7 @@ STATICFILES_DIRS = [
 # Tells django where to put static files after collectstatic
 STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
 
-LOGIN_REDIRECT_URL = 'reviews_index'
+LOGIN_REDIRECT_URL = 'homepage'
 LOGOUT_REDIRECT_URL = 'homepage'
 
 EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
\ No newline at end of file

academe/views.py

@@ -12,6 +12,7 @@ from profs import views as prof_views
 from reviews.forms import ReviewForm
 
 from profs.models import Prof
+from courses.models import Course
 from django.contrib.auth.models import User
 
 def index(request):
@@ -32,15 +33,24 @@ def search(request):
 	if(request.method == 'POST'):
 		prof_query = request.POST.get('prof', None)
 		course_query = request.POST.get('course', None)
+		if prof_query:
+			message = "You searched profs for: " + prof_query
 			try:
 				# Query profs
 				prof_set = Prof.objects.annotate(search_name=Concat('first_name', Value(' '), 'last_name'))
 				profs = prof_set.filter(search_name__icontains=prof_query)
 
 				# profs = Prof.objects.filter(first_name__icontains=prof_query last_name__contains=prof_query)
-			return render(request, 'profs/index.html', {'profs': profs})
+				return render(request, 'profs/index.html', {'profs': profs, 'message': message})
 			except Prof.DoesNotExist:
 				return HttpResponse('No such prof')
+		else:
+			message = "You searched courses for: " + course_query
+			try:
+				courses = Course.objects.filter(name__icontains=course_query)
+				return render(request, 'courses/index.html', {'courses': courses, 'message': message})
+			except Course.DoesNotExist:
+				return HttpResponse('No such course')
 	else:
 		courses = course_views.all_course()
 		return render(request, 'templates/browse.html', {'courses': courses})

courses/templates/courses/index.html

 {% extends 'templates/base.html' %}
 {% block content %}
 <center><h1>Courses</h1></center>
-<!-- Create the table rows -->
+{% if message %}
+<center><p>{{message}}</p></center>
+{% endif %}
 {% for course in courses %} 
 	<ul style="text-align: center; list-style: none; padding: 0">
 		<li><a href="">{{ course.name }}</a></li>

profs/templates/profs/index.html

 {% extends 'templates/base.html' %}
 {% block content %}
 <center><h1>Professors</h1></center>
+{% if message %}
+<center><p>{{message}}</p></center>
+{% endif %}
 <!-- Create the table rows -->
 {% for prof in profs %} 
 	<ul style="text-align: center; list-style: none; padding: 0">

reviews/templates/reviews/review_form.html

 <!-- Make the form for uploading a new review -->
 {% extends 'templates/base.html' %}
 {% block content %}
-<h1>New review {% if curr_prof %} for {{ prof.first_name }} {{ prof.last_name }}{% endif %}</h1>
+<h1>Create a review {% if curr_prof %} for {{ prof.first_name }} {{ prof.last_name }}{% endif %}</h1>
 <form method="POST">
 	{% csrf_token %}
 	<p>{{ review_form.message }}</p>
@@ -14,7 +14,7 @@
 	<p>{{ review_form.course }}</p>
 
 	{% endif %}
-	<button type="submit">Save</button>
+	<button id="save" type="submit" style="display: none">Save</button>
 	{% if messages %}
 	{% for message in messages %}
 	{{ message }}
@@ -24,6 +24,7 @@
 	<!-- AJAX -->
 	<script type="text/javascript">
 		var profDropDown = document.getElementById('prof');
+		// Runs when a prof is selected from drop down
 		function dropDownSelect() {
 			if(profDropDown.selectedIndex > 0) {
 				var profName = profDropDown.options[profDropDown.selectedIndex].text;
@@ -34,8 +35,13 @@
 			}
 		}
 
+		function showSave() {
+			document.querySelector("#save").style.display = "inline-block";
+		}
+
 		function callXHR(profName) {
 			// Get the courses of the prof specified
+			document.querySelector("#save").style.display = "none";
 			var xhr = new XMLHttpRequest();
 			xhr.onreadystatechange = function() {
 				if (xhr.readyState === 4 && xhr.status === 200) {
@@ -50,22 +56,41 @@
 					select.append(document.createElement('select'));
 					var dropDown = document.querySelector('#show ~ select');
 					dropDown.name = 'course';
+					dropDown.id="dropdown";
 					var json = JSON.parse(xhr.response);
 					// Add the courses returned by json to to the dropdown
-					for (var i = 1; course = json[i]; i++) {
-						if (i == 1) {
+					Object.keys(json).map(function(objectKey, index) {
+						if (json[objectKey]) {
+							if (index == 0) {
 								var placeholder = document.createElement('option');
 								placeholder.value = "";
 								placeholder.textContent = "Select a course";
 								dropDown.appendChild(placeholder);
 							}
 							var option = document.createElement('option');
-						option.value = i;
-						option.textContent = course;
+							option.value = index;
+							option.textContent = json[objectKey];
 							dropDown.appendChild(option);
 						}
+					});
 					document.querySelector("#show").style.display = "none";
+					document.getElementById('dropdown').addEventListener("change", showSave);
 					console.log("XHR Request done");
+					// for (var i = 1; course = json[i]; i++) {
+					// 	if (i == 1) {
+					// 		var placeholder = document.createElement('option');
+					// 		placeholder.value = "";
+					// 		placeholder.textContent = "Select a course";
+					// 		dropDown.appendChild(placeholder);
+					// 	}
+					// 	var option = document.createElement('option');
+					// 	option.value = i;
+					// 	option.textContent = course;
+					// 	dropDown.appendChild(option);
+					// }
+					// document.querySelector("#show").style.display = "none";
+					// document.getElementById('dropdown').addEventListener("change", showSave);
+					// console.log("XHR Request done");
 
 				}
 			};

static/css/main.css

@@ -15,3 +15,57 @@ th {
 tr:nth-child(even) {
     background-color: #dddddd;
 }
+
+/* Base html */
+#welcome, h2, h1{
+	color: #4788C5 !important;
+	font-weight: bold !important;
+}
+
+/* Navbar */
+.navbar-brand {
+	font-weight: bold;
+}
+.navbar-brand, .nav-item a {
+	color: #4788C5 !important;
+	transition: 1s;
+}
+
+.nav-item a:hover {
+	text-decoration: underline;
+}
+
+#username {
+	color: black !important;
+}
+
+
+/* templates>index.html */
+.content {
+	margin: 4em;
+}
+
+#search div{
+	display: inline-block;
+	margin: 2em 1em;
+}
+
+#search p {
+	display: inline;
+	margin: 2em;
+	color: grey;
+}
+
+#search .btn {
+	width: 70%;
+	margin: 1em;
+	padding: 0.9em;
+	font-size: 0.8em;
+	text-align: center;
+	font-weight: bold;
+}
+
+/* Browse */
+.course {
+	margin: 2em;
+}

templates/base.html

@@ -14,12 +14,6 @@
         <a class="navbar-brand" href="{% url 'homepage' %}">Academe</a>
         <div class="collapse navbar-collapse" id="navbarNav">
             <ul class="navbar-nav mr-auto">
-                <!-- <li class="nav-item">
-                    <a class="nav-link" href="{% url 'profs_index' %}">Professors</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="{% url 'courses_index' %}">Courses</a>
-                </li> -->
                 <li class="nav-item">
                     <a class="nav-link" href="{% url 'browse' %}">Browse</a>
                 </li>
@@ -27,11 +21,13 @@
                     <a class="nav-link" href="{% url 'review' %}">Create Review</a>
                 </li>
             </ul>
-            <form class="form-inline">
-                <!--<input type="text" class="form-control" placeholder="Search">
-                <button class="btn btn-outline-success">Search</button> -->
-                <ul class="navbar-nav mr-auto">
+            <form class="form-inline"><ul class="navbar-nav mr-auto">
                 	{% if user.is_authenticated %}
+
+                    <li class="nav-item">
+                        <a class="nav-link" id="username">Hi, {{user.username}}!</a>
+                    </li>
+
 	                <li class="nav-item">
 	                    <a class="nav-link" href="{% url 'logout' %}">Logout</a>
 	                </li>
@@ -48,7 +44,9 @@
         </div>
     </div>
 </nav>
+    <div class="content">
     {% block content %}
     {% endblock %}
+    </div>
 </body>
 </html>
\ No newline at end of file

templates/index.html

 {% extends 'templates/base.html' %}
 {% block content %}
-	<h2><center> Welcome to Academe! </center></h2>
+	<h2 id="welcome"><strong><center> Welcome to Academe! </center><strong></h2>
 	<br>
-	<h3><center> Search for Reviews </center></h3>
-	<form method="post" action="/search/" style="text-align: center">
+	<h3><center> Looking for a prof or course? We got you.<center></h3>
+	<form id="search" method="post" action="/search/" style="text-align: center">
 		{% csrf_token %}
 		<div>
-			<br>
 			<input type="text" placeholder="Search a course" name="course">
-			<input type="text" placeholder="Search a prof" name="prof">
 			<br>
-		</div>
-		<div>
 			<button type = "submit" class = "btn btn-primary">Search Course</button>
-			<button type = "submit" class = "btn btn-primary">Search Prof</button>
 		</div>
-		<!--<div>
+		<p>or</p>
+		<div>
 			<input type="text" placeholder="Search a prof" name="prof">
 			<br>
-			<input class="btn-primary" id="submitsearch" type="Search Prof" name="">	
-		</div> -->
+			<button type = "submit" class = "btn btn-primary">Search Prof</button>
+		</div>
 		<br>
-
 	</form>
 {% endblock %} 
\ No newline at end of file