Merge pull request #9 from AQUASINE/staging

Staging

src/components/AlwaysRuleContent.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>
+    Always is the default behavior. Change the rule to something else to have the action run conditionally.
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/CompactCheckbox.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="checkbox__compact">
+    <v-checkbox :label="label" v-model="model"></v-checkbox>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+});
+
+const model = defineModel();
+
+</script>
+<style scoped>
+.checkbox__compact {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  font-size: 0.85em;
+}
+
+.checkbox__compact >>> .v-checkbox {
+  font-size: 0.95rem;
+  margin-top: -0.5rem;
+  margin-bottom: -2rem;
+  margin-left: -0.5rem;
+}
+
+.checkbox__compact >>> .v-label {
+  font-size: 0.85rem;
+  color: var(--text) !important;
+  opacity: 1;
+}
+
+</style>

src/components/ConfigurationTab.vue

@@ -9,21 +9,7 @@
     <IconSectionHeader icon="mdi-ruler">Rules</IconSectionHeader>
     <RulesCard/>
     <IconSectionHeader icon="mdi-cog">Output</IconSectionHeader>
-    <div class="container__output-card">
-      <div class="item__output-port">
-        <v-icon icon="mdi-connection"></v-icon>
-        <div class="output__port-name">
-          Output Port
-        </div>
-        <input type="number" class="input__output-port" v-model="outputPort"/>
-      </div>
-      <div class="item__consume-mode">
-        <v-checkbox label="Consume Mode"></v-checkbox>
-      </div>
-      <div class="item__consume-mode">
-        <v-checkbox label="Log to file"></v-checkbox>
-      </div>
-    </div>
+    <OutputCard :outputPort="outputPort"/>
     <div class="button__save">
       Save
       </div>
@@ -34,13 +20,13 @@ import DataSourceCard from "./DataSourceCard.vue";
 import {ref} from "vue";
 import RulesCard from "./RulesCard.vue";
 import IconSectionHeader from "./IconSectionHeader.vue";
+import OutputCard from "./OutputCard.vue";
 
 const dataSources = ref([
   { name: 'AQUASINE', type: 'ttv', connected: true, startingScore: 100 },
   { name: 'AQUASINE', type: 'youtube', connected: false, startingScore: 100 },
 ]);
 
-const outputPort = ref(8765);
 
 </script>
 <style scoped>
@@ -66,52 +52,7 @@ input[type=number]::-webkit-outer-spin-button {
   color: var(--text-mute);
 }
 
-.container__output-card {
-  background-color: var(--bg3);
-  padding: 0.75rem;
-  border-radius: 0.25rem;
-}
 
-.item__output-port {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.85em;
-  margin-bottom: 0.5rem;
-}
-
-.item__output-port .input__output-port {
-  border-radius: 8px;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  width: 50px;
-  height: 30px;
-  background-color: var(--bg2);
-  text-align: center;
-  border: 1px solid transparent;
-  transition: border-color 0.25s;
-}
-
-.item__consume-mode {
-  display: flex;
-  align-items: center;
-  justify-content: left;
-  font-size: 0.85em;
-}
-
-.item__consume-mode >>> .v-checkbox {
-  font-size: 0.95rem;
-  margin-top: -0.5rem;
-  margin-bottom: -2rem;
-  margin-left: -0.5rem;
-}
-
-.item__consume-mode >>> .v-label {
-  font-size: 0.85rem;
-  color: var(--text) !important;
-  opacity: 1;
-}
 
 .button__save {
   display: flex;

src/components/ContainsRuleContent.vue

@@ -0,0 +1,29 @@
+<script setup>
+import {ref} from "vue";
+import CompactCheckbox from "./CompactCheckbox.vue";
+
+const contains = ref('');
+const caseSensitive = ref(false);
+
+</script>
+
+<template>
+<div>
+  This will check each message to see if it contains the following input:
+  <input type="text" v-model="contains" class="input__contains" placeholder="Contains..." />
+  <CompactCheckbox label="Case Sensitive" v-model="caseSensitive"/>
+</div>
+</template>
+
+<style scoped>
+.input__contains {
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--bg4);
+  background-color: var(--bg2);
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
+  color: var(--text);
+}
+</style>

src/components/DefaultRuleContent.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    This is the default rule content. If you are seeing this, then the selected rule type <code>{{ type }}</code> has not yet been implemented.
+  </div>
+</template>
+<script>
+export default {
+  name: 'DefaultRuleContent',
+  props: {
+    type: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>

src/components/ExactMatchRuleContent.vue

@@ -0,0 +1,30 @@
+<script setup>
+import {ref} from "vue";
+import CompactCheckbox from "./CompactCheckbox.vue";
+
+const contains = ref('');
+const caseSensitive = ref(false);
+
+</script>
+
+<template>
+<div>
+  This will check each message to see if it exactly matches the following input:
+  <input type="text" v-model="contains" class="input__contains" placeholder="Contains..." />
+  <CompactCheckbox label="Case Sensitive" v-model="caseSensitive"/>
+</div>
+</template>
+
+<style scoped>
+.input__contains {
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--bg4);
+  background-color: var(--bg2);
+  font-size: 1em;
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
+  color: var(--text);
+}
+</style>

src/components/FuzzyMatchRuleContent.vue

@@ -0,0 +1,26 @@
+<script setup>
+import {ref} from "vue";
+
+const contains = ref('');
+
+</script>
+
+<template>
+<div>
+  This will check each message to see if it matches the following input with some flexibility:
+  <input type="text" v-model="contains" class="input__contains" placeholder="Contains..." />
+</div>
+</template>
+
+<style scoped>
+.input__contains {
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--bg4);
+  background-color: var(--bg2);
+  font-size: 0.95em;
+  margin-top: 0.5rem;
+  color: var(--text);
+}
+</style>

src/components/MessagesView.vue

@@ -6,7 +6,7 @@
           Messages
         </div>
         <v-icon icon="mdi-pause" class="ml-3" @click="toggleLock" :class="{'icon-disable': locked}"/>
-        <v-icon :icon="hidden ? 'mdi-eye' : 'mdi-eye-off'" class="ml-3" @click="toggleHidden"/>
+        <v-icon :icon="hidden ? 'mdi-eye-off' : 'mdi-eye'" class="ml-3" @click="toggleHidden"/>
         <v-icon :icon="sortIcon" class="ml-3" @click="cycleSortType"/>
       </div>
       <div>
@@ -144,6 +144,10 @@ export default {
   width: 100%;
 }
 
+.item__message:last-child {
+  border-bottom: none;
+}
+
 .item__score {
   background-color: var(--bg2);
   width: 80px;

src/components/OutputCard.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="container__output-card">
+    <div class="item__output-port">
+      <v-icon icon="mdi-connection"></v-icon>
+      <div class="output__port-name">
+        Output Port
+      </div>
+      <input type="number" class="input__output-port" v-model="outputPort"/>
+    </div>
+    <CompactCheckbox v-model="consumeMode" label="Consume Mode"/>
+    <CompactCheckbox v-model="logToFile" label="Log to file"/>
+  </div>
+</template>
+<script setup>
+import {ref} from "vue";
+import CompactCheckbox from "./CompactCheckbox.vue";
+
+const outputPort = ref(8765);
+const consumeMode = ref(false);
+const logToFile = ref(false);
+
+</script>
+<style scoped>
+
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.container__output-card {
+  background-color: var(--bg3);
+  padding: 0.75rem;
+  border-radius: 0.25rem;
+}
+
+.item__output-port {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85em;
+  margin-bottom: 0.5rem;
+}
+
+.item__output-port .input__output-port {
+  border-radius: 8px;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  width: 50px;
+  height: 30px;
+  background-color: var(--bg2);
+  text-align: center;
+  border: 1px solid transparent;
+  transition: border-color 0.25s;
+}
+
+.item__consume-mode {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  font-size: 0.85em;
+}
+
+</style>

src/components/PresentationModeCenterView.vue

@@ -15,7 +15,8 @@ const worstChatter = computed(() => {
   if (users.value.length === 0) {
     return null;
   }
-  return users.value[users.value.length - 1];
+  return users.value[0]
+  // return users.value[users.value.length - 1];
 });
 
 onMounted(() => {
@@ -112,7 +113,7 @@ onMounted(() => {
     <div class="container__message-box-wrapper">
       <div class="container__message-box">
         <div>
-          Our worst chatter is:
+          Our best chatter is:
         </div>
         <div v-if="worstChatter">
 

src/components/PrimaryCenterView.vue

@@ -27,6 +27,7 @@
         <div v-else class="container__tab-panel">
           <div class="card__title">Rule Tuning</div>
           <TuningCard title="Regex" ruleId="08bdfaedb6"/>
+
         </div>
       </div>
     </div>

src/components/RegexConfigCard.vue → src/components/RegexRuleContent.vue

@@ -1,12 +1,5 @@
 <template>
   <div class="card__regex">
-    <div class="header__row-name">
-      <h1>Regex</h1>
-      <v-icon icon="mdi-pencil"></v-icon>
-    </div>
-    <div class="item__description">
-      Match messages with a specific regex pattern.
-    </div>
     <div class="container__regex-input">
       <codemirror v-model="regex" class="input__regex" @input="validateRegex"
                   :extensions="extensions" :options="{lineNumbers: false, theme: 'one-dark'}">