- landing page -> detail page of dataset

Dataset.php and show.blade.php

app/Models/Dataset.php

@@ -227,6 +227,10 @@ class Dataset extends Model
     {
         return $this->belongsToMany(License::class, 'link_documents_licences', 'document_id', 'licence_id');
     }
+    public function license()
+    {
+        return $this->belongsToMany(License::class, 'link_documents_licences', 'document_id', 'licence_id')->first();
+    }
 
     public function files()
     {

resources/views/frontend/dataset/show.blade.php

@@ -17,6 +17,31 @@
             <p class="dataset__id">{{ $dataset->id }}</p>
           </div>
           <div class="dataset">
+
+            <!-- Nav tabs -->
+            {{-- <input type="radio" id="metadata-option" name="nav-tab" type="hidden">
+            <input type="radio" id="file-option" name="nav-tab" type="hidden"> --}}
+
+            <div class="row">
+              <!-- HTML markup for the tab navigation: -->
+              <div class="twelve columns">
+                <ul class="tab-nav">
+                  <li class="metadata-link">                   
+                      <a class="remove-check button active" href="#one">Metadaten</a>                   
+                  </li>
+                  <li class="file-link">                    
+                      <a class="remove-check button" href="#two">Inhalt</a>                  
+                  </li>
+                  <li class="file-link">                    
+                    <a class="remove-check button" href="#three">Technische Metadaten</a>                  
+                </li>
+                </ul>
+
+                <!-- HTML markup for tab content: Tab panes -->
+                <div class="tab-content">
+
+                  <div class="tab-pane content-metadata active" id="one">
+
                     <p class="dataset__abstract">{{ $dataset->mainAbstract()->value }}</p>
 
                     @if($dataset->authors()->exists())
@@ -40,11 +65,15 @@
                     <p class="dataset__abstract">Erstellungsjahr: {{ $dataset->server_date_published->year }}</p>
                     <p class="dataset__abstract">Sprache: {{ $dataset->language }}</p>
                     <p class="dataset__abstract">Objekttyp: {{ $dataset->type }}</p>
+                    <p class="dataset__abstract">Lizenz: {{ $dataset->license()->name_long }}</p>
 
                     <p class="dataset__abstract">Herausgeber: {{ $dataset->creating_corporation }}</p>
                     <p class="dataset__abstract">Publisher: {{ $dataset->publisher_name }}</p>
                     <p class="dataset__abstract">Coverage: {{ $dataset->geoLocation() }}</p>
 
+                  </div>
+
+                  <div class="tab-pane content-file" id="two">
                     @if($dataset->hasEmbargoPassed() == true)
                     <table id="items" class="pure-table pure-table-horizontal">
                       <thead>
@@ -69,9 +98,19 @@
                     @else
                     <span>Datensatz hat noch ein gültiges Embargo-Datum.</span>
                     @endif
+                  </div>
+
+                  <div class="tab-pane content-technical-metadata" id="three">
+                    <p class="dataset__abstract">Status: {{ $dataset->server_state }}</p>
+                  </div>
 
                 </div>
               </div>
+            </div> <!--  end row -->
+
+          </div>
+
+        </div>
       </div>
 
     </main>
@@ -83,14 +122,48 @@
 @stop
 
 @section('head')
+
 <style>
+  ul.tab-nav {
+    list-style: none;
+    border-bottom: 1px solid #bbb;
+    padding-left: 5px;
+  }
+
+  ul.tab-nav li {
+    display: inline;
+  }
+
+  ul.tab-nav li a.button {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-bottom: -1px;
+    border-bottom: none;
+  }
+
+  ul.tab-nav li a.active.button {
+    border-bottom: 0.175em solid #fff;
+  }
+
+  .tab-content .tab-pane {
+    display: none;
+    /* visibility: hidden; */
+  }
+
+  .tab-content .tab-pane.active {
+    display: block;
+    /* visibility: visible; */
+  }
+
+
+
   /* body {
     margin: 0;
     padding: 0;
   } */
 
   #app {
-    font-family: "Avenir", Helvetica, Arial, sans-serif;
+    /* font-family: "Avenir", Helvetica, Arial, sans-serif; */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     color: #2c3e50;
@@ -122,8 +195,8 @@
   }
 
   .content {
-    // flex: 1 1 80%;
+    /* // flex: 1 1 80%;
-    // display: flex;
+    // display: flex; */
     align-items: center;
     justify-content: center;
 
@@ -132,18 +205,18 @@
   .box {
     margin: 0 auto;
     padding: 100px 20px 70px;
-    // background-color: salmon;
+    /* // background-color: salmon; */
 
 
   }
 
   .dataset_heaader {
-    //  background-color: lightgray;
+    /* //  background-color: lightgray; */
     position: relative;
   }
 
   .dataset {
-    // max-width: 500px;
+    /* // max-width: 500px; */
   }
 
   .dataset__title {
@@ -180,5 +253,27 @@
 
 
 @section('after-scripts')
+<script type="text/javascript" >
+(function() {
+    function main() {
+        var tabButtons = [].slice.call(document.querySelectorAll('ul.tab-nav li a.button'));
 
+        tabButtons.map(function(button) {
+            button.addEventListener('click', function() {
+                document.querySelector('li a.active.button').classList.remove('active');
+                button.classList.add('active');
+
+                document.querySelector('.tab-pane.active').classList.remove('active');
+                document.querySelector(button.getAttribute('href')).classList.add('active');
+            })
+        })
+    }
+
+    if (document.readyState !== 'loading') {
+        main();
+    } else {
+        document.addEventListener('DOMContentLoaded', main);
+    }
+})();
+</script>
 @stop