Show annotations on overview of favorites

app/assets/stylesheets/favorites.scss

@@ -33,11 +33,22 @@
 }
 
 .thumb {
-  width: 3em;
+  display: inline-block;
+  max-width: 48px;
+  height: auto;
+
+  img {
+    vertical-align: middle;
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
+    border-radius: 50%;
+  }
 }
 
 .table_buttons {
   display: flex;
+  justify-content: flex-end;
 
   :nth-child(2) {
     -webkit-text-fill-color: #ffffff;
@@ -83,3 +94,81 @@
     text-decoration: none;
   }
 }
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+.header-button-container {
+  display: grid;
+  grid-template-columns: 1fr auto;
+
+  .button {
+    margin-right: 8px;
+    text-align: right;
+    align-self: center;
+    line-height: 34px;
+  }
+}
+
+#annotation {
+  display: none;
+}

app/javascript/packs/application.js

@@ -3,6 +3,8 @@
 // a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 
+require("packs/custom")
+
 require("@rails/ujs").start()
 require("turbolinks").start()
 require("@rails/activestorage").start()

app/javascript/packs/custom.js

@@ -0,0 +1,21 @@
+function toggleAnnotations() {
+    var annotationCells = document.querySelectorAll("#annotation");
+    if (document.getElementById("toggleAnnotations").checked === true) {
+        annotationCells.forEach(setVisible);
+    } else {
+        annotationCells.forEach(setInvisible);
+    }
+}
+
+function setVisible(item) {
+    item.style.display = "block";
+}
+
+function setInvisible(item) {
+    item.style.display = "none";
+}
+
+/* First load all other scripts and then listen for click on checkbox */
+document.addEventListener('turbolinks:load', () => {
+    document.getElementById("toggleAnnotations").addEventListener("click", toggleAnnotations);
+});

app/views/favorites/courses.html.erb

@@ -1,6 +1,17 @@
 <%= render(:partial => "nav") %>
 
-<h2>Favorite Courses</h2>
+<div class="header-button-container">
+  <div class="header">
+    <h2>Favorite Courses</h2>
+  </div>
+  <div class="button">
+    <span>Annotations</span>
+    <label class="switch">
+      <input type="checkbox" id="toggleAnnotations">
+      <span class="slider round"></span>
+    </label>
+  </div>
+</div>
 
 <% if !@favorite_courses[0].blank? %>
   <div class="table_wrapper">
@@ -19,14 +30,17 @@
           </td>
         </tr>
         <tr>
+          <td>
+            <% if course['personal_annotation'] != nil %>
+              <div id="annotation"><strong>Annotation:</strong> <%= course['personal_annotation'] %></div>
+            <% end %>
+          </td>
           <td>
             <div class="table_buttons">
               <%= button_to 'Details', crawlers_courses_crawler_show_detail_url(:number => course['number'], :semester => course['semester']) %>
               <%= button_to 'Delete', {:action => "delete_course", :number => course['number'], :semester => course['semester']}, :method => 'delete' %>
             </div>
           </td>
-          <td>
-          </td>
         </tr>
       <% end %>
     </table>

app/views/favorites/people.html.erb

@@ -1,6 +1,17 @@
 <%= render(:partial => "nav") %>
 
-<h2>Favorite People</h2>
+<div class="header-button-container">
+  <div class="header">
+    <h2>Favorite People</h2>
+  </div>
+  <div class="button">
+    <span>Annotations</span>
+    <label class="switch">
+      <input type="checkbox" id="toggleAnnotations">
+      <span class="slider round"></span>
+    </label>
+  </div>
+</div>
 
 <% if !@favorite_people[0].blank? %>
   <div class="table_wrapper">
@@ -13,11 +24,11 @@
       </tr>
       <% for person in @favorite_people %>
         <tr>
-          <td>
+          <td rowspan="2">
             <%= link_to crawlers_people_crawler_show_detail_url(:tiss_id => person['tiss_id']) do %>
-            <span>
+            <span class="thumb">
               <% if person['picture_uri'] != nil %>
