stem-labs-contacts/index.html at master · stemlabs/stem-labs-contacts · 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
<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>


<body ng-controller="ContactController">

  <div class="btn-toolbar well" ng-hide=details>
    <div class="btn-group">
      <button class="btn" ng-click="sortField=name">Name</button>
      <button class="btn" ng-click="sortField=email">Email</button>
      <button class="btn" ng-click="sortField=phone">Phone</button>
    </div>
    <input type="text" ng-model="searchText" placeholder="Search">
    <button class="btn" ng-click="addContact()">New</button>
  </div>

  <div class="container" ng-hide="details">
    <div ng-repeat="contact in contacts | orderBy:sortField | filter:searchText">
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="panel panel-default" ng-click="edit(contact.id)">
          <div class="panel-heading">{{ contact.name }}</div>
          <div class="panel-body">
            {{ contact.email }}
            <br/>{{ contact.phone }}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div ng-show="details">
    <div class="container well">
      <form class="form-horizontal" role="form">
        <div class="col-sm-4">
          <input class="form-control" type="text" name="name" ng-model="newContact.name" placeholder="Name" />
        </div>
        <div class="col-sm-4">
          <input class="col-sm-4 form-control" type="email" name="email" ng-model="newContact.email" placeholder="Email" />
        </div>
        <div class="col-sm-4">
          <input class="col-sm-4 form-control" type="tel" name="phone" ng-model="newContact.phone" placeholder="Phone" />
        </div>

      </form>
    </div>

    <div class="container">
      <div class="btn-toolbar">
        <div class="btn-group ">
          <button class="btn " ng-click="newContact()" ng-show="newContact.id == null">Add</button>
          <button class="btn " ng-click="saveContact()" ng-show="newContact.id != null">Save</button>
          <button class="btn " ng-click="cancelContact()">Cancel</button>
          <button class="btn " ng-click="deleteContact()" ng-show="newContact.id != null">Delete</button>
        </div>
      </div>
    </div>
  </div>

  <script src="//code.jquery.com/jquery-2.0.3.min.js" data-require="jquery@*" data-semver="2.0.3"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" data-require="bootstrap@3.1.1" data-semver="3.1.1"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-require="angular.js@1.2.17" data-semver="1.2.17"></script>
  <script src="app.js"></script>
</body>

</html>