merged #e6c96a9
This commit is contained in:
Heerko
parent
0821443b13
commit
3650281505
13 changed files with 16699 additions and 409 deletions
2
front/.gitignore
vendored
2
front/.gitignore
vendored
|
|
@ -1,6 +1,6 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
#/dist
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
|
|
|
|||
1
front/dist/css/app.df5afef5.css
vendored
1
front/dist/css/app.df5afef5.css
vendored
|
|
@ -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
2
front/dist/index.html
vendored
|
|
@ -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
2
front/dist/js/app.c19dbb12.js
vendored
File diff suppressed because one or more lines are too long
1
front/dist/js/app.c19dbb12.js.map
vendored
1
front/dist/js/app.c19dbb12.js.map
vendored
File diff suppressed because one or more lines are too long
14
front/dist/js/chunk-vendors.72421b42.js
vendored
14
front/dist/js/chunk-vendors.72421b42.js
vendored
File diff suppressed because one or more lines are too long
1
front/dist/js/chunk-vendors.72421b42.js.map
vendored
1
front/dist/js/chunk-vendors.72421b42.js.map
vendored
File diff suppressed because one or more lines are too long
16797
front/package-lock.json
generated
16797
front/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -13,6 +13,7 @@
|
|||
"emoji-js": "^3.5.0",
|
||||
"markdown-it": "^12.0.6",
|
||||
"moment": "^2.29.1",
|
||||
"pagedjs": "^0.2.0",
|
||||
"splitpanes": "^3.0.4",
|
||||
"string-strip-html": "^8.3.0",
|
||||
"vue": "^3.1.1",
|
||||
|
|
@ -22,8 +23,8 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "^3.1.1",
|
||||
"@vue/cli-service": "^4.5.13",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
|
|
|
|||
|
|
@ -1,15 +1,20 @@
|
|||
<!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.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<!-- <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script> -->
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
<template>
|
||||
<div
|
||||
id="app"
|
||||
:class="[
|
||||
{ mobile: isMobile }
|
||||
]">
|
||||
<div id="app" :class="[{ mobile: isMobile }]">
|
||||
<Styles />
|
||||
|
||||
<!-- <header>
|
||||
|
|
@ -47,9 +43,9 @@ export default {
|
|||
this.getStreams();
|
||||
|
||||
this.$router.afterEach((to) => {
|
||||
this.$store.commit("setTopics", []);
|
||||
this.$store.commit("setRules", []);
|
||||
this.$store.commit("setCurStream", to.path.replace("/", ""))
|
||||
this.$store.commit("setTopics", []);
|
||||
this.$store.commit("setRules", []);
|
||||
this.$store.commit("setCurStream", to.path.replace("/", ""));
|
||||
if (this.currentStream != "") {
|
||||
this.setUpDoc(this.currentStream);
|
||||
}
|
||||
|
|
@ -60,85 +56,79 @@ export default {
|
|||
checkIfMobile: () => window.innerWidth < 700,
|
||||
|
||||
getStreams() {
|
||||
api.zulip.init().then(client => {
|
||||
this.zulipClient = client
|
||||
api.zulip.getStreams(client).then(result => {
|
||||
this.$store.commit( 'setStreams',
|
||||
result.streams
|
||||
.filter(s => s.name.startsWith(this.pubStr))
|
||||
)
|
||||
})
|
||||
api.zulip.listen(this.zulipClient, this.eventHandler)
|
||||
})
|
||||
api.zulip.init().then((client) => {
|
||||
this.zulipClient = client;
|
||||
api.zulip.getStreams(client).then((result) => {
|
||||
this.$store.commit(
|
||||
"setStreams",
|
||||
result.streams.filter((s) => s.name.startsWith(this.pubStr))
|
||||
);
|
||||
});
|
||||
api.zulip.listen(this.zulipClient, this.eventHandler);
|
||||
});
|
||||
},
|
||||
|
||||
setUpDoc(stream) {
|
||||
|
||||
api.zulip.getSubs(this.zulipClient).then(result => {
|
||||
api.zulip.getSubs(this.zulipClient).then((result) => {
|
||||
if (
|
||||
!result.subscriptions
|
||||
.map(s => s.name)
|
||||
.includes(this.currentStream)
|
||||
!result.subscriptions.map((s) => s.name).includes(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.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);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
eventHandler(event) {
|
||||
console.log(event)
|
||||
console.log(event);
|
||||
switch (event.type) {
|
||||
|
||||
case 'message':
|
||||
case "message":
|
||||
switch (event.message.subject) {
|
||||
case 'content':
|
||||
this.$store.commit('addMessage', event.message)
|
||||
break
|
||||
case 'rules':
|
||||
this.$store.commit('addRule', event.message)
|
||||
break
|
||||
case "content":
|
||||
this.$store.commit("addMessage", event.message);
|
||||
break;
|
||||
case "rules":
|
||||
this.$store.commit("addRule", event.message);
|
||||
break;
|
||||
}
|
||||
break
|
||||
break;
|
||||
|
||||
case 'delete_message':
|
||||
this.$store.commit('deleteMessage', event.message_id)
|
||||
break
|
||||
case "delete_message":
|
||||
this.$store.commit("deleteMessage", event.message_id);
|
||||
break;
|
||||
|
||||
case 'update_message':
|
||||
this.$store.commit('editMessage', {
|
||||
case "update_message":
|
||||
this.$store.commit("editMessage", {
|
||||
mid: event.message_id,
|
||||
content: event.rendered_content
|
||||
})
|
||||
break
|
||||
content: event.rendered_content,
|
||||
});
|
||||
break;
|
||||
|
||||
case 'reaction':
|
||||
case "reaction":
|
||||
this.$store.commit(`${event.op}Reaction`, {
|
||||
mid: event.message_id,
|
||||
reaction: {
|
||||
emoji_code: event.emoji_code,
|
||||
emoji_name: event.emoji_name,
|
||||
reaction_type: event.reaction_type,
|
||||
}
|
||||
})
|
||||
break
|
||||
},
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log("Event type unknown", event.type)
|
||||
console.log("Event type unknown", event.type);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -188,11 +178,11 @@ section {
|
|||
box-sizing: border-box;
|
||||
/* margin-left: 1em; */
|
||||
padding: 1em;
|
||||
min-width: 800px;
|
||||
max-width: 800px;
|
||||
/* min-width: 800px; */
|
||||
/* max-width: 800px; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
/* overflow: scroll; */
|
||||
background: lightgray;
|
||||
}
|
||||
section p {
|
||||
|
|
@ -207,6 +197,8 @@ section .title {
|
|||
}
|
||||
|
||||
@media print {
|
||||
.title { display: none; }
|
||||
.title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,53 +1,44 @@
|
|||
<template>
|
||||
<section :class="[ 'content', currentStream ]">
|
||||
<section :class="['content', currentStream]">
|
||||
<div
|
||||
v-for="topic in sortedTopics"
|
||||
:key="topic.title"
|
||||
:class="[ 'body', topic.title ]"
|
||||
:class="['body', topic.title]"
|
||||
>
|
||||
<h1>{{ topic.title }}</h1>
|
||||
<span
|
||||
v-for="message in topic.messages"
|
||||
:key="message.id"
|
||||
>
|
||||
<Message
|
||||
:message="message"
|
||||
/>
|
||||
<span> </span>
|
||||
<span v-for="message in topic.messages" :key="message.id">
|
||||
<Message :message="message" />
|
||||
<span> </span>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapState } from 'vuex'
|
||||
import Message from './Message'
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
import Message from "./Message";
|
||||
|
||||
export default {
|
||||
name: 'Content',
|
||||
name: "Content",
|
||||
components: {
|
||||
Message,
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'rules',
|
||||
'currentStream'
|
||||
]),
|
||||
...mapGetters([
|
||||
'sortedTopics'
|
||||
])
|
||||
...mapState(["rules", "currentStream"]),
|
||||
...mapGetters(["sortedTopics"]),
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
max-width: 700px;
|
||||
/* max-width: 700px; */
|
||||
background: unset;
|
||||
}
|
||||
@media print {
|
||||
.title { display: none; }
|
||||
.title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,26 +1,33 @@
|
|||
<template>
|
||||
<splitpanes class="default-theme">
|
||||
<pane size="10" min-size="5">
|
||||
<Streams />
|
||||
</pane>
|
||||
<pane size="55">
|
||||
<Content />
|
||||
</pane>
|
||||
<pane size="35" min-size="15">
|
||||
<Rules />
|
||||
</pane>
|
||||
<!-- <pane>
|
||||
<iframe src="https://chat.hackersanddesigners.nl"></iframe>
|
||||
</pane> -->
|
||||
</splitpanes>
|
||||
<div class="pane-wrapper" :class="classes">
|
||||
<button v-if="!show_ui" @click="toggle_ui" class="float-btn ui">
|
||||
{{ show_ui ? "Hide" : "Show" }} UI
|
||||
</button>
|
||||
<splitpanes class="default-theme">
|
||||
<pane v-if="show_ui" size="10" min-size="5">
|
||||
<Streams />
|
||||
<button @click="toggle_ui">{{ show_ui ? "Hide" : "Show" }} UI</button>
|
||||
<button @click="print">Print</button>
|
||||
</pane>
|
||||
<pane size="55">
|
||||
<Content />
|
||||
</pane>
|
||||
<pane v-if="show_ui" size="35" min-size="15">
|
||||
<Rules />
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*eslint no-unused-vars: "off"*/
|
||||
/*eslint no-undef: "off"*/
|
||||
import Streams from "../components/Streams";
|
||||
import Content from "../components/Content";
|
||||
import Rules from "../components/Rules";
|
||||
import { Splitpanes, Pane } from "splitpanes";
|
||||
import "splitpanes/dist/splitpanes.css";
|
||||
import { Previewer } from "pagedjs";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
|
|
@ -31,6 +38,38 @@ export default {
|
|||
Splitpanes,
|
||||
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>
|
||||
|
||||
|
|
@ -47,8 +86,30 @@ export default {
|
|||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.pane-wrapper {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.print .pane-wrapper {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.print .splitpanes__pane {
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.float-btn {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.ui {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue