From ec9c8a56bf495c69f9081bf086f36280bedbf069 Mon Sep 17 00:00:00 2001
From: Heerko <heerko@swummoq.net>
Date: Tue, 29 Jun 2021 15:29:09 +0200
Subject: [PATCH] clean up css rules generation

---
 front/src/App.vue | 207 +++++++++++++++++++++-------------------------
 1 file changed, 94 insertions(+), 113 deletions(-)

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