- 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,60 +17,99 @@
             <p class="dataset__id">{{ $dataset->id }}</p>
           </div>
           <div class="dataset">
-            <p class="dataset__abstract">{{ $dataset->mainAbstract()->value }}</p>
 
-            @if($dataset->authors()->exists())
+            <!-- Nav tabs -->
-            <p class="dataset__abstract" v-if="dataset.subject && dataset.subject.length > 0">
+            {{-- <input type="radio" id="metadata-option" name="nav-tab" type="hidden">
-              Ersteller/Autor: {{ $dataset->authors->implode('full_name', ', ')  }}
+            <input type="radio" id="file-option" name="nav-tab" type="hidden"> --}}
-            </p>
-            @endif
 
-            @if($dataset->contributors()->exists())
+            <div class="row">
-            <p class="dataset__abstract" v-if="dataset.subject && dataset.subject.length > 0">
+              <!-- HTML markup for the tab navigation: -->
-              Beitragende: {{ $dataset->contributors->implode('full_name', ', ')  }}
+              <div class="twelve columns">
-            </p>
+                <ul class="tab-nav">
-            @endif
+                  <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>
 
-            @if($dataset->subjects()->exists())
+                <!-- HTML markup for tab content: Tab panes -->
-            <p class="dataset__abstract" v-if="dataset.subject && dataset.subject.length > 0">
+                <div class="tab-content">
-              Schlüsselwörter: {{ $dataset->subjects->implode('value', ', ')  }}
-            </p>
-            @endif
 
-            <p class="dataset__abstract">Erstellungsjahr: {{ $dataset->server_date_published->year }}</p>
+                  <div class="tab-pane content-metadata active" id="one">
-            <p class="dataset__abstract">Sprache: {{ $dataset->language }}</p>
-            <p class="dataset__abstract">Objekttyp: {{ $dataset->type }}</p>
 
-            <p class="dataset__abstract">Herausgeber: {{ $dataset->creating_corporation }}</p>
+                    <p class="dataset__abstract">{{ $dataset->mainAbstract()->value }}</p>
-            <p class="dataset__abstract">Publisher: {{ $dataset->publisher_name }}</p>
-            <p class="dataset__abstract">Coverage: {{ $dataset->geoLocation() }}</p>
 
-            @if($dataset->hasEmbargoPassed() == true)
+                    @if($dataset->authors()->exists())
-            <table id="items" class="pure-table pure-table-horizontal">
+                    <p class="dataset__abstract" v-if="dataset.subject && dataset.subject.length > 0">
-              <thead>
+                      Ersteller/Autor: {{ $dataset->authors->implode('full_name', ', ')  }}
-                <tr>
+                    </p>
-                  <th>Path Name</th>               
-                </tr>
-              </thead>
-              <tbody>
-                @foreach($dataset->files as $key => $file)
-                <tr>
-                  <td>
-                    @if($file->exists() === true)
-                    <a href="{{ route('file.download', ['id' => $file->id]) }}"> {{ $file->label }} </a>
-                    @else
-                    <span class="alert">missing file: {{ $file->path_name }}</span>
                     @endif
-                  </td>                  
+
-                </tr>
+                    @if($dataset->contributors()->exists())
-                @endforeach
+                    <p class="dataset__abstract" v-if="dataset.subject && dataset.subject.length > 0">
-              </tbody>
+                      Beitragende: {{ $dataset->contributors->implode('full_name', ', ')  }}
-            </table>
+                    </p>
-            @else
+                    @endif
-            <span>Datensatz hat noch ein gültiges Embargo-Datum.</span>
+
-            @endif
+                    @if($dataset->subjects()->exists())
+                    <p class="dataset__abstract" v-if="dataset.subject && dataset.subject.length > 0">
+                      Schlüsselwörter: {{ $dataset->subjects->implode('value', ', ')  }}
+                    </p>
+                    @endif
+
+                    <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>
+                        <tr>
+                          <th>Path Name</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        @foreach($dataset->files as $key => $file)
+                        <tr>
+                          <td>
+                            @if($file->exists() === true)
+                            <a href="{{ route('file.download', ['id' => $file->id]) }}"> {{ $file->label }} </a>
+                            @else
+                            <span class="alert">missing file: {{ $file->path_name }}</span>
+                            @endif
+                          </td>
+                        </tr>
+                        @endforeach
+                      </tbody>
+                    </table>
+                    @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>
 
@@ -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