chat-lab/index.html at main · achaucodes/chat-lab · 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
  <script type="module" src="./chat.js"></script>
</head>
<body>
  <div id="app">
    <h1>
      My Cool Chat App
    </h1>

    <form>
      <p>
        ID:
      </p>
      <input v-model="usernameRequest"/>
      <span>{{this.usernameRequestError}}</span>
      <button type="button" @click="requestUsername(usernameRequest)">request</button>
    </form>
    <p>
      <button @click="$gf.toggleLogIn">
        <!-- If we have a user ID, we're logged in so show "Log Out" -->
        <!-- Otherwise, show "Log In" -->
        {{ $gf.me? 'Log Out' : 'Log In' }}
      </button>
    </p>

    <!-- If we're not logged in, hide everything except the login button -->
    <template v-if="$gf.me">

      <p>
        <!-- We display names in multiple places, so we made a -->
        <!-- reusable <name></name> component. -->
        <!-- See below for the template. -->
        My Name Is: <name :actor="$gf.me" :editable="true"></name>
      </p>

      <p>
        Change chat format:
        <input type="radio" id="channel" :value="false" v-model="privateMessaging" />
        <label for="channel">Channel-based public chat</label>

        <input type="radio" id="pm" :value="true" v-model="privateMessaging" />
        <label for="pm">Private Messaging</label>
      </p>

      <p v-if="!privateMessaging">
        <label for="channel">
          Change the channel you're chatting in:
        </label>
        <input id="channel" v-model="channel"/>
      </p>
      <p v-else>
        <label for="recipient">
          Paste the Actor ID of who you'd like to chat with:
        </label>
        <input id="recipient" v-model="recipient"/>
      </p>

      <!-- A form for sending messages -->
      <form @submit.prevent="sendMessage">
        <input v-model="messageText" placeholder="Type a message..."/>
        <input type="submit" value="Send"/>
      </form>

      <ul>
        <!-- List all the messages -->
        <li v-for="message of messages" :key="message.id">

          <!-- Display and edit form if we're editing a message -->
          <form v-if="editID==message.id" @submit.prevent="saveEditMessage(message)">
            <input v-model="editText">
            <input type="submit" value="Save"/>
          </form>

          <!-- Otherwise, display a bunch of properties from the message -->
          <ul v-else>
            <li>
              Message: {{ message.content }}
            </li>
            <li>
              From Name: <name :actor="message.actor"></name>
            </li>
            <li>
              From Actor ID: {{ message.actor }}
            </li>
            <template v-if="privateMessaging">
              <li>
                To Name: <name :actor="message.bto[0]"></name>
              </li>
              <li>
                To Actor ID: {{ message.bto[0] }}
              </li>
            </template>
            <li>
              Published at Time: {{ message.published }}
            </li>
            <li>
              Last Edited at Time: {{ message.updated }}
            </li>
            <li>
              <!-- This is a unique identifier that can be used to "link" to messages -->
              ID: {{ message.id }}
            </li>

            <!-- Only add these controls if the message is ours -->
            <!-- You can't edit or delete other people's messages -->
            <template v-if="message.actor==$gf.me">
              <li>
                <button @click="removeMessage(message)">
                  Delete Message
                </button>
              </li>
              <li>
                <button @click="startEditMessage(message)">
                  Edit Message
                </button>
              </li>
            </template>
          </ul>
        </li>
      </li>
    </template>
  </div>

  <template id="name">
    <span v-if="!editing">

      <!-- If we're not editing the name-->
      <!-- Display the profile's name, if it exists -->
      <!-- or anonymous if it doesn't -->
      {{ profile? profile.name : 'Anonymous' }}

      <!-- Also if the name is "editable" add an edit button -->
      <button v-if="editable" @click="editName">
        Edit Name
      </button>
    </span>

    <!-- If we're in the editing state, create something to edit the name-->
    <form v-else @submit.prevent="saveName">
      <input v-model="editText"/>
      <input type="submit" value="Save Name"/>
    </form>
  </template>
</body>
</html>