swarmlab-hybrid/src/components/manageservices/view-events.vue

<template>
  <card class="card-user" style="max-height:100%">
      <div class="author"
             v-show="hybridshowlog==true"
      >
        <img class="avatar border-white" src="@/assets/img/library.png" alt="...">
      </div>


  <v-wait for="myRunInstancetutor">
    <template slot="waiting">
      <div>
        <img src="@/assets/loading.gif" />
        Enter Lab_room...
      </div>
    </template>
  </v-wait>

      <b-container fluid>
          <div class="row text-center"
             v-show="hybridshowlog==true"
          >
            <div class="col-12">

								<table class="table table-hover">
									<tbody>
										<tr>
											<th scope="row">Title</th>
											<td colspan="2">
														{{ labtext.title }}
											</td>
										</tr>
										<tr>
											<th scope="row">Type</th>
											<td>
														{{ labtext.originalItem.type }}
											</td>
											<td>
														{{ labtext.originalItem.lang }}
											</td>
										</tr>
										<tr>
											<th scope="row">Description</th>
											<td colspan="2">
														{{ labtext.originalItem.desc }}
											</td>
										</tr>
										<tr>
											<th scope="row">More info</th>
											<td colspan="2">
														{{ labtext.originalItem.url }}
											</td>
										</tr>
										<tr>
											<th scope="row">Level</th>
											<td colspan="2">
														{{ labtext.originalItem.Level }}
											</td>
										</tr>
										<tr>
											<th scope="row">Prerequisites</th>
											<td colspan="2">
														{{ labtext.originalItem.Prerequisites }}
											</td>
										</tr>
										<tr>
											<th scope="row">startDate</th>
											<td colspan="2">
														{{ labtext.originalItem.startDate }}
											</td>
										</tr>
										<tr>
											<th scope="row">endDate</th>
											<td colspan="2">
														{{ labtext.endDate }}
											</td>
										</tr>
										<tr>
											<th scope="row">url</th>
											<td colspan="2">
														{{ labtext.originalItem.urltype }}
											</td>
										</tr>
									</tbody>
								</table>

            </div>
          </div>
      </b-container>
  </card>
</template>
<script>
import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
import card from '@/components/Card.vue'
import {ApiConfig} from "@/config/index";
export default {
  components: {
      card
	},
  props: {
  },
  data() {
   return{
    hybridshowlog:false,
    labtext:{},
    token: ''
		}
  },
	mounted() {
		this.$root.$on('hybrid_labobject_view', (v) => {
       this.hybridshowlog=true
       this.labtext = v
       //console.log('object ' +JSON.stringify(this.labtext))
		})
	},
	created() {
    var url_string = window.location.href
    var url = new URL(url_string);
    this.token = url.searchParams.get("token");
    //console.log("token "+ this.token);

	},
    beforeDestroy () {
		this.$root.$off('hybrid_labobject_view')
 },
  computed: {
		httpOptions() {
			var token = this.token
			    var p="headers: {Authorization: token}}"; //table props -> :http-options="httpOptions"
			    return {headers: {Authorization: 'Bearer ' + token}} //table props -> :http-options="httpOptions"
	  },

	},
  methods: {
  },
  actions: {
	}
};
</script>
<style>
.flex-fixed-width-item {
    flex: 0 0 100px;
		}
.modalinfo {
  z-index: 10000000 !important;
	position:fixed;
}
/* a container with flex-direction column */

.vue-notifyjs.notifications{
  .alert{
   z-index: 100;
  }
  .list-move {
    transition: transform 0.3s, opacity 0.4s;
  }
  .list-item {
    display: inline-block;
    margin-right: 10px;

  }
  .list-enter-active {
    transition: transform 0.2s ease-in, opacity 0.4s ease-in;
  }
  .list-leave-active {
    transition: transform 1s ease-out, opacity 0.4s ease-out;
  }

  .list-enter {
    opacity: 0;
    transform: scale(1.1);

  }
  .list-leave-to {
    opacity: 0;
    transform: scale(1.2, 0.7);
  }
}

pre {
  //background-color: rgb(255, 247, 229);
  background-color: #eff0f1;
	  border: 1px solid blue;
		  //white-space: pre-line;
			}

</style>