Stripped the polls and rewrote to regular messages

front/src/App.vue

@@ -74,14 +74,7 @@ export default {
       });
 
       api.zulip.getMsgs(this.zulipClient, stream, "rules").then((result) => {
-        console.log("messages!",result)
+        this.$store.commit("setRules", result);
-        this.$store.commit(
-          "setRules",
-          result
-          // result.messages
-          //   .filter((m) => m.content.match(/\/poll/gm))
-          //   .map((m) => this.toCSS(m))
-        );
       });
 
       api.zulip.listen(this.zulipClient);

front/src/components/Content/Message.vue

@@ -20,7 +20,7 @@ export default {
       let m = this.message.content.replace("\n", "<br/>");
       m = m.replaceAll('src="', 'src="' + url);
       m = m.replaceAll('href="/', 'href="' + url + "/");
-      return m
+      return m;
     },
     classes() {
       return this.message.reactions.map((r) => "u" + r.emoji_code);

front/src/components/Rules/Rule.vue

@@ -6,33 +6,29 @@
     ></vue3-markdown-it>
   </span>   -->
   <code class="rule">
-    <p>{{ rule.className }} {</p>
+    <p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p>
-    <p
+    <p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p>
-      v-for="dec in rule.rules"
-      :key="dec.text"
-    > &nbsp; {{ dec.text }}</p>
     <p>}</p>
   </code>
 </template>
 
 <script>
+import emoji from "../../mixins/emoji";
+
 export default {
-  name: 'Rule',
+  name: "Rule",
-  props: [ 
+  mixins: [emoji],
-    'rule'
+  props: ["rule"],
-  ],
   computed: {
     rawJSON() {
-      return '```json\n' + JSON.stringify(this.rule, null, 2) + '\n```'
+      return "```json\n" + JSON.stringify(this.rule, null, 2) + "\n```";
     },
-  }
+  },
-}
+};
 </script>
 
 <style>
-
 .rule p {
   margin: 0;
 }
-
 </style>

front/src/components/Rules/Styles.vue

@@ -1,6 +1,9 @@
 <script>
+import emoji from "../../mixins/emoji";
+
 export default {
   name: "Styles",
+  mixins: [emoji],
   computed: {
     rules() {
       return this.$store.state.rules;
@@ -9,38 +12,29 @@ export default {
   data: function () {
     return {
       el: null,
-    }
+    };
   },
   methods: {
     generateStyleRules() {
       let styles = "";
       this.rules.map((r) => {
-        styles  += r.className
+        styles += r.className;
         if (this.containsEmoji(r.className)) {
-          styles += ", .u" + this.toEmojiCode(r.className)
+          styles += ", .u" + this.toEmojiCode(r.className);
         }
-        styles += "{"
+        styles += "{";
         r.rules.map((s) => {
-          styles += s.text;
+          styles += s;
-        })
+        });
-        styles += "}"
+        styles += "}";
-      })
+      });
       return styles;
     },
     insertStyleElement() {
-      var style = document.createElement('style');
+      var style = document.createElement("style");
       style.innerText = this.generateStyleRules();
-      return style
+      return style;
     },
-    containsEmoji(str) {
-      // Regular expression to match emoji
-      const regexExp = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/gi;
-      return regexExp.test(str); // true
-    },
-    toEmojiCode(emoji) {
-      return emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
-    },
-
   },
   mounted: function () {
     this.el = document.head.appendChild(this.insertStyleElement());
@@ -49,7 +43,7 @@ export default {
     rules() {
       let style = this.insertStyleElement();
       this.el.parentNode.replaceChild(style, this.el);
-    }
+    },
-  }
+  },
 };
 </script>

front/src/mixins/emoji.js

@@ -1,34 +1,40 @@
-let toUTF16 = (codePoint) => {
+// let toUTF16 = (codePoint) => {
-  var TEN_BITS = parseInt("1111111111", 2);
+//   var TEN_BITS = parseInt("1111111111", 2);
-  if (codePoint <= 0xffff) {
+//   if (codePoint <= 0xffff) {
-    return u(codePoint);
+//     return u(codePoint);
-  }
+//   }
-  codePoint -= 0x10000;
+//   codePoint -= 0x10000;
-  // Shift right to get to most significant 10 bits
+//   // Shift right to get to most significant 10 bits
-  var leadSurrogate = 0xd800 + (codePoint >> 10);
+//   var leadSurrogate = 0xd800 + (codePoint >> 10);
-  // Mask to get least significant 10 bits
+//   // Mask to get least significant 10 bits
-  var tailSurrogate = 0xdc00 + (codePoint & TEN_BITS);
+//   var tailSurrogate = 0xdc00 + (codePoint & TEN_BITS);
-  return u(leadSurrogate) + (tailSurrogate);
+//   return u(leadSurrogate) + (tailSurrogate);
-}
+// }
 
