Merge branch 'master' of https://gitlab.doc.ic.ac.uk/zz4319/chrome-groceries-extension

button.js

+document.getElementById("custom-button").addEventListener("click", openCustomTab);
+document.getElementById("load-button").addEventListener("click", openLoadTab);
+
+function openCustomTab() {
+    document.getElementById("load").className = "content";
+    document.getElementById("load-button").className = "tablinks";
+
+    document.getElementById("custom").className = "content-active";
+    document.getElementById("custom-button").className += "-active";
+}
+
+function openLoadTab() {
+    document.getElementById("custom").className = "content";
+    document.getElementById("custom-button").className = "tablinks";
+
+    document.getElementById("load").className = "content-active";
+    document.getElementById("load-button").className += "-active";
+}
\ No newline at end of file

content.js

@@ -25,9 +25,8 @@ function checkAllergen(product) {
     xhr.onerror = () => reject(xhr.status);
     xhr.open("GET", "http://localhost/script.php?product="+product+"&dietNum="+dietNum, true);
     xhr.send();
-    });
-  return promise;
-
+});
+return promise;
 }
 
 document.addEventListener('mousemove', function (e) {

database-population/.idea/libraries/mysql_connector_java_5_1_49.xml

+<component name="libraryTable">
+  <library name="mysql-connector-java-5.1.49">
+    <CLASSES>
+      <root url="jar://C:/mysql-connector-java-5.1.49/mysql-connector-java-5.1.49.jar!/" />
+    </CLASSES>
+    <JAVADOC />
+    <SOURCES />
+  </library>
+</component>
\ No newline at end of file

database-population/database-creation.iml

@@ -8,5 +8,6 @@
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
     <orderEntry type="library" name="postgresql-42.2.14" level="project" />
+    <orderEntry type="library" name="mysql-connector-java-5.1.49" level="project" />
   </component>
 </module>
\ No newline at end of file

database-population/src/CSVReading.java

@@ -15,7 +15,7 @@ import java.util.*;
  */
 
 public class CSVReading {
-  private static String csvFile = "C:\\Clickerance\\chrome-groceries-extension\\database-creation\\src\\25-June-2020-data.csv";
+  private static String csvFile = "C:\\Clickerance\\chrome-groceries-extension\\webscraping\\25-June-2020-data.csv";
   private static final String TABLE_NAME = "ProductsIngredients";
 
   enum Ingredient {
@@ -33,8 +33,8 @@ public class CSVReading {
    */
   public static void main(String[] args) {
     DatabaseConnection connection = new DatabaseConnection(TABLE_NAME);
-    connection.deleteTable();
-    connection.createTable();
+    //connection.deleteTable();
+    //connection.createTable();
     BufferedReader csvReader;
     try {
       csvReader = new BufferedReader(new FileReader(csvFile));
@@ -67,7 +67,8 @@ public class CSVReading {
          */
         String[] row = line.split(",(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)");
         Map<Ingredient, Boolean> contains = parseIngredients(row[ingredientsIndex]);
-        Map<Ingredient, Boolean> mayContain = parseAllergens(row[allergensIndex]);
+        Map<Ingredient, Boolean> mayContain = new HashMap<>();
+       // mayContain = parseAllergens(row[allergensIndex]);
         writeProduct(row[nameIndex], contains, mayContain, connection);
       }
     } catch (IOException e) {

database-population/src/DatabaseConnection.java

@@ -51,11 +51,14 @@ public class DatabaseConnection {
     }
 
     private static java.sql.Connection getConnection() throws URISyntaxException, SQLException {
-      URI dbUri = new URI(System.getenv("DATABASE_URL"));
-      String username = dbUri.getUserInfo().split(":")[0];
-      String password = dbUri.getUserInfo().split(":")[1];
-      String dbUrl = "jdbc:postgresql://" + dbUri.getHost() + dbUri.getPath();
-      return DriverManager.getConnection(dbUrl, username, password);
+      // Heroku database connection: (Uses postgresql jdbc driver)
+//      URI dbUri = new URI(System.getenv("DATABASE_URL"));
+//      String username = dbUri.getUserInfo().split(":")[0];
+//      String password = dbUri.getUserInfo().split(":")[1];
+//      String dbUrl = "jdbc:postgresql://" + dbUri.getHost() + dbUri.getPath();
+//      return DriverManager.getConnection(dbUrl, username, password);
+      // Local host phpmyadmin database
+      return DriverManager.getConnection("jdbc:mysql://localhost/public", "root", "");
     }
 
   }

database.php

@@ -17,7 +17,7 @@ $result = $stmt->fetch();
 if ($result == false) {
   echo "8";
 } else {
-  if (!(($containsdairy & (1 & $dietNum)) | ($containsmeat & (2 & $dietNum)) | ($containscorn & (4 & $dietNum)) | ($containsgluten & (8 & $dietNum)))) {
+  if (!(($containsdairy & boolval(1 & $dietNum)) | ($containsmeat & boolval(2 & $dietNum)) | ($containscorn & boolval(4 & $dietNum)) | ($containsgluten & boolval(8 & $dietNum)))) {
     echo "1";
   } else {
     echo "0";

popup.html

@@ -8,13 +8,20 @@
         <!-- <script src="popup.js"></script> -->
     </head>
     <body>
-      <div class="Title"></div>
-        <h1> Clickerance </h1>
+        <header class="header">
+            <div class="header-logo">
+                <img src="images/logo.png">
+            </div>
+            <div class="header-text">
+                <p class="h-text">clickerance</p>
+            </div>
+        </header>
 
-        Dairy  : <input type="checkbox" id="Dairy"><br>
-        Meat   : <input type="checkbox" id="Meat"><br>
-        Corn   : <input type="checkbox" id="Corn"><br>
-        Gluten : <input type="checkbox" id="Gluten"><br>
+        <div class="topbar">
+            <button class="tablinks-active" id="custom-button">Your preferences</button>
+            <button class="tablinks" id="load-button">Get an order on us</button>
+            <script src="button.js"></script>
+        </div>
 
         <p id="demo">=a</p>
 
@@ -28,5 +35,19 @@
 
         <!-- <input id="userinput"></input> -->
         
+        <div class="content-active" id="custom">
+            Dairy  : <input type="checkbox" id="Dairy"><br>
+            Meat   : <input type="checkbox" id="Meat"><br>
+            Corn   : <input type="checkbox" id="Corn"><br>
+            Gluten : <input type="checkbox" id="Gluten"><br>
+
+            <p>Which ones you can't eat?</p>
+
+            <input id="Submit" type="submit" value="Submit">
+        </div>
+
+        <div class="content" id="load">
+            blah
+        </div>
     </body>
 </html>

style.css

-.Title
+/* nunito-600 - latin */
+@font-face {
+    font-family: 'Nunito';
+    font-style: normal;
+    font-weight: 600;
+    src: url('./fonts/nunito-v14-latin-600.eot'); /* IE9 Compat Modes */
+    src: local('Nunito SemiBold'), local('Nunito-SemiBold'),
+         url('./fonts/nunito-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('./fonts/nunito-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
+         url('./fonts/nunito-v14-latin-600.woff') format('woff'), /* Modern Browsers */
+         url('./fonts/nunito-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('./fonts/nunito-v14-latin-600.svg#Nunito') format('svg'); /* Legacy iOS */
+}
+.html {
+    width: 430px;
+}
+body {
+    font-family: 'Nunito', sans-serif;
+    min-height: 300px;
+}
+/* ----- header ----- */
+
+.header
 {
-    text-align: justify;
-    font: 40px helvetica, sans-serif;
+    overflow: hidden;
+    background-color: #51C2A9;
+    min-width: 300px;
+    box-shadow: 0 0 3px #adadad;
+}
+
+.header-logo {
+    display: inline-block;
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    left: 25px;
+    top: 17px;
+}
+
+.header-logo img {
+    width: 50px;
+}
+
+.h-text {
     color: white;
-    background-color: #47BD95;
-    padding: 28px
+    text-align: center;
+    
+    font-size: 18px;
+    padding: 1px;
+    vertical-align: middle;
+}
+
+/* ----- topbar ----- */
+.topbar {
+    height: 30px;   
+    overflow: hidden;
 }
 
+.topbar button {
+    width: 150px;
+    background-color: inherit;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 5px;
+    transition: 0.3s;
+    font-family: 'Nunito', sans-serif;
+    color: #979797;
+}
+
+.topbar button:hover {
+    border-bottom: 5px solid #51C2A9;
+}
+
+.topbar .tablinks-active {
+    border-bottom: 5px solid #51C2A9;
+    color: #51C2A9;
+}
+/* ----- main-window -----*/
+
+.content {
+    display: none;
+    padding: 6px 12px;
+    background: #f5f5f5;
+    border: 1px solid #adadad;
+    box-shadow: 0 0 3px #adadad;
+    height: 250px;
+}
+
+.content-active {
+    display: block;
+    padding: 6px 12px;
+    background: #f5f5f5;
+    border: 1px solid #adadad;
+    box-shadow: 0 0 3px #adadad;
+    height: 250px;
+}
+
+
 .nameWrapper___4c05X {
     background-color: #ffffff;
 }