<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link href="/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="/vendor/fontawesome/fontawesome.min.css" rel="stylesheet">
<link href="/vendor/fontawesome/solid.min.css" rel="stylesheet">
<script src="/vendor/vue/vue.js"></script>
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/vendor/popper/popper.min.js"></script>
<script src="/vendor/bootstrap/bootstrap.bundle.min.js"></script>
<script src="/vendor/axios/axios.min.js"></script>
<link href='/stylesheets/style.css' rel="stylesheet"/>
</head>
<body>
<!-- Vue app element -->
<div id="app" v-cloak class="container-fluid">
<nav class="navbar navbar-expand-md navbar-dark bg-black fixed-top" id="topbar">
<a class="navbar-brand nav-link text-white">Describo!</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav">
<div class="navbar-item mr-auto">
<a v-if="dataset_path" class="nav-link"
v-bind:href="'/?path=' + display_path + '&dataset_path=' + display_path">
<template v-if="files && files.existing_describo">
Edit existing data package
</template>
<template v-else>
Package a dataset here
</template>
</a>
<a class="nav-link" v-else=""
data-toggle="modal" data-target="#addPathModal"
>Add a Path</a>
</div>
<div class="navbar-item mr-auto">
<a
v-if="dataset_path"
class="nav-link cursor"
v-on:click="hide_all()">Hide all</a>
</div>
<div v-if="dataset_path" class="navbar-item mr-auto">
<a class="nav-link"
v-if="dataset_path && files && files.existing_catalog"
v-bind:href="'/import_crate?path=' + display_path + '&dataset_path=' + display_path">
<span
v-if="files.existing_describo"
v-on:click="import_crate(context)">
Re-import CATALOG
</span>
<span v-else>
Import CATALOG
</span>
</span>
</a>
<a class="nav-link cursor" v-else>No dataset path</a>
</div>
<template v-if="context">
<div class="navbar-item mr-auto">
<div class="btn-group">
<a class="nav-link dropdown-toggle cursor" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Show context item
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<template v-for="(item, id) in context.entities">
<a class="dropdown-item" v-on:click="show_entity(id)" v-bind:href="'#' + id"
v-if="item.properties.name && !item.properties.type[0].value.includes('PropertyValue')">
{{item.properties.name[0].value}}
</a>
</template>
</div>
</div>
</div>
<div class="navbar-item mr-auto ">
<form class="form-inline" v-on:submit.prevent="addContext()">
<select class="custom-select" v-model="type">
<option
v-if="type_name"
v-for="type_name in Object.getOwnPropertyNames(schema.types).filter(type => {return schema.types[type].create})"
v-bind:value="type_name"> {{ type_name }}
</option>
<option></option>
</select>
</select>
<button class="btn btn-secondary" type="submit">Add contextual item</button>
</form>
</div>
</template>
</div>
</div>
</nav>
<div class="container-fluid main" v-if="context && files && display_path && dataset_path">
<span style="display: none">{{ changed }}</span>
<div>
<h1 v-if="dataset_path"><a v-bind:href="'?path=' + files.up + '&dataset_path=' + dataset_path">.. </a></h1>
<h1 v-else><a>Select a Path </a></h1>
</div>
<div class="row">
<div class="col-lg-2">
<ul class="list-group">
<span id="dirlist">
<li class="list-group-item">
<h4 class="list-group-item-heading">Directories</h4>
</li>
<li class="list-group-item" v-for="dir in files.dirs">
<div class="form-inline">
<div class="form-group">
<a v-if="dataset_path"
v-bind:href="'?path=' + dir.absolute + '&dataset_path=' + dataset_path"
class="btn btn-outline-success btn-sm">
{{ dir.name }}
</a>
<button class="btn btn-outline-primary btn-sm" type="button"
title="Add directory to package"
v-on:click="addDir(dir)">+</button>
</div>
</div>
</li>
<li class="list-group-item" v-if="Object.keys(files.dirs).length === 0">
<span>No directories</span>
</li>
</span>
<span id="filelist">
<li class="list-group-item">
<h4 class="list-group-item-heading">Files</h4>
</li>
<li class="list-group-item" v-for="(file, path) in files.files">
<template>
<span v-if="context && !(context.entities[file.id])">
<div class="form-inline">
<div class="form-group">
<label class="btn btn-light btn-sm">{{ file.filename }}</label>
<form class="form-inline" v-if="context.entities" v-on:submit.prevent="addFile(file)">
<div class="form-group">
<button class="btn btn-outline-primary btn-sm"
type="submit" title="Add file to package">+</button>
<img width="50%" v-bind:src='file._img'>
</div>
</form>
</div>
</div>
</span>
<span v-else="">
{{ file.filename }}
</span>
</template>
</li>
<li class="list-group-item" v-if="Object.keys(files.files).length === 0">
<span>No files</span>
</li>
</span>
<li class="list-group-item">
<h4 class="list-group-item-heading">What is describo?</h4>
</li>
<li class="list-group-item">
<p>Describo is a tool that will help you... yada yada yada..</p>
</li>
</ul>
</div>
<div class="col-lg-10">
<div v-if="context && context.entities">
<div class="row">
<div class="col-sm-10">
<template v-for="(item, id) in context.entities">
<span v-bind:id="id"></span>
<template
v-if="item.properties.type && !item.properties.type[0].value.includes('PropertyValue')">
<template v-if="item.show || id === context.root">
<div class="card">
<div class="card-body">
<div id="card-header" class="form">
<div class="form-group">
<button class="btn btn-outline-primary btn-sm" type="button" data-toggle="collapse" :data-target="'#card-data-' + id.replace(/[^a-zA-Z0-9]/g, '')" aria-expanded="true" :aria-controls="'card-data-' + id.replace(/[^a-zA-Z0-9]/g, '')">
<i class="fa fa-compress"></i>
</button>
<button class="btn btn-outline-primary btn-sm"
type="button"
v-on:click="removeItem(id)">
<i class="fa fa-minus-circle"></i>
</button>
<h3 style="word-wrap: break-word">{{ id }}</h3>
<span v-if="id === context.root">
<button v-on:click="crate(item)" class="btn btn-primary btn-sm" type="button"
title="Make / Update a DataCrate here (generate CATALOG.json and CATALOG.html)">
<span class="fa fa-briefcase"></span>
Crate
</button>
<a v-if="item.crate_href" v-bind:href="item.crate_href">View CATALOG.html</a>
</span>
</div>
</div>
<div :id="'card-data-'+ id.replace(/[^a-zA-Z0-9]/g, '')" class="show">
<img width="60%" v-bind:src='item._img'>
<show-props v-bind:item="item" v-bind:schema="schema"
v-bind:context="context"
v-bind:type="type" v-bind:methods="methods"
v-bind:changed="changed"></show-props>
<br/><br/>
<h5>Add Property</h5>
<form class="form-inline"
v-on:submit.prevent="addContextProp(item)">
<div class="form-group">
<select class="custom-select" v-model="prop_name">
<option value="" disabled>Select</option>
<option
v-for="(prop, prop_name) in schema.properties"
v-if="!item.properties[prop_name]">{{prop_name}}
</option>
</select>
</div>
<button
class="btn btn-primary"
type="submit">
<span class="fa fa-plus"></span>
Add
</button>
</form>
<br/><br/>
</div>
</div>
</div>
</template>
</template>
</template>
</div>
<div class="col-sm-2">
<ul class="nav navbar-fixed-top sticky nav-stacked">
<li class="nav-item text-center context-item-buttons">
<h3>Context Items</h3>
<hr/>
</li>
<li class="btn-group dropleft context-item-buttons" v-if="context_by_type"
v-for="(items, type) in context_by_type">
<button class="btn dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{type}}
</button>
<div class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownMenuButton">
<template v-for="item in items">
<button class="dropdown-item"
type="button"
v-on:click="show_entity(item.id)"
v-bind:href="'#' + item.id"
v-if="item.properties.name">
{{item.properties.name[0].value}}
</button>
</template>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="addPathModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Start with a Path</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form v-on:submit.prevent="addPath">
<div class="form-group">
<label for="addAPathInput">Path</label>
<input type="text" class="form-control" name="addAPathInput" aria-describedby="path" placeholder="path">
<small id="path" class="form-text text-muted">Input path</small>
</div>
<button type="submit" class="btn btn-primary">Go</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="/app/methods.js" async defer></script>
<script src="/app/components.js" async defer></script>
<script src="/app/app.js" async defer></script>
</body>
</html>