pouchdb-drupal8-articles/index.html at master · jeqq/pouchdb-drupal8-articles · 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
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8" />
  <title>PouchDB - Drupal 8 - Articles</title>
  <link rel="stylesheet" type="text/css" href="style/base.css">
  <link rel="stylesheet" type="text/css" href="lib/ng-tags-input/ng-tags-input.css">
</head>
<body ng-controller="ArticleCtrl">

  <section id="article-control" class="show">
    <p>
      <button ng-click="addArticle()" class="control-articles" type="button">Add a new article</button>
      <button ng-click="viewArticles()" class="control-articles" type="button">View articles</button>
    </p>
  </section>

  <section id="add-new-article" class="show" ng-show="show">
    <h2>Add a new article</h2>
    <form ng-submit="submit(article)" id="add-new-article-form">
      <p>
        <input ng-init="setId()" ng-model="article._id" type="hidden" id="_id"  name="_id" value="">
        <input ng-model="article._rev" type="hidden" id="_rev" name="_rev" value="">
      </p>
      <p>
        <label for="article-title">Title</label>
        <input ng-model="article.title[0].value" type="text" id="article-title" name="article-title" placeholder="Add article title here. This field is required." value="" required>
      </p>
      <p>
        <label for="article-body">Body</label>
        <textarea ng-model="article.body[0].value" id="article-body" name="article-body" cols="50" rows="5" placeholder=""></textarea>
      </p>
      <p>
        <label for="article-tags">Tags</label>
        <tags-input ng-model="tags[article._id]"
                    id="article-tags"
                    name="article-tags"
                    display-property="name"
                    on-tag-added="tagAdded($tag)"
                    on-tag-removed="tagRemoved($tag, article)">
          <auto-complete source="loadTags($query)"></auto-complete>
        </tags-input>
        <span class="guidance">Enter a comma-separated list. For example: Amsterdam, Barcelona, New York.</span>
      </p>
      <p>
        <label for="article-status">Status</label>
        <input ng-model="article.status[0].value" type="checkbox" name="article-status" id="article-status">
      </p>
      <p>
        <label for="attachment" class="btn">Attach a new file:</label>
        <input type="file" id="attachment" name="attachment">
        <span class="filelist"></span>
      </p>

      <div id="attachments" class="show">
        <h2>Attachments</h2>
        <ul id="attachments-list">
          <li ng-repeat="attachment in attachments[article._id]"  ng-cloak>
            <a ng-href="data:{{attachment.content_type}};base64,{{attachment.data}}" target="_blank">{{attachment.filename}}</a>
          </li>
        </ul>
      </div>

      <p>
        <button id="submit" type="submit">Save article</button>
      </p>
    </form>
  </section>

  <section id="all-articles" ng-hide="show">
    <h2>Recent articles:</h2>
    <table id="articles-list">
      <thead>
      <tr>
        <th>Title</th>
        <th>Type</th>
        <th>Status</th>
        <th>Operations</th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="article in articles" ng-cloak>
        <td class="align-text">{{ article.title[0].value }}</td>
        <td class="align-text">{{ article['@type'] }}</td>
        <td class="align-text">{{ article.status[0].value ? 'Published' : 'Unpublished' }}</td>
        <td class="align-text">
          <span class="align-text link" ng-click="edit(article)">Edit</span>
           |
          <span class="align-text link" ng-click="delete(article._id)">Delete</span>
        </td>
      </tr>
      </tbody>
    </table>
  </section>

  <script src="lib/pouchdb-4.0.0.min.js"></script>
  <script src="lib/angular.js"></script>
  <script src="lib/ng-tags-input/ng-tags-input.js"></script>
  <script src="js/app.js"></script>
</body>
</html>