summaryrefslogtreecommitdiff
path: root/test.html
blob: 3fb639f4b55dd2f4166be94999fa23965fd54e97 (plain)
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
<!DOCTYPE html>
<html>
<body>
  <h1> Graffiti x JS </h1>

  <p id="ID"></p>

  <h2 id="status"></h2>

  <button onclick="Subscribe()">
    Subscribe
  </button>

  <button onclick="Unsubscribe()">
    Unsubscribe
  </button>

  <button onclick="Update()">
    Update
  </button>

  <button onclick="Remove()">
    Remove
  </button>

  <button onclick="LogOut()">
    Log Out
  </button>

<script type="module">
  import Graffiti from "./graffiti.js"

  // Connect to a local Graffiti instance
  // (see the server README for how to n locally)
  window.graffiti = new Graffiti("http://localhost:5001")
  await graffiti.waitTilOpen()

  // Log in automatically if not already
  // and supply a log out button
  if (!graffiti.myID) graffiti.toggleLogIn()
  window.LogOut = ()=> graffiti.toggleLogIn()
  document.getElementById('ID').innerHTML = `Your Graffiti ID is: ${graffiti.myID}`

  const myTag = "asdf"

  // Make a display
  async function displayObjects() {
    let display = 'not subscribed'
    try {
      const objects = graffiti.objectsByTags(myTag)
      display = `objects: ${JSON.stringify(objects)}`
    } catch {}

    document.getElementById('status').innerHTML = display
  }

  // Create an object containing a special string
  window.Subscribe = async function() {
    await graffiti.subscribe(myTag)
    await new Promise(r => setTimeout(r, 1000));
    displayObjects()
  }

  window.Unsubscribe = async function() {
    await graffiti.unsubscribe(myTag)
    await new Promise(r => setTimeout(r, 1000));
    displayObjects()
  }

  // Create an object containing a special string
  window.Update = async function() {
    await graffiti.update({_tags: [myTag]})
    displayObjects()
  }

  // Remove an existing object
  window.Remove = async function() {
    await graffiti.objectsByTags(myTag)[0]._remove()
    displayObjects()
  }

</script>
</body>
</html>