Courseware block integration (#762)

* Fixing courseware plugin * Dont show episode id
elan-ev · Aug 29, 2023 · 0f2c608 · 0f2c608
1 parent e6e89e2
commit 0f2c608
Show file tree

Hide file tree

Showing 6 changed files with 171 additions and 156 deletions.
diff --git a/OpenCast.class.php b/OpenCast.class.php
@@ -60,6 +60,7 @@ public function __construct()
  // }
  }
 
+ $this->addStylesheet("assets/css/courseware.scss");
  VersionHelper::get()->registerCoursewareBlock($this);
  }
 

diff --git a/assets/css/courseware.scss b/assets/css/courseware.scss
@@ -0,0 +1,134 @@
+/* * * * * * * * * * * * * * * * * * */
+/* C O U R S E W A R E B L O C K */
+/* * * * * * * * * * * * * * * * * * */
+
+.oc-cw-searchbar {
+ clear: both;
+ position: relative;
+ display: flex;
+ flex-direction: row;
+}
+
+.oc-cw-searchbar .oc-cw-searchbar-container {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ width: 100%;
+ float: left;
+ margin-right: 5px;
+ flex: 3;
+
+ display: flex;
+ flex-direction: row;
+
+ border: 1px solid var(--light-gray-color-40);
+}
+
+.oc-cw-searchbar .oc-cw-searchbar-container li {
+ padding: none;
+ white-space: nowrap;
+}
+
+.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input {
+ padding: 8px;
+ width: 100%;
+}
+
+.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input > input {
+ padding: 0px;
+ font-size: 16px;
+ border: none;
+ width: 100%;
+}
+
+.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input input:focus {
+ outline: none;
+}
+
+.oc-cw-searchbar .oc-cw-searchbar-sorter {
+ flex: 1;
+ min-width: 12em;
+ height: 40px !important;
+}
+
+.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-search-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 35px;
+
+ border-left: thin solid $content-color-40;
+ background-color: $content-color-20;
+
+ cursor: pointer;
+}
+
+.oc-cw-video-list {
+ margin-top: 1em;
+}
+
+.oc-cw-video-list ul {
+ clear: both;
+ padding-left: 0;
+ list-style: none;
+ overflow: auto;
+ height: auto;
+}
+
+.oc-cw-video-list ul li {
+ background: var(--dark-gray-color-5);
+ border-right-width: 1px;
+ border-left-width: 1px;
+ border-width: 1px 0 0;
+ margin-bottom: 1em;
+ padding: 1em;
+ display: block;
+ position: relative;
+ overflow: hidden;
+ border-color: #ddd;
+ cursor: pointer;
+}
+
+.oc-cw-video-list ul li:hover, .oc-cw-video-list ul li.selected {
+ background: var(--content-color-40);
+}
+
+.oc-cw-pagination {
+ margin-bottom: 1em;
+ display: flex;
+}
+
+.oc-cw-pagination button {
+ padding: 8px 16px;
+ border: 1px solid #ddd;
+ float: left;
+ cursor: pointer;
+}
+
+.oc-cw-pagination button:disabled {
+ cursor: default
+}
+
+.oc-cw-pagination .active {
+ background-color: var(--base-color-60);
+ color: white;
+ cursor: default;
+}
+
+.oc-cw-loadingbar {
+ border-radius: 15px;
+ background-color: var(--dark-gray-color-10);
+ height: 15px;
+ width: 300px;
+ display: block;
+}
+
+.oc-cw-loadingbar:not(:last-of-type) {
+ margin-bottom: 5px;
+}
+
+iframe.oc_cw_iframe {
+ border: none;
+ width: 100%;
+ height: 600px;
+}
diff --git a/assets/css/opencast.scss b/assets/css/opencast.scss
@@ -1343,127 +1343,6 @@ label.oc--file-upload {
  }
 }
 
-
-/* * * * * * * * * * * * * * * * * * */
-/* C O U R S E W A R E B L O C K */
-/* * * * * * * * * * * * * * * * * * */
-
-.oc-cw-searchbar {
- clear: both;
- position: relative;
- display: flex;
- flex-direction: row;
-}
-.oc-cw-searchbar .oc-cw-searchbar-container {
- list-style-type: none;
- padding: 0;
- margin: 0;
- width: 100%;
- float: left;
- margin-right: 5px;
- flex: 2;
-
- display: flex;
- flex-direction: row;
-
- border: 1px solid var(--light-gray-color-40);
-}
-.oc-cw-searchbar .oc-cw-searchbar-container li {
- padding: none;
- white-space: nowrap;
-}
-
-.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input {
- padding: 8px;
- width: 100%;
-}
-
-.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input > input {
- padding: 0px;
- font-size: 16px;
- border: none;
- background: var(--dark-gray-color-5);
- width: 100%;
-}
-
-.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input input:focus {
- outline: none;
-}
-
-.oc-cw-searchbar .oc-cw-searchbar-sorter {
- flex: 1;
- height: 40px !important;
-}
-
-
-.oc-cw-video-list {
- margin-top: 1em;
-}
-
-.oc-cw-video-list ul {
- clear: both;
- padding-left: 0;
- list-style: none;
- overflow: auto;
- height: auto;
-}
-.oc-cw-video-list ul li {
- background: var(--dark-gray-color-5);
- border-right-width: 1px;
- border-left-width: 1px;
- border-width: 1px 0 0;
- margin-bottom: 1em;
- padding: 1em;
- display: block;
- position: relative;
- overflow: hidden;
- border-color: #ddd;
- cursor: pointer;
-}
-
-.oc-cw-video-list ul li:hover, .oc-cw-video-list ul li.selected {
- background: var(--content-color-40);
-}
-
-.oc-cw-pagination {
- margin-bottom: 1em;
- display: flex;
-}
-
-.oc-cw-pagination button {
- padding: 8px 16px;
- border: 1px solid #ddd;
- float: left;
- cursor: pointer;
-}
-
-.oc-cw-pagination button:disabled {
- cursor: default
-}
-
-.oc-cw-pagination .active {
- background-color: var(--base-color-60);
- color: white;
- cursor: default;
-}
-
-.oc-cw-loadingbar {
- border-radius: 15px;
- background-color: var(--dark-gray-color-10);
- height: 15px;
- width: 300px;
- display: block;
-}
-.oc-cw-loadingbar:not(:last-of-type) {
- margin-bottom: 5px;
-}
-
-iframe.oc_cw_iframe {
- border: none;
- width: 100%;
- height: 600px;
-}
-
 /* * * * * * * * * * * */
 /* M E S S A G E S * */
 /* * * * * * * * * * * */

