Merge branch 'jak103:main' into main

app/cypress/e2e/profilePage.cy.ts

@@ -0,0 +1,73 @@
+export {}
+
+describe('Profile page tests', () => {
+    it('should load the page', () => {
+        cy.visit('http://localhost:9001/#/profile');
+    }),
+
+    it('should take me to the edit-profile page', () => {
+        cy.visit('http://localhost:9001/#/profile');
+        cy.get('#edit-profile-button').click();
+        cy.url().should('eq', 'http://localhost:9001/#/profile/edit-profile');
+    })
+
+    it('should take me to the replace-image page', () => {
+        cy.visit('http://localhost:9001/#/profile');
+        cy.get('#replace-image-button').click();
+        cy.url().should('eq', 'http://localhost:9001/#/profile/replace-image');
+    })
+
+    it('should take me to the C league page', () => {
+        cy.visit('http://localhost:9001/#/profile');
+        cy.get('a[href="#/leagueinfo/C"]').click();
+        cy.url().should('eq', 'http://localhost:9001/#/leagueinfo/C');
+    })
+
+    it('should take me to the D league page', () => {
+        cy.visit('http://localhost:9001/#/profile');
+        cy.get('a[href="#/leagueinfo/D"]').click();
+        cy.url().should('eq', 'http://localhost:9001/#/leagueinfo/D');
+    })
+
+    it('should take me to the District 5 team page', () => {
+        cy.visit('http://localhost:9001/#/profile');
+        cy.get('a[href="#/teaminfo/District 5"]').click();
+        cy.url().should('eq', 'http://localhost:9001/#/teaminfo/District%205');
+    })
+
+    it('should take me to the Trash Pandas team page', () => {
+        cy.visit('http://localhost:9001/#/profile');
+        cy.get('a[href="#/teaminfo/Trash Pandas"]').click();
+        cy.url().should('eq', 'http://localhost:9001/#/teaminfo/Trash%20Pandas');
+    })
+})
+
+describe('Replace image tests', () => {
+    it('should grow the image', () => {
+         cy.visit('http://localhost:9001/#/profile/replace-image');
+
+    cy.get('.q-slider__track')
+    .trigger('mousedown', 'topRight')
+    .trigger('mouseup');
+
+    cy.get('.q-img')
+    .should('have.attr', 'style')
+    .and('include', 'width: 220px; height: 220px;')
+});
+
+    it('should shrink the image', () => {
+        cy.visit('http://localhost:9001/#/profile/replace-image')
+        cy.get('.q-slider__track-container')
+        .trigger('mousedown', 'topLeft')
+        .trigger('mouseup');
+        cy.get('.q-img')
+        .should('have.attr', 'style')
+        .and('include', 'width: 50px; height: 50px;')
+    })
+
+    it('should take you back to the main profile page', () => {
+        cy.visit('http://localhost:9001/#/profile/replace-image');
+        cy.contains('span', 'Cancel').click();
+        cy.url().should('eq', 'http://localhost:9001/#/profile');
+    })
+});

app/src/components/ChatComponent.vue

@@ -48,19 +48,36 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useChannelStore } from '../stores/channelStore';
+
+const store = useChannelStore();
+const route = useRoute();
+const chatId = route.params.chatId as string;
 
 interface Message {
   user: string;
   text: string;
   sent: boolean;
 }
 
+interface Channel {
+  channel_name: string;
+  channel_id: string;
+  channel_image: string | null;
+  missed_chats: number;
+  type: string;
+}
+
 const messages = ref<Message[]>([]);
 const newMessage = ref('');
 const chatName = ref('');
 
-chatName.value = 'Chat Name';
+onMounted(() => {
+  const channel: Channel = store.getChannelById(chatId) as Channel;
+  chatName.value = channel.channel_name as string;
+});
 
 function sendMessage() {
   if (newMessage.value.trim() !== '') {

app/src/components/ExampleComponent.vue

@@ -23,6 +23,8 @@ interface Props {
   active: boolean;
 }
 
+
+
 const props = withDefaults(defineProps<Props>(), {
   todos: () => [],
 });

app/src/components/createChannelComponent.vue

@@ -14,14 +14,14 @@
       <div class="q-gutter-sm">
         <q-radio
           v-model="channelType"
-          val="private"
+          val="dm"
           label="Private - Only specific people"
         />
       </div>
       <div class="q-gutter-sm">
         <q-radio
           v-model="channelType"
-          val="public"
+          val="channel"
           label="Public - Anyone in Power Play"
         />
       </div>
@@ -38,14 +38,36 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { useChannelStore } from '../stores/channelStore';
+
+const store = useChannelStore();
+
+interface channel {
+  channel_name: string;
+  channel_id: string;
+  channel_image: string | null;
+  missed_chats: number;
+  type: string;
+}
 
 const router = useRouter();
 
 const channelName = ref('');
 const channelType = ref('');
 
 function handleCreateChannel() {
+  const input: channel = {
+    channel_name: channelName.value,
+    channel_id: '',
+    channel_image: null,
+    missed_chats: 0,
+    type: channelType.value,
+  };
+
   //TODO post request to create new channel. Await Chat ID. Foward to new chat.
-  router.push('/chat');
+  debugger;
+  const createdChannel: channel = store.addChannel(input);
+  console.log(createdChannel);
+  router.push({ name: 'Chat', params: { chatId: createdChannel.channel_id } });
 }
 </script>

app/src/layouts/ChatLayout.vue

@@ -2,23 +2,12 @@
   <q-layout view="lHh Lpr lFf">
     <q-header elevated style="background-color: #343333">
       <q-toolbar>
-        <q-btn
-          flat
-          dense
-          round
-          icon="menu"
-          aria-label="Menu"
-          @click="toggleLeftDrawer"
-          v-if="!$q.screen.lt.md"
-        />
-
         <q-btn
           flat
           dense
           round
           icon="arrow_back"
           aria-label="Back"
-          class="mobile-only"
           @click="goBack"
           v-if="canGoBack"
         />
@@ -36,19 +25,6 @@
       </q-toolbar>
     </q-header>
 
-    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
-      <div class="column">
-        <q-btn
-          v-for="item in navItems"
-          :key="item.label"
-          v-bind="item"
-          class="q-mt-md q-pt-md q-pb-md"
-          style="display: flex; align-items: start; width: 90%"
-          color="black"
-        />
-      </div>
-    </q-drawer>
-
     <q-page-container>
       <router-view />
     </q-page-container>
@@ -65,14 +41,13 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
 
 defineOptions({
   name: 'MainLayout',
 });
 
 const router = useRouter();
-const route = useRoute();
 
 const leftDrawerOpen = ref(false);
 
@@ -81,7 +56,7 @@ function toggleLeftDrawer() {
 }
 
 function goBack() {
-  router.back();
+  router.push({ name: 'ChatPage' });
 }
 
 const canGoBack = computed(() => {

app/src/pages/chat/chatPage.vue

@@ -1,39 +1,81 @@
 <template>
-    <q-page class='row'>
-        <h5 class="q-mt-lg q-mb-sm q-ml-sm">Teams</h5>
-        <CardComponent v-for='channel in teams' :key='channel.channel_id' :type='channel.type' :name='channel.channel_name' :unread='channel.missed_chats' :image='channel.channel_image' :link='link'/>
-        <h5 class="q-mt-lg q-mb-sm q-ml-sm">Leagues</h5>
-        <CardComponent v-for='channel in leagues' :key='channel.channel_id' :type='channel.type' :name='channel.channel_name' :unread='channel.missed_chats' :image='channel.channel_image' :link='link'/>
-        <h5 class="q-mt-lg q-mb-sm q-ml-sm">Channels</h5>
-        <CardComponent v-for='channel in channelType' :key='channel.channel_id' :type='channel.type' :name='channel.channel_name' :unread='channel.missed_chats' :image='channel.channel_image' :link='link'/>
-        <h5 class="q-mt-lg q-mb-sm q-ml-sm">Direct Messages</h5>
-        <CardComponent v-for='channel in dms' :key='channel.channel_id' :type='channel.type' :name='channel.channel_name' :unread='channel.missed_chats' :image='channel.channel_image' :link='link'/>
-    </q-page>
+  <q-page class="row">
+    <h5 class="q-mt-lg q-mb-sm q-ml-sm">Teams</h5>
+    <CardComponent
+      v-for="channel in teams"
+      :key="channel.channel_id"
+      :type="channel.type"
+      :name="channel.channel_name"
+      :unread="channel.missed_chats"
+      :image="channel.channel_image"
+      :link="link"
+    />
+    <h5 class="q-mt-lg q-mb-sm q-ml-sm">Leagues</h5>
+    <CardComponent
+      v-for="channel in leagues"
+      :key="channel.channel_id"
+      :type="channel.type"
+      :name="channel.channel_name"
+      :unread="channel.missed_chats"
+      :image="channel.channel_image"
+      :link="link"
+    />
+    <h5 class="q-mt-lg q-mb-sm q-ml-sm">Channels</h5>
+    <CardComponent
+      v-for="channel in channelType"
+      :key="channel.channel_id"
+      :type="channel.type"
+      :name="channel.channel_name"
+      :unread="channel.missed_chats"
+      :image="channel.channel_image"
+      :link="link"
+    />
+    <h5 class="q-mt-lg q-mb-sm q-ml-sm">Direct Messages</h5>
+    <CardComponent
+      v-for="channel in dms"
+      :key="channel.channel_id"
+      :type="channel.type"
+      :name="channel.channel_name"
+      :unread="channel.missed_chats"
+      :image="channel.channel_image"
+      :link="link"
+    />
+  </q-page>
+  <q-page-sticky position="bottom-right" :offset="[25, 25]">
+    <q-btn fab icon="add" color="blue" @click="handleAddChannnel" />
+  </q-page-sticky>
 </template>
 
-<script setup lang='ts'>
-    import { useChannelStore } from 'app/src/stores/channelStore';
-    import { onMounted } from 'vue';
-    import { defineComponent } from 'vue';
-    import { QPage } from 'quasar';
-    import CardComponent from '../chat/CardComponent.vue';
+<script setup lang="ts">
+import { useChannelStore } from 'app/src/stores/channelStore';
+import { onMounted } from 'vue';
+import { defineComponent } from 'vue';
+import { QPage } from 'quasar';
+import CardComponent from '../chat/CardComponent.vue';
+import router from 'src/router';
+import { useRouter } from 'vue-router';
+const vrouter = useRouter();
 
-    const channelStore = useChannelStore();
-    const { channels } = channelStore;
-    const link = '/';
-    const teams = channels.filter(channel => channel.type === 'team');
-    const leagues = channels.filter(channel => channel.type === 'league');
-    const channelType = channels.filter(channel => channel.type === 'channel');
-    const dms = channels.filter(channel => channel.type === 'dm');
+const channelStore = useChannelStore();
+const { channels } = channelStore;
+const link = '/';
+const teams = channels.filter((channel) => channel.type === 'team');
+const leagues = channels.filter((channel) => channel.type === 'league');
+const channelType = channels.filter((channel) => channel.type === 'channel');
+const dms = channels.filter((channel) => channel.type === 'dm');
 
-    defineComponent({
-        name: 'ChatPage',
-        components: {
-            CardComponent,
-        },
-    });
+function handleAddChannnel() {
+  vrouter.push({ name: 'CreateChannel' });
+}
 
-    onMounted(() => {
-        console.log('Channels:', channels);
-    });
-</script>
+defineComponent({
+  name: 'ChatPage',
+  components: {
+    CardComponent,
+  },
+});
+
+onMounted(() => {
+  console.log('Channels:', channels);
+});
+</script>