Assignment-6/index.html at master · ProjectGroupB/Assignment-6 · 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
<!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>
  <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"><button type="button" class="btn btn-default btn-sm" id:"btn-search" ng-click="filterSearch()"><span class="glyphicon glyphicon-search"></span></button></span>
            <input type="text" class="form-control" ng-model="searchInput" placeholder="Search" onkeyup="filterSearch()">
          </div>
          <div class="tableWrapper">
            <table class="table table-striped table-hover" id="myTable">
              <tr>
                <th scope="col">Code</th>
                <th scope="col">Building Name</th>
                <th scope="col" id="rm">Delete</th>
              </tr>
              <tr ng-repeat="listing in listings | filter:searchInput" ng-click="showDetails($index)">
                  <td id="code">{{listing.code}}</td>
                  <td id="name">{{listing.name}}</td>
                  <td><button type="button" class="btn btn-default btn-sm" id:"btn-delete" ng-click="deleteListing($index)"><span class="glyphicon glyphicon-trash"></span></button></td>
              </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

                -->
            </table>
          </div>
          <div class="row">
                <div class="col-md-6" id="newInput">
                  <div class="jumbotron">
                        <h3>Create New Entry</h3>
                        <div class="input-group">
                              <span class="input-group-addon entryText" >Code</span>
                              <input type="text" class="form-control" id="codeInput">
                        </div>
                        <div class="input-group">
                              <span class="input-group-addon entryText">Name</span>
                              <input type="text" class="form-control" id="nameInput">
                        </div>
                        <div class="input-group">
                              <span class="input-group-addon entryText">Coord.</span>
                              <input type="text" class="form-control" placeholder="Latitude" id="latInput">
                              <input type="text" class="form-control" placeholder="Longitude" id="longInput">
                        </div>
                        <div class="input-group">
                              <span class="input-group-addon entryText">Address</span>
                              <input type="text" class="form-control" id="addressInput">
                        </div>
                        <div class="clearfix" id="btn-div">
                              <button type="button" class="btn btn-default btn-md pull-right" id:"btn-add" ng-click="addListing()">Create</button>
                        </div>
                  </div>

                </div>

          </div>
          <!--

              Write an HTML form that adds new listings to the directory

            -->
        </div>
        <div class="col-md-6">
          <div class="jumbotron">
            <h2>Detailed Information</h2>
            <p class="details">{{detailedInfo}}</p>
            <!--

              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>
        </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>