micropusher/index.html at master · Jasonette/micropusher · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>
<style>
form {
  width: 100%;
  max-width: 800px;
  margin: 100px auto;
}
form input {
  display: block;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  background: #ebebeb;
  width: 100%;
  border-radius: 0;
  outline: none;
}
.CodeMirror{
  border: 1px solid #ebebeb;
  margin-bottom: 10px;
}
form input[type=submit] {
  background: yellowgreen;
  color: white;
}
h5 {
  padding: 10px 0 0 0;
  margin: 10px 0 5px;
  font-family: verdana;
  font-weight: normal;
}
</style>
<script src="https://www.celljs.org/cell.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.css" rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/theme/neo.css' rel='stylesheet'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script src='https://tojson.co/node_modules/jsonlint/lib/jsonlint.js'></script>
<script src='https://tojson.co/node_modules/codemirror/addon/lint/lint.js'></script>
<script src='https://tojson.co/node_modules/codemirror/addon/lint/javascript-lint.js'></script>
<script src='https://tojson.co/node_modules/codemirror/addon/lint/json-lint.js'></script>
<script src='https://tojson.co/node_modules/codemirror/addon/edit/closebrackets.js'></script>
<script src='https://tojson.co/node_modules/codemirror/addon/edit/matchbrackets.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css" rel="stylesheet">
<script>
Form = {
  $cell: true,
  $type: "form",
  method: "post",
  _token: "",
  _message: "",
  _payload: null,
  _endpoint: "",
  onsubmit: function() {
    var self = this;
    fetch(this._endpoint, {
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(self._payload)
    })
    return false;
  },
  $components: [{
    $type: "h5",
    $text: "Micropush endpoint"
  }, {
    $type: "input",
    type: "url",
    oninput: function() {
      this._endpoint = this.value;
    },
    placeholder: "Enter your micropush server endpoint url"
  }, {
    $type: "h5",
    $html: "JSON payload <a href='https://github.com/Jasonette/micropush#micropush-json-payload'>[Learn more]</a>"
  }, {
    $type: "textarea",
    name: "payload",
    $init: function(){
      var self = this;
      this._ed = CodeMirror.fromTextArea(this, {
        mode: "application/json",
        lineNumbers: true,
        lineWrapping: true,
        lint: true,
        styleActiveLine: true,
        autoCloseBrackets: true,
        matchBrackets: true,
        viewportMargin: true,
        theme: "neo",
        gutters: ["CodeMirror-lint-markers"]
      })
      this._ed.setSize(null, 600);
      this._ed.on('change', function() {
        self._payload = JSON.parse(self._ed.getValue());
      })
    },
    value: JSON.stringify({
      "type": "$push.ios",
      "options": {
        "to": {
          "token": "[REPLACE WITH YOUR DEVICE TOKEN]",
          "topic": "[REPLACE WITH YOUR APP BUNDLE ID]"
        },
        "data": {
          "href": {
            "url": "https://news.ycombinator.com",
            "view": "web"
          }
        },
        "notification": {
          "alert": "\uD83D\uDCE7 \u2709 You have a new message",
          "sound": "default"
        }
      }
    }, null, 2)
  }, {
    $type: "input",
    type: "submit"
  }]
}
</script>
</html>