working on some further courseware changes

courseware/vueapp/components/CoursewareVideoTable.vue

@@ -7,7 +7,7 @@
  </label>
  <div class="oc-cw-video-list" v-else>
  <PaginationButtons :paging="paging" @changePage="startPageChange"/>
- 
+
  <label>
  <ul v-if="loadingVideos">
  <li v-for="(n, index) in limit" :key="index">
@@ -17,20 +17,32 @@
  </li>
  </ul>
  <ul class="video-list" v-else>
+ <VideoCard
+ v-for="event in videos"
+ v-bind:event="event"
+ v-bind:key="event.token"
+ :isLTIAuthenticated="isLTIAuthenticated"
+ :plugin_assets_url="plugin_assets_url"
+ @doAction="setVideo"
+ @redirectAction="redirectAction"
+ ></VideoCard>
+
+ <!--
  <li v-for="(video, index) in videos" :key="index" :class="{selected: selectedVideoId == video.id}" @click="setVideo(video)">
  <div>
  <strong>
  {{video.title}}
  </strong>
  <div>
  {{ printDetails(video) }}
- <!-- {{ video.author }}
- <span v-if="video.created">
+ {{ video.author }}
+ <!- <span v-if="video.created">
  - {{ video.created }} Uhr
- </span> -->
+ </span> ->
  </div>
  </div>
  </li>
+ -->
  </ul>
  </label>
  </div>
@@ -39,8 +51,8 @@
 
 <script>
 import PaginationButtons from './PaginationButtons.vue';
-import { format } from 'date-fns'
-import { de } from 'date-fns/locale'
+import VideoCard from './VideoCard.vue';
+import axios from 'axios';
 
 export default {
  name: "CoursewareVideoTable",
@@ -49,31 +61,51 @@ export default {
 
  components: {
  PaginationButtons,
+ VideoCard
  },
+
+ data() {
+ return {
+ interval: null,
+ interval_counter: 0,
+ plugin_assets_url: '',
+ isLTIAuthenticated: {}
+ }
+ },
+
  methods: {
  startPageChange(page) {
  this.$emit('doChangePage', page);
  },
 
  setVideo(video) {
  this.$emit('doSelectVideo', video);
- },
+ }
+ },
 
- printDetails(video) {
- let details = [];
- if (video?.author) {
- details.push(video.author);
- }
- if (video?.created) {
- let mydate = new Date(video.created);
+ mounted() {
+ let view = this;
 
-  if (mydate instanceof Date && !isNaN(mydate)) {
-  details.push(format(mydate, "d. MMM, yyyy, HH:ii", {locale: de}));
- }
- }
+ axios.get(STUDIP.ABSOLUTE_URI_STUDIP + 'plugins.php/opencast/api/config/simple')
+ .then(({data}) => {
+ view.plugin_assets_url = data.plugin_assets_url;
+  console.log(data);
 
- return details.join(' - ');
- }
- },
+ view.interval = setInterval(() => {
+ for (let id in data['server']) {
+ if (!view.isLTIAuthenticated[id]) {
+ view.checkLTIAuthentication(data['server'][id]);
+ }
+ }
+
+ view.interval_counter++;
+
+ // prevent spamming of oc server
+ if (view.interval_counter > 10) {
+ clearInterval(view.interval);
+ }
+ }, 2000);
+ });
+ }
 }
 </script>

courseware/vueapp/components/LtiAuth.vue

@@ -0,0 +1,42 @@
+<template>
+ <div class="oc--ltiauth">
+ <template
+ v-for="server in simple_config_list.server"
+ >
+ <!-- iterate over all opencast nodes for this server as well -->
+ <iframe
+ v-for="i in server.lti_num"
+ v-bind:key="i"
+ :src="authUrl(server.id, i - 1)">
+ </iframe>
+ </template>
+ </div>
+</template>
+
+<script>
+
+import { mapGetters } from "vuex";
+
+export default {
+ name: "LtiAuth",
+
+ computed: {
+ ...mapGetters(['simple_config_list', 'cid']),
+ },
+
+ methods: {
+ authUrl(config_id, num) {
+ // check, if we are in a course
+ if (this.cid) {
+ return window.OpencastPlugin.AUTH_URL + '/' + num + '?config_id=' + config_id + '&cid=' + this.cid;
+ } else {
+ return window.OpencastPlugin.AUTH_URL + '/' + num + '?config_id=' + config_id;
+ }
+ }
+ },
+
+ mounted() {
+ this.$store.dispatch('simpleConfigListRead');
+ }
+}
+</script>

courseware/vueapp/components/Tag.vue

@@ -0,0 +1,19 @@
+<template>
+ <span>
+ <studip-icon shape="tag" role="info"/>
+ <span>{{ tag }}</span>
+ </span>
+</template>
+
+<script>
+
+export default {
+ name: 'Tag',
+
+ components: {
+
+ },
+
+ props: ['tag']
+}
+</script>