~hokiegeek/crooked-monkey-vue

c05ba47830bd11015dad805651b50b2e893a170b — HokieGeek 2 months ago ebb2610
Taking me quite some effort to handle these programs
A src/components/program/details.vue => src/components/program/details.vue +286 -0
@@ 0,0 1,286 @@
<template>
  <div v-if="data" class="columns is-centered p-2">
    <div class="column is-one-third" style="background-color: #0a0a0c; height: 100vh">
      <div class="columns">

        <!-- div class="column">
          <div style="position: relative">
            <a :href="data.url" target="_blank">
              <thumbnail :item="data" size="medium" overlay/>
            </a>
          </div>
        </!-->

        <!-- div class="column">
          <div class="subtitle">{{ data.title }}</div>
          <div>channel: {{ data.channelId }}</div>
          <div>
            <privacy-status-symbol :status="data.privacyStatus"/> {{ data.publishedAt }}
            <span v-if="data.licensedContent">
              under {{ data.license }}
            </span>
          </div>
        </!-->

      </div>

      <!--
      <article class="message" v-if="data.userData.comments">
        <div class="message-body has-background-dark">
          <description :text="data.userData.comments" />
        </div>
      </article>

      <article class="message">
        <div class="message-body has-background-dark">
          <description :text="data.description" />
        </div>
      </article>

      <div>linked: {{ data.userLinked }}</div>
      <div>activity type: {{ data.userData.activityType }}</div>
      <tags size="medium" :tags="data.userData.tags" @update="updateTags" :readonly="!auth.isAuthorized()"/>

      <div>rating: {{ data.userData.rating }}</div>
      <div>effort: {{ data.userData.effort }}</div>
      <div>skillLevel: {{ data.userData.skillLevel }}</div>
      -->
    </div>

    <div class="column">
      <!-- session-item v-for="item in items" :key="item.id" :kind="item.kind" :data="item.data"/-->
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, inject, Ref, watchEffect } from 'vue';
import { useRouter } from 'vue-router'
import { Auth } from '@/services/auth';
import { YTPulseApi, YTPulseAuthError } from '@/services/ytpulse';
import description from '@/components/description.vue';
import thumbnail from '@/components/thumbnail.vue';
// import sessionItem from '@/components/session/session-item.vue';
import privacyStatusSymbol from '@/components/privacy-status-symbol.vue';

class YtPulseSessionItem {
	kind: string;
	id: string;
	position: number;
  data: string;

  constructor(kind: string, id: string, position: number, data: string) {
    this.kind = kind;
    this.id = id;
    this.position = position;
    this.data = data;
  }
}

