Assignment2/index.html at master · mronda/Assignment2 · 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
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <!-- allows writing expressions -->
  <body ng-app="directoryApp">
    <div class="container">
      <div class="row">
        <h1>UF Directory App</h1>
      </div>
      <div class="row" ng-controller="ListingsController">
        <div class="col-md-6">
          <div class="input-group" id="searchBar">
            <!--

                Implement a way to filter through listings using the search bar

              -->
            <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-search"></span></span>
            <input type="text" class="form-control" placeholder="Search" ng-model="query">
          </div>
          <div class="tableWrapper">
            <table class="table table-striped table-hover">
              <tr>
                <th>Code</th>
                <th>Building Name</th>
                <th></th>
              </tr>
              <!--

                  Fill in the rest of the table:
                      * populate the rows with the code and name of each listing
                      * include a way to remove individual listings
                -->
                <tr ng-repeat="listing in listings | filter: query">
					         <td ng-click="showDetails($index)"> {{listing.code}} </td>
					         <td ng-click="showDetails($index)"> {{listing.name}} </td>
                   <th><span class="glyphicon glyphicon-remove"
                             ng-click="deleteListing($index)"></span></th>
                </tr>
            </table>
          </div>
          <!--
              TODO: Write an HTML form that adds new listings to the directory

            -->

            <h4>Enter New Contact:</h5>
              <tr>
               <td><input class="form-control" ng-model="code" placeholder="Code"></td>
               <td><input class="form-control" ng-model="name" placeholder="Building Name"></td>
               <td><button class="btn btn-success" ng-click="addListing()">Add Contact</button></td>
             </tr>

        </div>


        <div class="col-md-5">
          <div class="jumbotron jumbotron-fluid">
            <h2 class="h2"><strong>Detailed Information</strong></h2>
            <!--

              Include a way to display detailed information about an individual listing:
                   * consider how to use ng-click within the the table to implement this feature

             -->
            <div ng-show="detailedInfo != undefined">

              <h4 class="lead"><strong>Code:</strong> {{detailedInfo.code}}</h4>
              <h4 class="lead"><strong>Name:</strong> {{detailedInfo.name}}</h4>
              <h4 class="lead"><strong>Latitude: </strong>{{detailedInfo.coordinates.latitude}}</h4>
              <h4 class="lead"><strong>Longitude:</strong> {{detailedInfo.coordinates.longitude}}</h4>
              <h4 class="lead"><strong>Address:</strong> {{detailedInfo.address}}</h4>
            </div>


          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
    <script src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script src="app.js"></script>
    <script src="listingController.js"></script>
    <script src="listingFactory.js"></script>
  </body>
</html>