-let u = (codeUnit) => {
+// let u = (codeUnit) => {
-  return "\\u" + codeUnit.toString(16).toUpperCase();
+//   return "\\u" + codeUnit.toString(16).toUpperCase();
-}
+// }
 
 export default {
   methods: {
-    // toEmojiCode: (emoji) => {
-    //   console.log(emoji);
-    //   emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
-    // },
-    
     toEmojiCode: (emoji) => {
-      emoji.replace(/\p{Emoji}/gu, function (m) {
+      console.log(emoji);
-        toUTF16(m.codePointAt(0));
+      return emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
-      });
-      console.log(emoji)
-      return emoji;
     },
 
+    // toEmojiCode: (emoji) => {
+    //   console.log(emoji)
+    //   emoji.replace(/\p{Emoji}/gu, function (m) {
+    //     toUTF16(m.codePointAt(0));
+    //   });
+    //   console.log(emoji)
+    //   return emoji;
+    // },
+
+    containsEmoji(str) {
+      // Regular expression to match emoji
+      const regexExp = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/gi;
+      return regexExp.test(str); // true
+    },
   }
 }

front/src/store/index.js

@@ -1,53 +1,37 @@
+/*eslint no-unused-vars: "off"*/
+/*eslint no-undef: "off"*/
+
 import { createStore } from 'vuex'
 import emoji from "../mixins/emoji";
+import { stripHtml } from "string-strip-html";
 
-let toCSS = (poll) => {
+var EmojiConvertor = require('emoji-js');
+var emojiConv = new EmojiConvertor();
+
+let toCSS = (message) => {
   let className = "",
     emoji_code = "",
-    options = [],
+    rules = [];
-    rules = [],
+
-    subs = poll.submessages.map((s) => JSON.parse(s.content));
+  // let regex = /[/s]?(?<selector>.+)\s*\n?{\n?(?<prop>[\s\w.~:>-]+\s*:\s*.+;?\n?)*\n?}/gm
-  subs.forEach((sub) => {
+  let regex = /[/s]?(?<selector>.+)\s*\n?{\n?(?<props>(.*;\n?)+)}/gm
-    if (sub.widget_type && sub.widget_type == "poll") {
+  let content = stripHtml(message.content).result;
-      className = sub.extra_data.question;
+  let results = content.matchAll(regex);
+  results = Array.from(results);
+  if (results.length > 0) {
+    className = emojiConv.replace_colons(results[0]['groups']['selector']);
+    if (emoji.methods.containsEmoji(className)) {
       emoji_code = emoji.methods.toEmojiCode(className);
-      // console.log(emoji_code);
-      options = sub.extra_data.options;
-      if (options) {
-        options.forEach((option) => {
-          let r = constructRule(option, options, subs);
-          if (validateRule(r)) {
-            rules.push(r);
     }
-        });
+    rules = results[0]['groups']['props'].split("\n");
-      }
+    rules = rules.filter((rule) => validateRule(rule))
-    } else if (sub.type && sub.type == "new_option") {
-      let r = constructRule(sub.option, options, subs);
-      if (validateRule(r)) {
-        rules.push(r);
-      }
-    }
-  });
     return { className, emoji_code, rules };
   }
-
+  return null;
-let 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 };
 }
 
-// minimal validation. rules have to contain a colon and semicolon
 let validateRule = (rule) => {
-  return rule.text.match(/.+:.+;/gm);
+  return rule.match(/.+:.+;/gm);
 }
 
 export default createStore({
@@ -67,9 +51,14 @@ export default createStore({
     setStreams: (state, streams) => state.streams = streams,
     setContents: (state, messages) => state.contents = messages,
     setRules: (state, messages) => {
-      state.rules = messages.messages
+      // console.log(messages)
-          .filter((m) => m.content.match(/\/poll/gm))
+      state.rules = messages.messages.reduce((acc, cur) => {
-          .map((m) => toCSS(m))
+        let rule = toCSS(cur);
+        if (rule !== null) {
+          acc.push(rule);
+        }
+        return acc
+      }, [])
     },
     selectTag: (state, tag) => state.selectedTag = tag,
   },
@@ -83,7 +72,6 @@ export default createStore({
       .filter(r => (
         r.tags.indexOf(state.selectedTag > -1)
       ))
-    
     )
   }