-                <%= image_tag @host + person['picture_uri'], class: 'thumb' %>
+                <%= image_tag @host + person['picture_uri'] %>
               <% else %>
                 <%= show_svg('account_circle-black-48dp.svg') %>
               <% end %>
@@ -35,15 +46,17 @@
           </td>
         </tr>
         <tr>
+          <td colspan="2">
+            <% if person['personal_annotation'] != nil %>
+              <div id="annotation"><strong>Annotation:</strong> <%= person['personal_annotation'] %></div>
+            <% end %>
+          </td>
           <td>
             <div class="table_buttons">
               <%= button_to 'Details', crawlers_people_crawler_show_detail_url(:tiss_id => person['tiss_id']) %>
               <%= button_to "Delete", {:action => "delete_person", :tiss_id => person['tiss_id']}, :method => 'delete' %>
             </div>
           </td>
-          <td></td>
-          <td></td>
-          <td></td>
         </tr>
       <% end %>
     </table>

app/views/favorites/projects.html.erb

@@ -1,6 +1,17 @@
 <%= render(:partial => "nav") %>
 
-<h2>Favorite Projects</h2>
+<div class="header-button-container">
+  <div class="header">
+    <h2>Favorite Projects</h2>
+  </div>
+  <div class="button">
+    <span>Annotations</span>
+    <label class="switch">
+      <input type="checkbox" id="toggleAnnotations">
+      <span class="slider round"></span>
+    </label>
+  </div>
+</div>
 
 <% if !@favorite_projects[0].blank? %>
   <div class="table_wrapper">
@@ -19,13 +30,17 @@
           </td>
         </tr>
         <tr>
+          <td>
+            <% if project['personal_annotation'] != nil %>
+              <div id="annotation"><strong>Annotation:</strong> <%= project['personal_annotation'] %></div>
+            <% end %>
+          </td>
           <td>
             <div class="table_buttons">
               <%= button_to 'Details', crawlers_projects_crawler_show_detail_url(:id => project['id']) %>
               <%= button_to 'Delete', {:action => "delete_project", :id => project['id']}, :method => 'delete' %>
             </div>
           </td>
-          <td></td>
         </tr>
       <% end %>
     </table>

app/views/favorites/theses.html.erb

@@ -1,6 +1,17 @@
 <%= render(:partial => "nav") %>
 
-<h2>Favorite Theses</h2>
+<div class="header-button-container">
+  <div class="header">
+    <h2>Favorite Theses</h2>
+  </div>
+  <div class="button">
+    <span>Annotations</span>
+    <label class="switch">
+      <input type="checkbox" id="toggleAnnotations">
+      <span class="slider round"></span>
+    </label>
+  </div>
+</div>
 
 <% if !@favorite_theses[0].blank? %>
   <div class="table_wrapper">
@@ -20,13 +31,17 @@
 
         </tr>
         <tr>
+          <td>
+            <% if thesis['personal_annotation'] != nil %>
+              <div id="annotation"><strong>Annotation:</strong> <%= thesis['personal_annotation'] %></div>
+            <% end %>
+          </td>
           <td>
             <div class="table_buttons">
               <%= button_to 'Details', crawlers_theses_crawler_show_detail_url(:id => thesis['id']) %>
               <%= button_to 'Delete', {:action => "delete_thesis", :id => thesis['id']}, :method => 'delete' %>
             </div>
           </td>
-          <td></td>
         </tr>
       <% end %>
     </table>

package.json

@@ -10,6 +10,6 @@
   },
   "version": "0.1.0",
   "devDependencies": {
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.11.0"
   }
 }

yarn.lock

@@ -7269,7 +7269,7 @@ webpack-dev-middleware@^3.7.2:
     range-parser "^1.2.1"
     webpack-log "^2.0.0"
 
-webpack-dev-server@^3.10.3:
+webpack-dev-server@^3.11.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz#8f154a3bce1bcfd1cc618ef4e703278855e7ff8c"
   integrity sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==