2021-01-02 18:10:00 +00:00
< html >
< head >
< meta content = "width=device-width,initial-scale=1,minimal-ui" name = "viewport" >
2021-12-22 13:51:49 +00:00
< link rel = "stylesheet" href = "roboto.css" >
< link rel = "stylesheet" href = "material-icons.css" >
< link rel = "stylesheet" href = "vue-material.min.css" >
< link rel = "stylesheet" href = "vue-material-theme-default-dark.css" >
< script src = "vue.js" > < / script >
2021-01-02 18:10:00 +00:00
< script src = "vue-material.js" > < / script >
2022-01-08 20:54:02 +00:00
< script src = "commonmark.min.js" > < / script >
2022-01-19 02:37:39 +00:00
< script src = "tf-shared.js" > < / script >
2021-01-14 02:56:14 +00:00
< script src = "tf-user.js" > < / script >
< script src = "tf-message.js" > < / script >
2021-01-14 02:59:11 +00:00
< script src = "tf.js" > < / script >
2021-01-02 18:10:00 +00:00
< / head >
< body style = "color: #fff" >
< div id = "app" >
< md-dialog :md-active . sync = "show_connect_dialog" >
< md-dialog-title > Connect< / md-dialog-title >
< md-dialog-content >
< md-field >
< label > net:127.0.0.1:8008~shs:id< / label >
< md-input v-model = "connect" > < / md-input >
< / md-field >
< / md-dialog-content >
< md-dialog-actions >
< md-button class = "md-primary" @ click = "ssb_connect(connect); connect = null; show_connect_dialog = false" > Connect< / md-button >
< md-button @ click = "connect = null; show_connect_dialog = false" > Cancel< / md-button >
< / md-dialog-actions >
< / md-dialog >
< md-app style = "position: absolute; height: 100%; width: 100%" >
< md-app-toolbar class = "md-primary" >
< span class = "md-title" > Tilde Friends Secure Scuttlebutt Test< / span >
< / md-app-toolbar >
2021-12-28 20:21:23 +00:00
< md-app-drawer md-permanent = "full" >
2021-01-02 18:10:00 +00:00
< md-list >
2021-12-28 20:21:23 +00:00
< md-subheader > Broadcasts< / md-subheader >
2021-01-02 18:10:00 +00:00
< md-list-item v-for = "broadcast in broadcasts" v-bind:key = "JSON.stringify(broadcast)" @ click = "ssb_connect(broadcast)" > {{broadcast.address}}:{{broadcast.port}} < tf-user :id = "broadcast.pubkey" > < / tf-user > < / md-list-item >
< md-subheader > Connections< / md-subheader >
< md-list-item v-for = "connection in connections" v-bind:key = "'connection-' + JSON.stringify(connection)" > < tf-user :id = "connection" > < / tf-user > < / md-list-item >
< md-list-item @ click = "show_connect_dialog = true" > Connect< / md-list-item >
< / md-list >
< / md-app-drawer >
2021-12-29 14:57:10 +00:00
< md-app-toolbar class = "md-secondary" v-show = "unread > 0" >
< md-button @ click = "refresh()" class = "md-raised md-primary" > Refresh< / md-button >
< span class = "md-title" > {{unread}} unread item{{unread == 1 ? '' : 's'}}< / span >
< / md-app-toolbar >
2021-01-02 18:10:00 +00:00
< md-app-content >
Welcome, < tf-user :id = "whoami" > < / tf-user > .
2022-01-27 01:17:22 +00:00
< span v-if = "load_time" style = "float: right" >
Loaded in {{load_time}} seconds.
< md-tooltip v-if = "Object.keys(times).length" style = "height: auto" >
< div v-for = "key in Object.keys(times)" > {{key}}: {{times[key] / 1000.0}} s< / div >
< / md-tooltip >
< / span >
2021-01-02 18:10:00 +00:00
< md-card class = "md-elevation-8" >
< md-card-header >
< div class = "md-title" > What's up?< / div >
< / md-card-header >
< md-card-content >
2021-12-31 19:01:53 +00:00
< md-chip v-if = "reply_root || reply_branch" md-deletable @ md-delete = "reply_root = null; reply_branch = null" > Replying in thread {{reply_root}} to message {{reply_branch}}< / md-chip >
2021-12-31 15:12:46 +00:00
< md-chip v-for = "link in Object.keys(mentions)" v-bind:key = "link" md-deletable @ md-delete = "remove_from_mentions(link)" >
{{mentions[link].name}}: {{link}}
2021-01-09 22:19:52 +00:00
< / md-chip >
2022-01-15 22:11:05 +00:00
< div class = "md-layout" >
< md-field class = "md-layout-item" >
< label > Post a message< / label >
2022-01-29 20:43:19 +00:00
< md-textarea id = "post_text" v-model = "post_text" v-on:paste = "paste" md-autogrow > < / md-textarea >
2022-01-15 22:11:05 +00:00
< / md-field >
< md-card class = "md-layout-item" v-if = "post_text && post_text.length" >
< md-card-content v-html = "markdown(post_text)" > < / md-card-content >
2022-01-29 19:49:01 +00:00
< md-card-content >
< md-card-media v-for = "link in Object.keys(mentions)" v-bind:key = "link" >
< img v-if = "(mentions[link].type || '').startsWith('image/')" :src = "'/' + link + '/view'" >
< / md-card-media >
< / md-card-content >
2022-01-15 22:11:05 +00:00
< / md-card >
< / div >
2021-01-02 18:10:00 +00:00
< / md-card-content >
< md-card-actions >
2022-01-28 03:11:09 +00:00
< md-button class = "md-icon-button" @ click = "attach" >
< md-icon > attach_file< / md-icon >
< / md-button >
2021-01-09 22:19:52 +00:00
< md-menu >
< md-button md-menu-trigger > Share App< / md-button >
< md-menu-content >
2021-12-31 15:12:46 +00:00
< md-menu-item v-for = "app in Object.keys(apps)" v-bind:key = "app" @ click = "add_app_to_mentions(app)" >
2021-01-09 22:19:52 +00:00
{{app}}
< / md-menu-item >
< / md-menu-content >
< / md-menu >
2021-01-02 18:10:00 +00:00
< md-button class = "md-raised md-primary" v-on:click = "post_message()" > Submit Post< / md-button >
< / md-card-actions >
< / md-card >
2022-01-08 20:54:02 +00:00
< md-button v-if = "selected" class = "md-raised md-primary" style = "margin: 1em" @ click = "set_hash(null)" >
< md-icon > home< / md-icon > Home
< / md-button >
< md-card v-if = "selected && selected.charAt(0) == '@'" class = "md-raised md-elevation-8" style = "margin: 1em" >
< md-card-header >
< md-card-header-text >
< div class = "md-title" > {{users[selected] & & users[selected].name ? users[selected].name : selected}}< / div >
< div class = "md-subhead" v-if = "users[selected] && users[selected].name" > {{selected}}< / div >
< / md-card-header-text >
< md-card-media v-if = "users[selected] && users[selected].image" class = "md-medium" >
< div > < img :src = "'/' + (typeof(users[selected].image) == 'string' ? users[selected].image : users[selected].image.link) + '/view'" > < / div >
< / md-card-media >
< / md-card-header >
< md-card-content >
< div v-if = "selected == whoami" >
< md-field >
< label > Name< / label >
< md-input v-model = "edit_profile_name" > < / md-input >
< / md-field >
< md-field >
< label > Description< / label >
< md-textarea v-model = "edit_profile_description" > < / md-textarea >
< / md-field >
< / div >
< template v-if = "users[selected]" >
< div v-if = "users[selected].name" > {{selected}}< / div >
< div v-html = "markdown(users[selected].description)" > < / div >
< / template >
< md-card-actions >
< md-menu md-size = "small" v-if = "users[selected] && users[selected].followers" >
< md-button md-menu-trigger > {{Object.keys(users[selected].followers).length}} followers< / md-button >
< md-menu-content >
2022-01-09 19:27:05 +00:00
< md-menu-item v-for = "id of Object.keys(users[selected].followers)" v-bind:key = "id" > < tf-user :id = "id" > < / tf-user > < / md-menu-item >
2022-01-08 20:54:02 +00:00
< / md-menu-content >
< / md-menu >
< md-menu md-size = "small" v-if = "users[selected] && users[selected].following" >
< md-button md-menu-trigger > {{Object.keys(users[selected].following).length}} following< / md-button >
< md-menu-content >
2022-01-09 19:27:05 +00:00
< md-menu-item v-for = "id of Object.keys(users[selected].following)" v-bind:key = "id" > < tf-user :id = "id" > < / tf-user > < / md-menu-item >
2022-01-08 20:54:02 +00:00
< / md-menu-content >
< / md-menu >
< template v-if = "selected != whoami && users[whoami]" >
< md-button @ click = "follow(selected)" v-if = "!users[whoami].following[selected]" class = "md-raised md-secondary" > Follow< / md-button >
< md-button @ click = "unfollow(selected)" v-else class = "md-raised md-secondary" > Unfollow< / md-button >
< / template >
< md-button @ click = "save_profile" v-if = "selected == whoami" class = "md-primary md-raised" > Save Profile< / md-button >
< / md-card-actions >
< / md-card-content >
< / md-card >
2022-01-07 01:52:47 +00:00
< template v-if = "messages.length" >
< tf-message
v-for="message in messages"
v-bind:message="message"
v-bind:messages="messages"
v-bind:key="message.id"
v-bind:votes="votes">< / tf-message >
< / template >
< md-empty-state v-else-if = "loading" md-label = "Loading..." >
< md-progress-spinner md-mode = "indeterminate" > < / md-progress-spinner >
< / md-empty-state >
< md-empty-state v-else md-label = "Nothing to see here." > < / md-empty-state >
2021-01-02 18:10:00 +00:00
< / md-app-content >
< / md-app >
< / div >
< / body >
< / html >