export default defineComponent({
  name: 'program-details',
  // props: ['data'],
  props: {
    data: {
      type: Object
    }
  },
  components: {
    // description,
    // thumbnail,
    // sessionItem,
    // privacyStatusSymbol,
  },
  setup (props) {
    const program = ref()
    const items: Ref<YtPulseSessionItem[]> = ref([])
    const auth: Auth | undefined = inject('auth');
    const ytpulse: YTPulseApi | undefined = inject('ytpulse');
    const router = useRouter()

    watchEffect(() => program.value = props.data)

/*
    const video = async (id: string): Promise<any> => {
      // return 'TODO: [video] ' + id
          const user = auth?.getUser()
          if (user) {
            await ytpulse?.getVideo(user, id, false)
            .then(response => {
              console.log("vid()", response)
              return response
            })
            .catch(error => {
              console.error(error)
            })
          }
          return 'shit'
    }

    const session = computed((id: string) => {
      return 'TODO: [session] ' + id
    })
    */

    const updateTags = (tags: Array<string>) => {
      /*
      const user = auth?.getUser()
      if (user && props.data) {
        const vid = props.data
        vid.userData.tags = tags
        ytpulse?.updateVideo(user, vid.id, vid)
        .then(response => {
          if (response.status == 200)  {
            session.value.userData.tags = tags
          } else {
            console.error("wtf?")
          }
        })
        .catch(error => {
          console.error(error)
        })
      }
      */
    }

/*
    onMounted(() => {
      console.log("afp: data: ", props.data)
      const seshget = setInterval(function () {
        if (auth?.isAuthorized()) {
          const user = auth?.getUser()
          if (user && props.data) {
            ytpulse?.getSessionItems(user, props.data.id)
            .then(response => {
              // items.value = response.data
              // itemsResp = response.data
              // response.data.items.forEach((item: YtPulseSessionItem) => {
              console.log("items?", response)
              response.items.forEach((item: YtPulseSessionItem) => {
                // console.log("el", item) 
                items.value[item.position] = {
                  kind: item.kind,
                  position: item.position,
                  id: item.id,
                  data: '',
                }
                let p;
                switch(item.kind) {
                  case 'collection':
                    p = ytpulse?.getSession(user, item.id, false)
                    break
                  default: // video
                    p = ytpulse?.getVideo(user, item.id, false)
                    break
                }
                p
                .then(response => {
                  items.value[item.position].data = response
                  // console.log("%s %s:", item.kind, item.id, items.value[item.position].data)
                })
                .catch(error => {
                  console.error(error)
                })

              });
            })
            .catch(error => {
              console.error(error)
            })
            clearInterval(seshget)
          }
        }
      }.bind(this), 1000); 
    })
    */


    watchEffect(() => {
      if (auth?.isAuthorized() && props.data) {
        const user = auth?.getUser()
        if (user) {
          console.log("afp: props.data.id", props.data.id, program.value)
          console.log("afp: program.id", program.value.id)
          ytpulse?.getProgramDays(user, props.data.id)
          .then(response => {
            console.log("days?", response)
            /*
            response.items.forEach((item: YtPulseSessionItem) => {
              console.log("el", item) 
              items.value[item.position] = {
                kind: item.kind,
                position: item.position,
                id: item.id,
                data: '',
              }
              let p;
              switch(item.kind) {
                case 'collection':
                  p = ytpulse?.getSession(user, item.id, false)
                  break
                default: // video
                  p = ytpulse?.getVideo(user, item.id, false)
                  break
              }
              p
              .then(response => {
                items.value[item.position].data = response
                console.log("afp: ITEM: %s %s:", item.kind, item.id, items.value[item.position].data)
              })
              .catch(error => {
                if (error instanceof YTPulseAuthError) {
                  // FIXME: this generates a dumb path as it aggregates all the queries to all  items which are found
                  console.warn('unauthorized error. routing to signin')
                  router.push({
                    name: 'signin', query: {
                      authorize: 1,
                      redirect: router.currentRoute.value.fullPath,
                    }
                  })
                } else {
                  console.error(error)
                }
              })

            });
            */
          })
          .catch(error => {
            console.error("crap: ", error)
          })
        }
      }
    })

    return {
      auth,
      items,
      updateTags,
    }
  }
});
</script>

<style lang="scss" scoped>
:deep(.card) {
  background-color: transparent !important;

  .card-image:first-child img {
    border-radius: 0.125rem;
    /* width: 15rem; */
  }

  .card-content {
    padding: .5rem;
    padding-top: .25rem;

    .title {
      font-size: .9rem;
      font-weight: 400;
      line-height: 1.5rem;
      max-height: 4rem;
      color: #f5eefd;
    }
  }
}
</style>

M src/components/session/session-details.vue => src/components/session/session-details.vue +58 -46
@@ 55,11 55,13 @@
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, inject, Ref, watchEffect } from 'vue';
import { defineComponent, ref, inject, Ref, watchEffect } from 'vue';
import { useRouter } from 'vue-router'
import { Auth } from '@/services/auth';
import { YTPulseApi } from '@/services/ytpulse';
import { YTPulseApi, YTPulseAuthError } from '@/services/ytpulse';
import description from '@/components/description.vue';
import thumbnail from '@/components/thumbnail.vue';
import tags from '@/components/tags.vue';
import sessionItem from '@/components/session/session-item.vue';
import privacyStatusSymbol from '@/components/privacy-status-symbol.vue';



