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

clean up css rules generation

Browse source
This commit is contained in:
Heerko 2021-06-29 15:29:09 +02:00
parent 609f595293
commit ec9c8a56bf
1 changed files with 94 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

197
front/src/App.vue
View file

@ -14,152 +14,129 @@
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from "vuex";
import api from './api' import api from "./api";
export default { export default {
name: 'App', name: "App",
components: { components: {},
},
data() { data() {
return { return {
api: api, api: api,
zulipClient: null, zulipClient: null,
} };
}, },
computed: { computed: {
...mapState([ ...mapState(["isMobile", "pubStr"]),
'isMobile',
'pubStr'
])
}, },
created() { created() {
this.$store.commit('setMobile', this.checkIfMobile()) this.$store.commit("setMobile", this.checkIfMobile());
window.addEventListener('resize', () => { window.addEventListener("resize", () => {
this.$store.commit('setMobile', this.checkIfMobile()) this.$store.commit("setMobile", this.checkIfMobile());
}) });
this.getStreams() this.getStreams();
this.$router.afterEach(to => { this.$router.afterEach((to) => {
const stream = to.path.replace('/', '') const stream = to.path.replace("/", "");
if (stream != '') { if (stream != "") {
this.setUpDoc(stream) this.setUpDoc(stream);
} else { } else {
this.$store.commit('setContents', []) this.$store.commit("setContents", []);
this.$store.commit('setRules', []) this.$store.commit("setRules", []);
} }
}) });
}, },
methods: { methods: {
checkIfMobile: () => window.innerWidth < 700, checkIfMobile: () => window.innerWidth < 700,
getStreams() { getStreams() {
api.zulip api.zulip.init().then((client) => {
.init() this.zulipClient = client;
.then(client => { api.zulip.getStreams(client).then((result) => {
this.zulipClient = client this.$store.commit(
api.zulip "setStreams",
.getStreams(client) result.streams.filter((s) => s.name.startsWith(this.pubStr))
.then(result => { );
this.$store.commit( 'setStreams', });
result });
.streams
.filter(
s => s.name.startsWith(this.pubStr)
)
)
})
})
}, },
setUpDoc(stream) { setUpDoc(stream) {
api.zulip.getMsgs(this.zulipClient, stream, "content").then((result) => {
this.$store.commit("setContents", result.messages);
});
api.zulip api.zulip.getMsgs(this.zulipClient, stream, "rules").then((result) => {
.getMsgs(this.zulipClient, stream, 'content') console.log("messages!",result)
.then(result => { this.$store.commit(
this.$store.commit('setContents', "setRules",
result result.messages
.messages .filter((m) => m.content.match(/\/poll/gm))
) .map((m) => this.toCSS(m))
}) );
});
api.zulip
.getMsgs(this.zulipClient, stream, 'rules')
.then(result => {
this.$store.commit('setRules',
result
.messages
.map(m =>
this.toCSS(m)
)
)
})
api.zulip.listen(this.zulipClient)
api.zulip.listen(this.zulipClient);
}, },
toCSS(poll) { toCSS(poll) {
let let className = "",
className = '', emoji_code = "",
emoji_code = '',
options = [], options = [],
rules = [], rules = [],
subs = poll subs = poll.submessages.map((s) => JSON.parse(s.content));
.submessages subs.forEach((sub) => {
.map(s => JSON.parse(s.content)) if (sub.widget_type && sub.widget_type == "poll") {
className = sub.extra_data.question;
subs emoji_code = this.toEmojiCode(className);
.forEach(sub => { // console.log(emoji_code);
// console.log(sub) options = sub.extra_data.options;
if (sub.widget_type && sub.widget_type == 'poll') {
className = sub.extra_data.question
emoji_code = this.toEmojiCode(className)
console.log(emoji_code)
options = sub.extra_data.options
if (options) { if (options) {
options.forEach(option => { options.forEach((option) => {
rules.push(this.constructRule(option, options, subs)) let r = this.constructRule(option, options, subs);
}) if (this.validateRule(r)) {
rules.push(r);
} }
} else if (sub.type && sub.type == 'new_option') { });
rules.push(this.constructRule(sub.option, options, subs))
} }
}) } else if (sub.type && sub.type == "new_option") {
return { className, emoji_code, rules } let r = this.constructRule(sub.option, options, subs);
if (this.validateRule(r)) {
rules.push(r);
}
}
});
return { className, emoji_code, rules };
}, },
constructRule(option, options, subs) { constructRule(option, options, subs) {
const const text = option,
text = option, votes = subs.filter(
votes = subs.filter(s => ( (s) =>
s.type == 'vote' && s.type == "vote" &&
s.key.replace('canned,', '') == options.indexOf(option) s.key.replace("canned,", "") == options.indexOf(option)
)), ),
weight = votes.length > 0 ? votes weight =
.map(s => s.vote) votes.length > 0
.reduce((a,b) => a + b) : 0 ? votes.map((s) => s.vote).reduce((a, b) => a + b)
return { text, weight } : 0;
return { text, weight };
}, },
toEmojiCode: emoji => emoji.replace( toEmojiCode: (emoji) =>
/\p{Emoji}/ug, emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16)),
m => m.codePointAt(0).toString(16)
),
// minimal validation. rules have to contain a colon and semicolon
validateRule: (rule) => {
return rule.text.match(/.+:.+;/gm);
} },
} },
};
</script> </script>
<style> <style>
:root { :root {
--back: white; --back: white;
} }
@ -167,14 +144,17 @@ export default {
html, html,
body, body,
#app { #app {
height: 100%; width: 100%; height: 100%;
padding: 0; margin: 0; width: 100%;
padding: 0;
margin: 0;
background: var(--back); background: var(--back);
} }
#app { #app {
position: relative; position: relative;
height: 100%; width: 100%; height: 100%;
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 11pt; font-size: 11pt;
@ -190,7 +170,8 @@ header {
main { main {
position: relative; position: relative;
height: 100%; width: 100%; height: 100%;
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }