Slobs Chatbot V1.0 (n-air-app#737)

* added sidebar and modules component * created all children components * fix obsapi import in Input.ts from vscode autoupdate * reverted env * chatbotAPi added and basic auth completed * fetched default commands from api * default commands mapped and edit enabled * pulled from staging * starting custom commands * modal working, creating custom commands * styling new command * fixing w-textarea-input metadata to be of type Text and not basic Input, and update textarea font size to match twitchalertscss * textarea input add v-validate * minor * minor * added validation to textarea * Removed libnhook * cleared logs * added yarn-error to git ignore and removed getValidations unnecessary code * fetching timers * timers creation and edit is good * fixed things from andy's comments * moved all methods to service, syncing vuex stores across, create commands complete * pagination fix * finished chatAlert interfaces and connected to endpoint * added chat alert module preview * chat alerts preference window showing all alert types * chat alerts can be toggled individually * new alert mini modal added * removed node lib * removed node lib again * added text area back?? * changed chatbot widget inputs to the updated inputs * fixed wtoggleinput * creating new alert frontend complete * added new alert modal controls * almost done with creating new alerts, going to diff branch to fix NumberInput bug * number input bug fix (will conflic with other work * Reverting number input for the PR on number-input-fix branch to be used once merged * dcmal points for amount * removed filters * fixing dropdownMenu * minor * can delete alerts * can edit and delete alerts * fixed some color for td * updated interface type to prefix I * updated state to camelCase * refactored alerts * pulled from staging * minor * fixed andy's comments * removed debugger and changed asset ref path * can toggle enable modtools * merged staging * merging staging * merging chatbot feature * protection caps window * updated background image asset to work in packaged * finished caps protection * added ModTools base and finished symbol protection general * added general link protection * finished mod tools general pref * pulling from remote slobs-chatbot * added new command window again * chatbotpermissions enum converted to object * fixing PR from alexs comments * moved modal id to interfaces * Chatbot Alerts completed (n-air-app#673) * chat alerts can be toggled individually * new alert mini modal added * removed node lib again * added text area back?? * changed chatbot widget inputs to the updated inputs * fixed wtoggleinput * creating new alert frontend complete * added new alert modal controls * almost done with creating new alerts, going to diff branch to fix NumberInput bug * number input bug fix (will conflic with other work * Reverting number input for the PR on number-input-fix branch to be used once merged * dcmal points for amount * removed filters * fixing dropdownMenu * minor * can delete alerts * can edit and delete alerts * fixed some color for td * updated interface type to prefix I * updated state to camelCase * refactored alerts * minor * fixed andy's comments * removed debugger and changed asset ref path * can toggle enable modtools * merging chatbot feature * protection caps window * updated background image asset to work in packaged * pulling from remote slobs-chatbot * added new command window again * chatbotpermissions enum converted to object * fixing PR from alexs comments * moved modal id to interfaces * adding commmand variables * more conf * added command variables * added transitionas * editing command * merging staging * merging chatbot feature * not sure why modallayout and topnav are deleted * added modalLayout ts back * Added topnav again * Added customcommands ts again * added chatbot navigation again * passing custom command object to be edited * can edit custom and default commands * can edit timers * added time picker and aliases * finished advanced add custom command * styled time picker and can add aliases in default commands too * advanced tab Caps protection done * advanced tab Symbol protection done * finished white and black list for link protection * finished blacklist for word protection * can toggle between link-protection and default commands * everything done except validation * fixing deleting custm command argument is required * removed yarn lock and error logs * Added yarn lock back * updated package.json * minor * fixed yarn lock issue * added $t * fixed modalLayout * cleaned up some code * all of alexs feedback except for TimePickerInput * styled side nav a little better but not great * finished some asana tasks on chatbot * pulling from remote * trying to merge staging * trying to merge chatbotfeature * added alphaOnly * fixed andys comments * removed timePicker and vue2-timepicker * slobs chatbot complete except validation (n-air-app#706) * chat alerts can be toggled individually * new alert mini modal added * removed node lib again * added text area back?? * changed chatbot widget inputs to the updated inputs * fixed wtoggleinput * creating new alert frontend complete * added new alert modal controls * almost done with creating new alerts, going to diff branch to fix NumberInput bug * number input bug fix (will conflic with other work * Reverting number input for the PR on number-input-fix branch to be used once merged * dcmal points for amount * removed filters * fixing dropdownMenu * minor * can delete alerts * can edit and delete alerts * fixed some color for td * updated interface type to prefix I * updated state to camelCase * refactored alerts * minor * fixed andy's comments * removed debugger and changed asset ref path * can toggle enable modtools * merging chatbot feature * protection caps window * updated background image asset to work in packaged * finished caps protection * added ModTools base and finished symbol protection general * added general link protection * finished mod tools general pref * pulling from remote slobs-chatbot * added new command window again * chatbotpermissions enum converted to object * fixing PR from alexs comments * moved modal id to interfaces * adding commmand variables * more conf * added command variables * added transitionas * editing command * merging chatbot feature * not sure why modallayout and topnav are deleted * added modalLayout ts back * Added topnav again * Added customcommands ts again * added chatbot navigation again * passing custom command object to be edited * can edit custom and default commands * can edit timers * added time picker and aliases * finished advanced add custom command * styled time picker and can add aliases in default commands too * advanced tab Caps protection done * advanced tab Symbol protection done * finished white and black list for link protection * finished blacklist for word protection * can toggle between link-protection and default commands * everything done except validation * fixing deleting custm command argument is required * removed yarn lock and error logs * Added yarn lock back * updated package.json * fixed yarn lock issue * added $t * fixed modalLayout * cleaned up some code * all of alexs feedback except for TimePickerInput * styled side nav a little better but not great * finished some asana tasks on chatbot * trying to merge chatbotfeature * fixed andys comments * removed timePicker and vue2-timepicker * validating timer alpha * fixed confc * fixed some more asana stuff * added validation on custom commands and timers * added global enable * more fixes * made cooldowns small6 instead of 5 * added permission and cooldowns to custom commands * can toggle visible default commands * styled default command toggle for day mode * permissions look the same as giveaway * adding new formgroup called form wrapper * added reset to modtools * changed settingsSlugs from enum to type * added bits to alerts * 90% done. Currently in QA (n-air-app#729) * chat alerts can be toggled individually * new alert mini modal added * removed node lib again * added text area back?? * changed chatbot widget inputs to the updated inputs * fixed wtoggleinput * creating new alert frontend complete * added new alert modal controls * almost done with creating new alerts, going to diff branch to fix NumberInput bug * number input bug fix (will conflic with other work * Reverting number input for the PR on number-input-fix branch to be used once merged * dcmal points for amount * removed filters * fixing dropdownMenu * minor * can delete alerts * can edit and delete alerts * fixed some color for td * updated interface type to prefix I * updated state to camelCase * refactored alerts * minor * fixed andy's comments * removed debugger and changed asset ref path * can toggle enable modtools * merging chatbot feature * protection caps window * updated background image asset to work in packaged * finished caps protection * added ModTools base and finished symbol protection general * added general link protection * finished mod tools general pref * pulling from remote slobs-chatbot * added new command window again * chatbotpermissions enum converted to object * fixing PR from alexs comments * moved modal id to interfaces * adding commmand variables * more conf * added command variables * added transitionas * editing command * merging chatbot feature * not sure why modallayout and topnav are deleted * added modalLayout ts back * Added topnav again * Added customcommands ts again * added chatbot navigation again * passing custom command object to be edited * can edit custom and default commands * can edit timers * added time picker and aliases * finished advanced add custom command * styled time picker and can add aliases in default commands too * advanced tab Caps protection done * advanced tab Symbol protection done * finished white and black list for link protection * finished blacklist for word protection * can toggle between link-protection and default commands * everything done except validation * fixing deleting custm command argument is required * removed yarn lock and error logs * Added yarn lock back * updated package.json * fixed yarn lock issue * added $t * fixed modalLayout * cleaned up some code * all of alexs feedback except for TimePickerInput * styled side nav a little better but not great * finished some asana tasks on chatbot * trying to merge chatbotfeature * fixed andys comments * removed timePicker and vue2-timepicker * validating timer alpha * fixed confc * fixed some more asana stuff * added validation on custom commands and timers * added global enable * more fixes * made cooldowns small6 instead of 5 * added permission and cooldowns to custom commands * can toggle visible default commands * styled default command toggle for day mode * permissions look the same as giveaway * added banner * added dismissable banner ability * show - as duration for non-timeout in blacklisted word list * reenable auto update * pulled with watch running :( * cant add empty word blacklsit * removed unused state * added pagination and filters by query to work from API * 99% ready for preview build, waiting to screenshots (n-air-app#732) * chat alerts can be toggled individually * new alert mini modal added * removed node lib again * added text area back?? * changed chatbot widget inputs to the updated inputs * fixed wtoggleinput * creating new alert frontend complete * added new alert modal controls * almost done with creating new alerts, going to diff branch to fix NumberInput bug * number input bug fix (will conflic with other work * Reverting number input for the PR on number-input-fix branch to be used once merged * dcmal points for amount * removed filters * fixing dropdownMenu * minor * can delete alerts * can edit and delete alerts * fixed some color for td * updated interface type to prefix I * updated state to camelCase * refactored alerts * minor * fixed andy's comments * removed debugger and changed asset ref path * can toggle enable modtools * merging chatbot feature * protection caps window * updated background image asset to work in packaged * finished caps protection * added ModTools base and finished symbol protection general * added general link protection * finished mod tools general pref * pulling from remote slobs-chatbot * added new command window again * chatbotpermissions enum converted to object * fixing PR from alexs comments * moved modal id to interfaces * adding commmand variables * more conf * added command variables * added transitionas * editing command * merging chatbot feature * not sure why modallayout and topnav are deleted * added modalLayout ts back * Added topnav again * Added customcommands ts again * added chatbot navigation again * passing custom command object to be edited * can edit custom and default commands * can edit timers * added time picker and aliases * finished advanced add custom command * styled time picker and can add aliases in default commands too * advanced tab Caps protection done * advanced tab Symbol protection done * finished white and black list for link protection * finished blacklist for word protection * can toggle between link-protection and default commands * everything done except validation * fixing deleting custm command argument is required * removed yarn lock and error logs * Added yarn lock back * updated package.json * fixed yarn lock issue * added $t * fixed modalLayout * cleaned up some code * all of alexs feedback except for TimePickerInput * styled side nav a little better but not great * finished some asana tasks on chatbot * trying to merge chatbotfeature * fixed andys comments * removed timePicker and vue2-timepicker * validating timer alpha * fixed confc * fixed some more asana stuff * added validation on custom commands and timers * added global enable * more fixes * made cooldowns small6 instead of 5 * added permission and cooldowns to custom commands * can toggle visible default commands * styled default command toggle for day mode * permissions look the same as giveaway * adding new formgroup called form wrapper * added reset to modtools * changed settingsSlugs from enum to type * added bits to alerts * added banner * added dismissable banner ability * show - as duration for non-timeout in blacklisted word list * reenable auto update * pulled with watch running :( * cant add empty word blacklsit * removed unused state * added accurate screenshots * removed sub and mod as autopermit permission * added debounce * finished everything except tab zindex * changed tab css to handle tabs/content as blocks and not absolute * Fix tab styling * removed zindex toggle input * minor tabs content height, remove max-height and add to fill * slobs chatbot - added screenshots, all blockers completed (n-air-app#736) * chat alerts can be toggled individually * new alert mini modal added * removed node lib again * added text area back?? * changed chatbot widget inputs to the updated inputs * fixed wtoggleinput * creating new alert frontend complete * added new alert modal controls * almost done with creating new alerts, going to diff branch to fix NumberInput bug * number input bug fix (will conflic with other work * Reverting number input for the PR on number-input-fix branch to be used once merged * dcmal points for amount * removed filters * fixing dropdownMenu * minor * can delete alerts * can edit and delete alerts * fixed some color for td * updated interface type to prefix I * updated state to camelCase * refactored alerts * minor * fixed andy's comments * removed debugger and changed asset ref path * can toggle enable modtools * merging chatbot feature * protection caps window * updated background image asset to work in packaged * finished caps protection * added ModTools base and finished symbol protection general * added general link protection * finished mod tools general pref * pulling from remote slobs-chatbot * added new command window again * chatbotpermissions enum converted to object * fixing PR from alexs comments * moved modal id to interfaces * adding commmand variables * more conf * added command variables * added transitionas * editing command * merging chatbot feature * not sure why modallayout and topnav are deleted * added modalLayout ts back * Added topnav again * Added customcommands ts again * added chatbot navigation again * passing custom command object to be edited * can edit custom and default commands * can edit timers * added time picker and aliases * finished advanced add custom command * styled time picker and can add aliases in default commands too * advanced tab Caps protection done * advanced tab Symbol protection done * finished white and black list for link protection * finished blacklist for word protection * can toggle between link-protection and default commands * everything done except validation * fixing deleting custm command argument is required * removed yarn lock and error logs * Added yarn lock back * updated package.json * fixed yarn lock issue * added $t * fixed modalLayout * cleaned up some code * all of alexs feedback except for TimePickerInput * styled side nav a little better but not great * finished some asana tasks on chatbot * trying to merge chatbotfeature * fixed andys comments * removed timePicker and vue2-timepicker * validating timer alpha * fixed confc * fixed some more asana stuff * added validation on custom commands and timers * added global enable * more fixes * made cooldowns small6 instead of 5 * added permission and cooldowns to custom commands * can toggle visible default commands * styled default command toggle for day mode * permissions look the same as giveaway * adding new formgroup called form wrapper * added reset to modtools * changed settingsSlugs from enum to type * added bits to alerts * added banner * added dismissable banner ability * show - as duration for non-timeout in blacklisted word list * reenable auto update * cant add empty word blacklsit * removed unused state * added pagination and filters by query to work from API * added accurate screenshots * removed sub and mod as autopermit permission * added debounce * finished everything except tab zindex * changed tab css to handle tabs/content as blocks and not absolute * Fix tab styling * removed zindex toggle input * minor tabs content height, remove max-height and add to fill * fix alex final review * make chatbot big wrapper scrollable again
tearaikazuki · Aug 16, 2018 · 903c622 · 903c622
1 parent aa2657b
commit 903c622
Show file tree

Hide file tree

Showing 94 changed files with 5,922 additions and 50 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -46,4 +46,4 @@
             ]
         }
     ]