@@ 88,6 90,7 @@ export default defineComponent({
  components: {
    description,
    thumbnail,
    tags,
    sessionItem,
    privacyStatusSymbol,
  },


@@ 96,6 99,7 @@ export default defineComponent({
    const items: Ref<YtPulseSessionItem[]> = ref([])
    const auth: Auth | undefined = inject('auth');
    const ytpulse: YTPulseApi | undefined = inject('ytpulse');
    const router = useRouter()
    // let itemsResp = ''

    watchEffect(() => session.value = props.data)


@@ 123,11 127,12 @@ export default defineComponent({
    */

    const updateTags = (tags: Array<string>) => {
      /*
      const user = auth?.getUser()
      if (user && props.data) {
        const vid = props.data
        vid.userData.tags = tags
        ytpulse?.updateVideo(user, vid.id, vid)
        ytpulse?.updateSession(user, vid.id, vid)
        .then(response => {
          if (response.status == 200)  {
            session.value.userData.tags = tags


@@ 139,55 144,62 @@ export default defineComponent({
          console.error(error)
        })
      }
      */
    }

    onMounted(() => {
      const seshget = setInterval(function () {
        if (auth?.isAuthorized()) {
          const user = auth?.getUser()
          if (user && props.data) {
            ytpulse?.getSessionItems(user, props.data.id)
            .then(response => {
              // items.value = response.data
              // itemsResp = response.data
              // response.data.items.forEach((item: YtPulseSessionItem) => {
              console.log("items?", response)
              response.items.forEach((item: YtPulseSessionItem) => {
                // console.log("el", item) 
                items.value[item.position] = {
                  kind: item.kind,
                  position: item.position,
                  id: item.id,
                  data: '',
                }
                let p;
                switch(item.kind) {
                  case 'collection':
                    p = ytpulse?.getSession(user, item.id, false)
                    break
                  default: // video
                    p = ytpulse?.getVideo(user, item.id, false)
                    break
                }
                p
                .then(response => {
                  items.value[item.position].data = response
                  // console.log("%s %s:", item.kind, item.id, items.value[item.position].data)
                })
                .catch(error => {
    watchEffect(() => {
      if (auth?.isAuthorized()) {
        const user = auth?.getUser()
        if (user && props.data) {
          ytpulse?.getSessionItems(user, props.data.id)
          .then(response => {
            console.log("items?", response)
            response.items.forEach((item: YtPulseSessionItem) => {
              console.log("el", item) 
              items.value[item.position] = {
                kind: item.kind,
                position: item.position,
                id: item.id,
                data: '',
              }
              let p;
              switch(item.kind) {
                case 'collection':
                  p = ytpulse?.getSession(user, item.id, false)
                  break
                default: // video
                  p = ytpulse?.getVideo(user, item.id, false)
                  break
              }
              p
              .then(response => {
                items.value[item.position].data = response
                console.log("afp: ITEM: %s %s:", item.kind, item.id, items.value[item.position].data)
              })
              .catch(error => {
                if (error instanceof YTPulseAuthError) {
                  // FIXME: this generates a dumb path as it aggregates all the queries to all  items which are found
                  console.warn('unauthorized error. routing to signin')
                  router.push({
                    name: 'signin', query: {
                      authorize: 1,
                      redirect: router.currentRoute.value.fullPath,
                    }
                  })
                } else {
                  console.error(error)
                })
                }
              })

              });
            })
            .catch(error => {
              console.error(error)
            })
            clearInterval(seshget)
          }
            });
          })
          .catch(error => {
            console.error("crap: ", error)
          })
        }
      }.bind(this), 1000); 
      }
    })

    return {
      auth,
      items,

M src/components/video/video-item-entry.vue => src/components/video/video-item-entry.vue +1 -1
@@ 42,7 42,7 @@
              </router-link>
            </div>
            -->
              <tags kind="video" size="small" readonly=true :thingid="video.id" :tags="video.userData.tags" />
              <tags kind="video" size="small" readonly :thingid="video.id" :tags="video.userData.tags" />
            </div>
          </div>
        </div>

M src/services/ytpulse.ts => src/services/ytpulse.ts +72 -17
@@ 213,18 213,31 @@ export class YTPulseApi {
    }

    async getSession(user: User, id: string, byref: boolean): Promise<any> { // eslint-disable-line
      const session = await httpGet(`/sessions/${ id }${byref ? '?refid=true' : ''}`, user)
                      .then(response => response.data)
                      .catch(error => Promise.reject(error))
      return session  
      let session;
      await httpGet(`/sessions/${ id }${byref ? '?refid=true' : ''}`, user)
                      .then(response => session = response.data)
                      .catch(error => {
                        if (error.response.status == 401) {
                          return Promise.reject(new YTPulseAuthError(error.response.statusText))
                        } else {
                          return Promise.reject(error)
                        }
                      })
      return Promise.resolve(session)
    }

    async getSessionItems(user: User, id: string): Promise<any> { // eslint-disable-line
      // return httpGet(`/sessions/${ id }/items`, user)
      const items = await httpGet(`/sessions/${ id }/items`, user)
                      .then(response => response.data)
                      .catch(error => Promise.reject(error))
      return items  
      let items;
      await httpGet(`/sessions/${ id }/items`, user)
                      .then(response => items = response.data)
                      .catch(error => {
                        if (error.response.status == 401) {
                          return Promise.reject(new YTPulseAuthError(error.response.statusText))
                        } else {
                          return Promise.reject(error)
                        }
                      })
      return Promise.resolve(items)
    }

    async createSession(user: User, cmsession: CrookedSession): Promise<any> { // eslint-disable-line


@@ 262,22 275,64 @@ export class YTPulseApi {
    }

    async getUserPrograms(user: User): Promise<any> { // eslint-disable-line
      const programs = await httpGet(`/programs`, user)
                      .then(response => response.data)
                      .catch(error => Promise.reject(error))
      return programs  
      let programs;
      await httpGet(`/programs`, user)
                      .then(response => programs = response.data)
                      .catch(error => {
                        if (error.response.status == 401) {
                          return Promise.reject(new YTPulseAuthError(error.response.statusText))
                        } else {
                          return Promise.reject(error)
                        }
                      })
      return Promise.resolve(programs)
    }

    async getProgram(user: User, id: string): Promise<any> { // eslint-disable-line
      const program = await httpGet(`/programs/${ id }`, user)
                      .then(response => response.data)
                      .catch(error => Promise.reject(error))
      return program  
      let program;
      await httpGet(`/programs/${ id }`, user)
                      .then(response => program = response.data)
                      .catch(error => {
                        if (error.response.status == 401) {
                          return Promise.reject(new YTPulseAuthError(error.response.statusText))
                        } else {
                          return Promise.reject(error)
                        }
                      })
      return Promise.resolve(program)
    }

    createProgram(user: User, program: Object): Promise<AxiosResponse<any>> { // eslint-disable-line
      return httpPost('/programs', user, program)
    }

    async getProgramDays(user: User, id: string): Promise<any> { // eslint-disable-line
      let days;
      await httpGet(`/programs/${ id }/days`, user)
                      .then(response => days = response.data)
                      .catch(error => {
                        if (error.response.status == 401) {
                          return Promise.reject(new YTPulseAuthError(error.response.statusText))
                        } else {
                          return Promise.reject(error)
                        }
                      })
      return Promise.resolve(days)
    }

    async getProgramDayItems(user: User, pid: string, day: number): Promise<any> { // eslint-disable-line
      let items;
      await httpGet(`/programs/${ pid }/days/${ day }/items`, user)
                      .then(response => items = response.data)
                      .catch(error => {
                        if (error.response.status == 401) {
                          return Promise.reject(new YTPulseAuthError(error.response.statusText))
                        } else {
                          return Promise.reject(error)
                        }
                      })
      return Promise.resolve(items)
    }
}

export const ytpulse = new YTPulseApi()

M src/views/login.vue => src/views/login.vue +2 -1
@@ 50,7 50,8 @@ export default defineComponent({
              ytpulse?.createAndAuthorizeUser(user, email, authCode)
                .then(() => {
                  if (router.currentRoute.value.query.redirect) {
                    router.push({ path: String(router.currentRoute.value.query.redirect) })
                    console.log("going back?", String(router.currentRoute.value.query.redirect))
                    // router.push({ path: String(router.currentRoute.value.query.redirect) })
                  } else if (router.currentRoute.value.path === '/') {
                    router.push('videos')
                  }

M src/views/program.vue => src/views/program.vue +16 -22
@@ 1,20 1,18 @@
<template>
  <div v-if="!auth.isAuthorized() && !program">loading...</div>
  <!--
  <program-full v-else :data="program"/>
  -->
  <program-details v-else :data="program" />
</template>

<script lang="ts">
import { defineComponent, inject, ref, onMounted } from 'vue';
import { defineComponent, inject, ref, watchEffect } from 'vue';
import { Auth } from '@/services/auth';
import { YTPulseApi } from '@/services/ytpulse';
// import programFull from '@/components/program/program-full.vue';
import programDetails from '@/components/program/details.vue';
export default defineComponent({
  name: 'view_program',
  props: ['progref'],
  components: {
    // programFull,
    programDetails,
  },

  setup(props) {


@@ 22,24 20,20 @@ export default defineComponent({
    const auth: Auth | undefined = inject('auth');
    const ytpulse: YTPulseApi | undefined = inject('ytpulse');

    onMounted(() => {
    watchEffect(() => {
      const refval = props.progref
      const progget = setInterval(function () {
        if (auth?.isAuthorized()) {
          const user = auth?.getUser()
          if (user && refval) {
            ytpulse?.getProgram(user, refval)
            .then(response => {
              program.value = response.data
              console.log("program", program.value)
            })
            .catch(error => {
              console.error(error)
            })
          }
          clearInterval(progget)
      if (auth?.isAuthorized() && refval) {
        const user = auth?.getUser()
        if (user) {
          ytpulse?.getProgram(user, refval)
          .then(response => {
            program.value = response
          })
          .catch(error => {
            console.error(error)
          })
        }
      }.bind(this), 1000); 
      }
    })
    return {
      auth,

M src/views/programs.vue => src/views/programs.vue +17 -16
@@ 31,24 31,25 @@ export default defineComponent({
    const auth: Auth | undefined = inject('auth');
    const ytpulse: YTPulseApi | undefined = inject('ytpulse');

    watchEffect(
      () => {
        if (auth?.isAuthorized()) {
          const user = auth?.getUser()
          if (user) {
              ytpulse?.getUserPrograms(user)
              .then(response => {
                console.log("got user programs", new Date())
                programs.value = response
              })
              .catch(error => {
                console.error(error)
                // TODO: display some error message
              })
          }
    watchEffect(() => {
      if (auth?.isAuthorized()) {
        const user = auth?.getUser()
        if (user) {
            ytpulse?.getUserPrograms(user)
            .then(response => {
              console.log("got user programs", new Date())
              console.log("got user program", response)
              console.log("got user program id", response[0].id)
              programs.value = response
            })
            .catch(error => {
              console.error(error)
              // TODO: display some error message
            })
        }
      }
    )
    })

    return {
      auth,
      programs,