Imagine-Images/search.php at master · cthuff/Imagine-Images · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<?php
include "../inc/dbinfo.inc";
require_once 'vendor/autoload.php';
session_start();

if($_SESSION["homeURL"] !== "/dashboard.php"){
    echo '<meta http-equiv="refresh" content="0; url=/">';
    exit(0);
}
?>

<!DOCTYPE html>
<html>
<head>
  <link rel="icon" type="image/png" href="myicon.png" />

  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">

  <title>Imagine Images</title>

  <!-- CSS -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="js/init.js"></script>
  <script src="js/materialize.js"></script>
  <script src="js/materialize.min.js"></script>

  <script src="https://apis.google.com/js/platform.js?onload=init" async defer></script>
  <meta name="google-signin-client_id" content="773465469592-70tepenvk2lc7sbhs1d1k5i98k0gdp09.apps.googleusercontent.com">
</head>
<body>
  <div id="newUser" style="display:none"></div>
  <nav class="light-blue" style="line-height: 0px"role="navigation">
    <div class="nav-wrapper" >
      <a id="logo-container" href='<?php echo $_SESSION["homeURL"];?>' class="brand-logo amber-text text-accent-2 center hide-on-small-and-down" style="padding-top:30px;">Imagine Images</a>
      <ul id="nav-mobile" class="right">
        <li><div class="right g-signin2 hide-on-small-and-down" style ="display:none;" data-onsuccess="onSignIn"></div></li\>
        <li><div class="right btn amber hide-on-small-and-down" style="margin-top:14px; margin-right:30px;" onclick="signOut()"><span class="black-text">Sign Out</span></div></li>
        <li><div class="right btn amber hide-on-med-and-up" style ="margin-top:10px; margin-right:10px" onclick="signOut()"><span class="black-text">Sign Out</span></div></li>
      </ul>
      <ul>
        <li><i class="large material-icons left hide-on-small-and-down" style="padding-left:30px;">camera_roll</i></li>
        <li><i class="large material-icons left hide-on-med-and-up" style="padding-left:10px;">camera_roll</i></li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <div class="section">
      <h4 class="header center amber-text text-accent-2 hide-on-med-and-up" style="padding:0px; padding-bottom:15px;">Imagine Images</h4>
      <div class="row">
        <div id="search1" class="col s12 l9 m9">
	  <select id="cat_selector">
	    <option value="" selected disabled>Choose your option</option>
	    <?php
	      $conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_DATABASE);
	      // Check connection
	      if (!$conn) {
   	           die("Connection failed: " . mysqli_connect_error());
	      }
	      $sql = "SELECT DISTINCT category FROM ImageCategories;";
	      $results = $conn->query($sql);
	      $counter = 0;
	      if ($results->num_rows > 0) {
	          while($row = $results->fetch_assoc()) {
	              echo "<option value=" . $counter . ">" . $row['category'] ."</option>";
                      $counter++;
	          }
	      } else {
	          echo "No images have been uploaded yet";
	      }
	    ?>
	  </select>
	  <label>Category 1</label>
	</div>
	<button class="btn waves-effect waves-dark light-blue col s5 hide-on-med-and-up" onclick="window.location.replace('/dashboard.php')"> Home </button>
	<div class="col s2 m1 l1"> </div>
	<button class="btn waves-effect waves-dark amber col s5 m2 l2 hide-on-small-and-down" style="margin-top:7px;" onclick="search()"> Search
          <i class="material-icons right">search</i>
        </button>
	<button class=" hide-on-med-and-up btn waves-effect waves-dark amber col s5" onclick="search()"> Search
          <i class="material-icons right">search</i>
        </button>

      </div>
    </div>
  </div>
  <div id="viewimages"></div>


  <script>
    function onSignIn(googleUser) {

    var profile = googleUser.getBasicProfile();
    console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
    console.log('Name: ' + profile.getName());
    console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.

    var id_token = googleUser.getAuthResponse().id_token;
    }
  </script>

  <script>
    function signOut() {
    gapi.auth2.init();
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
    console.log('User signed out.');
    });
    $( "#newUser" ).load( "logout.php", function() { });
    window.location.replace('/');
    }
  </script>

  <script>
  function search(){
  var cats = document.getElementById("cat_selector");
  var selected_cat = cats.options[cats.selectedIndex].text;
  $.ajax({
      type: "GET",
	data: 'category=' + selected_cat,
	url: "image_search.php/",
        dataType: "html",
        success: function(data){
            $('#viewimages').html(data);
        }
      });
  }
  </script>
</body>
</html>