diff --git a/courseware/vueapp/components/CoursewareSearchBar.vue b/courseware/vueapp/components/CoursewareSearchBar.vue
@@ -10,6 +10,14 @@
  @submit="doSearch"
  />
  </li>
+ <li title="Suche starten"
+ class="oc-cw-searchbar-search-icon"
+ @click="doSearch"
+ >
+ <studip-icon
+ shape="search" role="clickable"
+ />
+ </li>
  </ul>
 
  <select class="oc-cw-searchbar-sorter" v-model="inputSort" @change="setSort">
@@ -27,11 +35,30 @@
 export default {
  name: "CoursewareSearchBar",
 
- props: ['sorts'],
-
  data() {
+ const sorts = [
+ {
+ field: 'created',
+ order: 'desc',
+ text: 'Datum hochgeladen: Neueste zuerst'
+ }, {
+ field: 'created',
+ order: 'asc',
+ text: 'Datum hochgeladen: Älteste zuerst'
+ }, {
+ field: 'title',
+ order: 'asc',
+ text: 'Titel: Alphabetisch'
+ }, {
+ field: 'title',
+ order: 'desc',
+ text: 'Titel: Umgekehrt Alphabetisch'
+ }
+ ];
+
  return {
- inputSort: null,
+ sorts: sorts,
+ inputSort: sorts[0],
  inputSearch: ''
  }
  },

diff --git a/courseware/vueapp/components/CoursewareVideoTable.vue b/courseware/vueapp/components/CoursewareVideoTable.vue
@@ -19,12 +19,9 @@
  <ul class="video-list" v-else>
  <li v-for="(video, index) in videos" :key="index" :class="{selected: selectedVideoId == video.id}" @click="setVideo(video)">
  <div>
- <strong class="oc--metadata-title">
+ <strong>
  {{video.title}}
  </strong>
- <div>
- <small><i>{{ video.episode }}</i></small>
- </div>
  <div>
  {{ printDetails(video) }}
  <!-- {{ video.author }}

diff --git a/courseware/vueapp/courseware-plugin-opencast-video.vue b/courseware/vueapp/courseware-plugin-opencast-video.vue
@@ -12,12 +12,12 @@
  <template #content>
  <div>
  <div v-if="!lti_connected">
- <span v-if="!currentEpisodeURL && !currentEpisodeId" v-translate v-text="'Es wurde bisher keine Video ausgewählt'"></span>
- <span v-if="!currentEpisodeURL && currentEpisodeId" v-translate v-text="'Dieses Video hat keinen Veröffentlichungs-URL-Link'"></span>
- <span v-else v-translate v-text="'Das Video ist nicht verfügbar'"></span>
+ <span v-translate v-text="'LTI Verbindung fehlgeschlagen'"></span>
  </div>
  <div v-else>
- <iframe :src="currentEpisodeURL"
+ <span v-if="!currentEpisodeId" v-translate v-text="'Es wurde bisher kein Video ausgewählt'"></span>
+ <span v-else-if="!currentEpisodeURL" v-translate v-text="'Dieses Video hat keinen Veröffentlichungs-URL-Link'"></span>
+ <iframe v-else :src="currentEpisodeURL"
  class="oc_cw_iframe"
  allowfullscreen
  ></iframe>
@@ -37,7 +37,6 @@
  <translate>Videos</translate>
  </label>
  <CoursewareSearchBar
- :sorts="sorts"
  @doSearch="performSearch"
  @doSort="performSort"
  />
@@ -105,28 +104,6 @@ export default {
  relatedContainers: 'courseware-containers/related',
  }),
 
- sorts() {
- return [
- {
- field: 'mkdate',
- order: 'desc',
- text : 'Datum hochgeladen: Neueste zuerst'
- }, {
- field: 'mkdate',
- order: 'asc',
- text : 'Datum hochgeladen: Älteste zuerst'
- }, {
- field: 'title',
- order: 'desc',
- text : 'Titel: Alphabetisch'
- }, {
- field: 'title',
- order: 'asc',
- text : 'Titel: Umgekehrt Alphabetisch'
- }
- ];
- },
-
  container() {
  return (
  this.relatedContainers({
@@ -198,7 +175,7 @@ export default {
  attributes.payload.episode_id = this.currentEpisodeId;
  attributes.payload.url = this.currentEpisodeURL;
  attributes.payload.visible = this.currentVisible;
-
+ 
  if (this.container?.id && this.block?.id) {
  return this.updateBlock({
  attributes,