Contacts-Keeper/Index.html at master · christina0101011/Contacts-Keeper · 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
<!DOCTYPE html>
<html lang="en" ng-app='contactsApp'>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contacts</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Caveat|Lobster" rel="stylesheet">
    <script src="https://use.fontawesome.com/7fc3d5629f.js"></script>
    <link rel="stylesheet" href="Stylesheet/stylesheet.css">
    </head>

<body ng-controller='mainCTRL'>

   <h1>Your contacts</h1><br>
    <form class="form-horizontal
    col-xs-offset-1 col-xs-10
    col-sm-offset-1 col-sm-10
    col-lg-offset-0 col-lg-12">

    <div class="form-group">
    <label class="col-sm-2 control-label">First Name</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" placeholder="Name" ng-model='firstName'>
    </div>
  </div>

      <div class="form-group">
    <label class="col-sm-2 control-label">Last Name</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" placeholder="Name" ng-model='lastName'>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-5">
      <input type="email" class="form-control" placeholder="Email" ng-model='email'>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-2 control-label">Telephone</label>
    <div class="col-sm-5">
      <input type="text" class="form-control"  placeholder="Telephone" ng-model='telephone'>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-6">
      <button type="button" class="btn btn-default form-btn form-btn-add col-lg-3" ng-click='addContact()' ng-hide='currentContactId > -1'>Add</button>

      <button type="button" class="btn btn-default form-btn form-btn-save
      col-sm-3
      col-lg-3" ng-click='saveContact()' ng-show='currentContactId > -1'>Save</button>
    </div>
  </div><br>

    <div class="form-group">
    <label class="col-sm-2 control-label">Find</label>
    <div class="col-sm-5 colo-sm-offset-4">
      <input type="text" class="form-control" placeholder="search" ng-model="search">
    </div>
  </div><br>

  <table class="table table-hover">
  <thead>
    <tr>
        <th>№</th>
        <th>First Name
        <i class="fa fa-long-arrow-up" aria-hidden="true" ng-click = "order = 'firstName'"></i>
        <i class="fa fa-long-arrow-down" aria-hidden="true" ng-click = "order = '-firstName'"></i></th>
        <th>Last Name
         <i class="fa fa-long-arrow-up" aria-hidden="true" ng-click = "order = 'lastName'"></i>
        <i class="fa fa-long-arrow-down" aria-hidden="true" ng-click = "order = '-lastName'"></i></th>
        <th>Telephone</th>
        <th>Email</th>
        <th></th>
    </tr>
</thead>

<tbody>
    <tr ng-repeat="contact in contactsKeeper | orderBy: order | filter: search">
        <td>{{ $index + 1 }}</td>
        <td>{{ contact.firstName}}</td>
        <td>{{ contact.lastName }}</td>
        <td>{{ contact.telephone }}</td>
        <td>{{ contact.email }}</td>
        <td>
                <button class="btn btn-default contact-btn" ng-click="editContact($index)">Edit</button>

                <button class="btn btn-default contact-btn" ng-click="deleteContact($index)">Delete</button>
        </td>
    </tr>
</tbody>
</table>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
<script src="Contacts_App/app.js"></script>
</body>

</html>