-}
+}
diff --git a/app/app.less b/app/app.less
@@ -324,6 +324,20 @@ select {
   opacity: 0;
 }
 
+.fade-enter-active {
+  transition: all .4s ease;
+}
+
+.fade-leave-active {
+  transition: all .2s ease;
+}
+
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
 .v--modal-overlay {
   background: rgba(0, 0, 0, 0.3);
 }
@@ -332,6 +346,8 @@ select {
   background-color: @day-bg;
 }
 
+
+
 // Night theme rules
 .night-theme {
   &.main {
@@ -343,6 +359,10 @@ select {
     background-color: @night-bg;
   }
 
+  .v--modal-overlay {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
   a {
     &:hover {
       color: @white;
@@ -443,4 +463,4 @@ select {
     background-color: @night-accent-light;
     border-color: @night-accent-dark;
   }
-}
+}
diff --git a/app/components/ModalLayout.vue b/app/components/ModalLayout.vue
@@ -21,7 +21,7 @@
     </button>
     <button
       class="button button--action"
-      @click="doneHandler">
+      @click="done">
       {{ $t('Done') }}
     </button>
   </div>
@@ -54,6 +54,11 @@
 .modal-layout-content {
   flex-grow: 1;
   height: 100%;
+  display: flex;
+
+  & > * {
+    width: 100%;
+  }
 }
 
 .modal-layout-spinner {

diff --git a/app/components/ModalLayout.vue.ts b/app/components/ModalLayout.vue.ts
@@ -82,6 +82,14 @@ export default class ModalLayout extends Vue {
     }
   }
 
+  done() {
+    if (this.doneHandler) {
+      this.doneHandler();
+    } else {
+      this.windowsService.closeChildWindow();
+    }
+  }
+
   get loading() {
     return this.appService.state.loading;
   }

diff --git a/app/components/Tabs.vue b/app/components/Tabs.vue
@@ -1,16 +1,14 @@
 <template>
-<div>
-  <div>
-    <div class="tabs">
-      <button
-        v-for="tab in tabs"
-        :key="tab.value"
-        class="tab-button"
-        :class="{ active: tab.value === value }"
-        @click="showTab(tab.value)">
-        {{ tab.name }}
-      </button>
-    </div>
+<div class="tabs__container">
+  <div class="tabs">
+    <button
+      v-for="tab in tabs"
+      :key="tab.value"
+      class="tab-button"
+      :class="{ active: tab.value === value }"
+      @click="showTab(tab.value)">
+      {{ tab.name }}
+    </button>
   </div>
   <div class="tab-content">
     <slot v-for="tab in tabs" :name="tab.value" v-if="tab.value === value"/>
@@ -23,19 +21,25 @@
 <style lang="less" scoped>
 @import "../styles/index";
 
+.tabs__container {
+  height: 100%;
+}
+
 .tabs {
   display: flex;
   background-color: @day-primary;
   box-sizing: border-box;
-  position: absolute;
+  position: relative;
   width: 100%;
   padding: 0 15px;
   height: 54px;
   border-bottom: 1px solid @day-border;
 }
 
 .tab-content {
-  padding-top: 54px;
+  height: calc(~'100% - 54px');
+  position: relative;
+  overflow-y: auto;
 }
 
 .night-theme {

diff --git a/app/components/Tabs.vue.ts b/app/components/Tabs.vue.ts
@@ -9,7 +9,8 @@ export interface ITab {
 @Component({})
 export default class Tabs extends Vue {
 
-  @Prop() tabs: ITab[];
+  @Prop()
+  tabs: ITab[];
 
   @Prop()
   value: string;

diff --git a/app/components/TopNav.vue b/app/components/TopNav.vue
@@ -15,6 +15,13 @@
       :disabled="!isUserLoggedIn || locked">
       <i class="icon-dashboard"/> <span>{{ $t('Dashboard') }}</span>
     </button>
+    <button
+      @click="navigateChatBot"
+      class="tab-button"
+      :class="{ active: page === 'Chatbot' }"
+      :disabled="!isUserLoggedIn || locked">
+      <i class="icon-chatbot"/> {{ $t('Chatbot') }}
+    </button>
     <button
       @click="navigateOverlays"
       class="tab-button"
@@ -96,6 +103,7 @@
   background-color: @day-secondary;
   border-bottom: 1px solid @day-border;
   flex: 0 0 54px;
+  z-index: 1;
 }
 
 .top-nav-right {

diff --git a/app/components/TopNav.vue.ts b/app/components/TopNav.vue.ts
@@ -34,6 +34,10 @@ export default class TopNav extends Vue {
     this.navigationService.navigate('Studio');
   }
 
+  navigateChatBot() {
+    this.navigationService.navigate('Chatbot');
+  }
+
   navigateDashboard() {
     this.navigationService.navigate('Dashboard');
   }

diff --git a/app/components/page-components/Chatbot/ChatbotBase.vue.ts b/app/components/page-components/Chatbot/ChatbotBase.vue.ts
@@ -0,0 +1,97 @@
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+import { ChatbotApiService, ChatbotCommonService } from 'services/chatbot/chatbot';
+import { CustomizationService } from 'services/customization';
+import { Inject } from 'util/injector';
+import Tabs from 'components/Tabs.vue';
+import DropdownMenu from 'components/shared/DropdownMenu.vue';
+import { inputComponents } from 'components/widgets/inputs';
+import FormWrapper from 'components/shared/inputs/FormWrapper.vue';
+
+import {
+  ChatbotPermissionsEnums,
+  ChatbotAutopermitEnums,
+  ChatbotResponseTypes,
+  ChatbotPunishments,
+} from 'services/chatbot/chatbot-interfaces';
+
+import { IListOption } from 'components/shared/inputs'
+
+@Component({
+  components: {
+    ...inputComponents,
+    FormWrapper,
+    Tabs,
+    DropdownMenu,
+  }
+})
+export default class ChatbotBase extends Vue {
+  @Inject() chatbotApiService: ChatbotApiService;
+  @Inject() chatbotCommonService: ChatbotCommonService;
+  @Inject() customizationService: CustomizationService;
+
+  mounted() {
+    // pre-load them to switch between 2 windows
+    this.chatbotApiService.fetchDefaultCommands();
+    this.chatbotApiService.fetchLinkProtection();
+  }
+
+  get nightMode() {
+    return this.customizationService.nightMode;
+  }
+
+  get chatbotPermissionsEnums() {
+    return ChatbotPermissionsEnums;
+  }
+
+  get chatbotPermissions() {
+    let permissions = Object.keys(ChatbotPermissionsEnums).reduce(
+      (a: IListOption<number>[], b: string) => {
+        if (typeof ChatbotPermissionsEnums[b] === 'number') {
+          a.push({
+            title: b.split('_').join(' '),
+            value: ChatbotPermissionsEnums[b]
+          });
+        }
+        return a;
+      },
+      []
+    );
+    return permissions;
+  }
+
+  get chatbotAutopermitOptions() {
+    let permissions = Object.keys(ChatbotAutopermitEnums).reduce(
+      (a: IListOption<number>[], b: string) => {
+        if (typeof ChatbotAutopermitEnums[b] === 'number') {
+          a.push({
+            title: b.split('_').join(' '),
+            value: ChatbotAutopermitEnums[b]
+          });
+        }
+        return a;
+      },
+      []
+    );
+    return permissions;
+  }
+
+
+  get chatbotResponseTypes() {
+    return Object.keys(ChatbotResponseTypes).map(responseType => {
+      return {
+        value: ChatbotResponseTypes[responseType],
+        title: responseType
+      };
+    });
+  }
+
+  get chatbotPunishments() {
+    return Object.keys(ChatbotPunishments).map(punishmentType => {
+      return {
+        value: ChatbotPunishments[punishmentType],
+        title: punishmentType
+      };
+    });
+  }
+}
diff --git a/app/components/page-components/Chatbot/ChatbotCommands.vue b/app/components/page-components/Chatbot/ChatbotCommands.vue
@@ -0,0 +1,23 @@
+<template>
+<div class="height--100">
+  <Tabs :tabs="tabs" :value="selectedTab" @input="onSelectTab">
+    <div slot='custom'>
+      <transition name="fade" mode="out-in" appear>
+        <ChatbotCustomCommands />
+      </transition>
+    </div>
+    <div slot="default">
+      <transition name="fade" mode="out-in">
+        <ChatbotDefaultCommands />
+      </transition>
+    </div>
+    <div slot="variables">
+      <transition name="fade" mode="out-in">
+        <ChatbotCommandVariables />
+      </transition>
+    </div>
+  </Tabs>
+</div>
+</template>
+
+<script lang='ts' src="./ChatbotCommands.vue.ts"></script>
diff --git a/app/components/page-components/Chatbot/ChatbotCommands.vue.ts b/app/components/page-components/Chatbot/ChatbotCommands.vue.ts
@@ -0,0 +1,37 @@
+import { Component, Prop } from 'vue-property-decorator';
+import ChatbotDefaultCommands from 'components/page-components/Chatbot/Commands/ChatbotDefaultCommands.vue';
+import ChatbotCustomCommands from 'components/page-components/Chatbot/Commands/ChatbotCustomCommands.vue';
+import ChatbotCommandVariables from 'components/page-components/Chatbot/Commands/ChatbotCommandVariables.vue';
+import ChatbotBase from 'components/page-components/Chatbot/ChatbotBase.vue';
+import { ITab } from 'components/Tabs.vue';
+@Component({
+  components: {
+    ChatbotDefaultCommands,
+    ChatbotCustomCommands,
+    ChatbotCommandVariables
+  }
+})
+export default class ChatbotCommands extends ChatbotBase {
+  tabs: ITab[] = [
+    {
+      name: 'Custom Commands',
+      value: 'custom'
+    },
+    {
+      name: 'Default Commands',
+      value: 'default'
+    },
+    {
+      name: 'Variables',
+      value: 'variables'
+    }
+  ];
+
+  selectedTab = 'custom';
+
+  onSelectTab(tab: string) {
+    this.selectedTab = tab;
+  }
+}
+
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,4 +46,4 @@ @@
                 ]
             }
         ]
-    }
+    }