doohoyi/chatty-pub
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merged #e6c96a9

Browse source
This commit is contained in:
Heerko 2021-07-07 15:03:36 +02:00
parent 0821443b13
commit 3650281505
13 changed files with 16699 additions and 409 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
front/.gitignore vendored
View file

@ -1,6 +1,6 @@
.DS_Store .DS_Store
node_modules node_modules
#/dist /dist
# local env files # local env files

1
front/dist/css/app.df5afef5.css vendored
View file

@ -1 +0,0 @@
header{box-sizing:border-box}header,nav{margin:1em}li,ul{padding:0}li{list-style:none}:root{--back:#fff}#app,body,html{padding:0;margin:0;background:var(--back)}#app,body,html{height:100%;width:100%}#app{display:flex;font-size:11pt}.side{flex-shrink:0}main{margin:1em}#home{box-sizing:border-box;position:relative;height:100%;width:100%}.semanticList{font-size:inherit}td{padding:1em;padding-bottom:0}th{text-align:left}

2
front/dist/index.html vendored
View file

@ -1 +1 @@
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>front</title><link href="/css/app.df5afef5.css" rel="preload" as="style"><link href="/js/app.c19dbb12.js" rel="preload" as="script"><link href="/js/chunk-vendors.72421b42.js" rel="preload" as="script"><link href="/css/app.df5afef5.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.72421b42.js"></script><script src="/js/app.c19dbb12.js"></script></body></html> <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>front</title><link href="/css/app.217f2b4d.css" rel="preload" as="style"><link href="/css/chunk-vendors.0a40a1e1.css" rel="preload" as="style"><link href="/js/app.46480d73.js" rel="preload" as="script"><link href="/js/chunk-vendors.381e7569.js" rel="preload" as="script"><link href="/css/chunk-vendors.0a40a1e1.css" rel="stylesheet"><link href="/css/app.217f2b4d.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.381e7569.js"></script><script src="/js/app.46480d73.js"></script></body></html>

2
front/dist/js/app.c19dbb12.js vendored
View file

File diff suppressed because one or more lines are too long

1
front/dist/js/app.c19dbb12.js.map vendored
View file

File diff suppressed because one or more lines are too long

14
front/dist/js/chunk-vendors.72421b42.js vendored
View file

File diff suppressed because one or more lines are too long

1
front/dist/js/chunk-vendors.72421b42.js.map vendored
View file

File diff suppressed because one or more lines are too long

16799
front/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

5
front/package.json
View file

@ -13,6 +13,7 @@
"emoji-js": "^3.5.0", "emoji-js": "^3.5.0",
"markdown-it": "^12.0.6", "markdown-it": "^12.0.6",
"moment": "^2.29.1", "moment": "^2.29.1",
"pagedjs": "^0.2.0",
"splitpanes": "^3.0.4", "splitpanes": "^3.0.4",
"string-strip-html": "^8.3.0", "string-strip-html": "^8.3.0",
"vue": "^3.1.1", "vue": "^3.1.1",
@ -22,8 +23,8 @@
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-eslint": "^3.1.1",
"@vue/cli-service": "~4.5.0", "@vue/cli-service": "^4.5.13",
"@vue/compiler-sfc": "^3.0.0", "@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"eslint": "^6.7.2", "eslint": "^6.7.2",

15
front/public/index.html
View file

@ -1,15 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<!-- <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script> -->
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->

130
front/src/App.vue
View file

@ -1,9 +1,5 @@
<template> <template>
<div <div id="app" :class="[{ mobile: isMobile }]">
id="app"
:class="[
{ mobile: isMobile }
]">
<Styles /> <Styles />
<!-- <header> <!-- <header>
@ -47,9 +43,9 @@ export default {
this.getStreams(); this.getStreams();
this.$router.afterEach((to) => { this.$router.afterEach((to) => {
this.$store.commit("setTopics", []); this.$store.commit("setTopics", []);
this.$store.commit("setRules", []); this.$store.commit("setRules", []);
this.$store.commit("setCurStream", to.path.replace("/", "")) this.$store.commit("setCurStream", to.path.replace("/", ""));
if (this.currentStream != "") { if (this.currentStream != "") {
this.setUpDoc(this.currentStream); this.setUpDoc(this.currentStream);
} }
@ -60,85 +56,79 @@ export default {
checkIfMobile: () => window.innerWidth < 700, checkIfMobile: () => window.innerWidth < 700,
getStreams() { getStreams() {
api.zulip.init().then(client => { api.zulip.init().then((client) => {
this.zulipClient = client this.zulipClient = client;
api.zulip.getStreams(client).then(result => { api.zulip.getStreams(client).then((result) => {
this.$store.commit( 'setStreams', this.$store.commit(
result.streams "setStreams",
.filter(s => s.name.startsWith(this.pubStr)) result.streams.filter((s) => s.name.startsWith(this.pubStr))
) );
}) });
api.zulip.listen(this.zulipClient, this.eventHandler) api.zulip.listen(this.zulipClient, this.eventHandler);
}) });
}, },
setUpDoc(stream) { setUpDoc(stream) {
api.zulip.getSubs(this.zulipClient).then((result) => {
api.zulip.getSubs(this.zulipClient).then(result => {
if ( if (
!result.subscriptions !result.subscriptions.map((s) => s.name).includes(this.currentStream)
.map(s => s.name)
.includes(this.currentStream)
) { ) {
api.zulip.addSub(this.zulipClient, this.currentStream) api.zulip.addSub(this.zulipClient, this.currentStream);
} }
})
api.zulip.getAllMsgs(this.zulipClient, stream).then((result) => {
for (let m = 0; m < result.messages.length; m++) {
const message = result.messages[m]
if (message.subject == 'rules') {
this.$store.commit('addRule', message)
} else {
this.$store.commit('addMessage', message)
}
}
}); });
api.zulip.getAllMsgs(this.zulipClient, stream).then((result) => {
for (let m = 0; m < result.messages.length; m++) {
const message = result.messages[m];
if (message.subject == "rules") {
this.$store.commit("addRule", message);
} else {
this.$store.commit("addMessage", message);
}
}
});
}, },
eventHandler(event) { eventHandler(event) {
console.log(event) console.log(event);
switch (event.type) { switch (event.type) {
case "message":
case 'message':
switch (event.message.subject) { switch (event.message.subject) {
case 'content': case "content":
this.$store.commit('addMessage', event.message) this.$store.commit("addMessage", event.message);
break break;
case 'rules': case "rules":
this.$store.commit('addRule', event.message) this.$store.commit("addRule", event.message);
break break;
} }
break break;
case 'delete_message': case "delete_message":
this.$store.commit('deleteMessage', event.message_id) this.$store.commit("deleteMessage", event.message_id);
break break;
case 'update_message': case "update_message":
this.$store.commit('editMessage', { this.$store.commit("editMessage", {
mid: event.message_id, mid: event.message_id,
content: event.rendered_content content: event.rendered_content,
}) });
break break;
case 'reaction': case "reaction":
this.$store.commit(`${event.op}Reaction`, { this.$store.commit(`${event.op}Reaction`, {
mid: event.message_id, mid: event.message_id,
reaction: { reaction: {
emoji_code: event.emoji_code, emoji_code: event.emoji_code,
emoji_name: event.emoji_name, emoji_name: event.emoji_name,
reaction_type: event.reaction_type, reaction_type: event.reaction_type,
} },
}) });
break break;
default: default:
console.log("Event type unknown", event.type) console.log("Event type unknown", event.type);
} }
} },
}, },
}; };
</script> </script>
@ -188,11 +178,11 @@ section {
box-sizing: border-box; box-sizing: border-box;
/* margin-left: 1em; */ /* margin-left: 1em; */
padding: 1em; padding: 1em;
min-width: 800px; /* min-width: 800px; */
max-width: 800px; /* max-width: 800px; */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: scroll; /* overflow: scroll; */
background: lightgray; background: lightgray;
} }
section p { section p {
@ -207,6 +197,8 @@ section .title {
} }
@media print { @media print {
.title { display: none; } .title {
display: none;
}
} }
</style> </style>

47
front/src/components/Content/index.vue
View file

@ -1,53 +1,44 @@
<template> <template>
<section :class="[ 'content', currentStream ]"> <section :class="['content', currentStream]">
<div <div
v-for="topic in sortedTopics" v-for="topic in sortedTopics"
:key="topic.title" :key="topic.title"
:class="[ 'body', topic.title ]" :class="['body', topic.title]"
> >
<h1>{{ topic.title }}</h1> <h1>{{ topic.title }}</h1>
<span <span v-for="message in topic.messages" :key="message.id">
v-for="message in topic.messages" <Message :message="message" />
:key="message.id" <span>&nbsp;</span>
>
<Message
:message="message"
/>
<span>&nbsp;</span>
</span> </span>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
import { mapGetters, mapState } from 'vuex' import { mapGetters, mapState } from "vuex";
import Message from './Message' import Message from "./Message";
export default { export default {
name: 'Content', name: "Content",
components: { components: {
Message, Message,
}, },
computed: { computed: {
...mapState([ ...mapState(["rules", "currentStream"]),
'rules', ...mapGetters(["sortedTopics"]),
'currentStream'
]),
...mapGetters([
'sortedTopics'
])
}, },
methods: { methods: {},
} };
}
</script> </script>
<style scoped> <style scoped>
.content { .content {
max-width: 700px; /* max-width: 700px; */
background: unset; background: unset;
} }
@media print { @media print {
.title { display: none; } .title {
display: none;
}
} }
</style> </style>

89
front/src/views/Home.vue
View file

@ -1,26 +1,33 @@
<template> <template>
<splitpanes class="default-theme"> <div class="pane-wrapper" :class="classes">
<pane size="10" min-size="5"> <button v-if="!show_ui" @click="toggle_ui" class="float-btn ui">
<Streams /> {{ show_ui ? "Hide" : "Show" }} UI
</pane> </button>
<pane size="55"> <splitpanes class="default-theme">
<Content /> <pane v-if="show_ui" size="10" min-size="5">
</pane> <Streams />
<pane size="35" min-size="15"> <button @click="toggle_ui">{{ show_ui ? "Hide" : "Show" }} UI</button>
<Rules /> <button @click="print">Print</button>
</pane> </pane>
<!-- <pane> <pane size="55">
<iframe src="https://chat.hackersanddesigners.nl"></iframe> <Content />
</pane> --> </pane>
</splitpanes> <pane v-if="show_ui" size="35" min-size="15">
<Rules />
</pane>
</splitpanes>
</div>
</template> </template>
<script> <script>
/*eslint no-unused-vars: "off"*/
/*eslint no-undef: "off"*/
import Streams from "../components/Streams"; import Streams from "../components/Streams";
import Content from "../components/Content"; import Content from "../components/Content";
import Rules from "../components/Rules"; import Rules from "../components/Rules";
import { Splitpanes, Pane } from "splitpanes"; import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css"; import "splitpanes/dist/splitpanes.css";
import { Previewer } from "pagedjs";
export default { export default {
name: "Home", name: "Home",
@ -31,6 +38,38 @@ export default {
Splitpanes, Splitpanes,
Pane, Pane,
}, },
data: () => {
return {
show_ui: true,
};
},
computed: {
classes() {
return this.show_ui ? "ui" : "print";
},
},
methods: {
print() {
// let prev = this.show_ui;
this.toggle_ui(null, false);
setTimeout(() => {
window.print();
if (prev) this.toggle_ui(null, true);
}, 1000);
let paged = new Previewer();
console.log(paged);
// let flow = paged
// .preview(DOMContent, ["path/to/css/file.css"], document.body)
// .then((flow) => {
// console.log("Rendered", flow.total, "pages.");
// });
// console.log(flow);
},
toggle_ui(evt, state) {
if (state !== undefined) this.show_ui = state;
else this.show_ui = !this.show_ui;
},
},
}; };
</script> </script>
@ -47,8 +86,30 @@ export default {
overflow-y: scroll; overflow-y: scroll;
} }
.pane-wrapper {
height: 100vh;
}
.print .pane-wrapper {
height: auto;
}
.print .splitpanes__pane {
overflow: initial;
}
iframe { iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.float-btn {
position: fixed;
z-index: 1000;
}
@media print {
.ui {
display: none;
}
}
</style> </style>