Pascal Gloor 5 vuotta sitten
vanhempi
commit
202d7004a9
2 muutettua tiedostoa jossa 182 lisäystä ja 126 poistoa
  1. 118
    101
      www/index.html
  2. 64
    25
      www/js/autodoc.js

+ 118
- 101
www/index.html Näytä tiedosto

@@ -1,38 +1,47 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/autodoc.css">

<title>AutoDoc</title>
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">AutoDoc</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">
<ul class="navbar-nav mr-auto" id="autodoc_navbar">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#upload">Upload</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tags">Tags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#search">Search</a>
</li>
<!--
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/autodoc.css" />

<title>AutoDoc</title>
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">AutoDoc</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">
<ul class="navbar-nav mr-auto" id="autodoc_navbar">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#upload">Upload</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tags">Tags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#search">Search</a>
</li>
<!--
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
@@ -45,77 +54,85 @@
</div>
</li>
-->
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Quick Search" aria-label="Search">
</form>
</div>
</nav>

<div class="container" id="autodoc_tab">

<!-- Home -->
<div class="container d-none" id="autodoc_tab_home">
<h1>Current Documents</h1>
<div class="row d-none" id="autodoc_template_docrow">
<div class="col">
<table class="table table-borderless">
<tr>
<td><img src=""></td>
</tr>
<tr>
<td>Owner:<span>xxx</span></td>
</tr>
<tr>
<td>Created: <span>2019-10-09 12:22:22</span></td>
</tr>
<tr>
<td>
<span class="badge badge-pill badge-secondary">myTag</span>
<span class="badge badge-pill badge-secondary">myTag</span>
<span class="badge badge-pill badge-secondary">myTag</span>
<span class="badge badge-pill badge-secondary">myTag</span>
<span class="badge badge-pill badge-secondary">myTag</span>
<span class="badge badge-pill badge-secondary">myTag</span>
<span class="badge badge-pill badge-secondary">myTag</span>
</td>
</tr>
</table>

</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Quick Search"
aria-label="Search"
/>
</form>
</div>
</nav>

<div class="container" id="autodoc_tab">
<!-- Home -->
<div class="container d-none" id="autodoc_tab_home">
<h1>Current Documents</h1>
<!-- template -->
<div class="d-none" id="autodoc_template_home">
<div class="row autodoc_template_home_row"></div>
<div class="row">
<div class="col autodoc_template_home_col">
<table class="table table-borderless">
<tr>
<td><img class="autodoc_template_home_img" src="" /></td>
</tr>
<tr>
<td>
Owner:<span class="autodoc_template_home_owner">xxx</span>
</td>
</tr>
<tr>
<td>
Created:
<span class="autodoc_template_home_created"
>2019-10-09 12:22:22</span
>
</td>
</tr>
<tr>
<td>
<span
class="badge badge-pill badge-secondary autodoc_template_home_tag"
>template</span
>
</td>
</tr>
</table>
</div>
</div>
</div>

<div id="autodoc_home_body"></div>
</div>
</div>

<!-- Upload -->
<div class="container d-none" id="autodoc_tab_upload">
<h1>upload</h1>
</div>

<!-- Tags -->
<div class="container d-none" id="autodoc_tab_tags">
<h1>tags</h1>
</div>

<!-- Search -->
<div class="container d-none" id="autodoc_tab_search">
<h1>search</h1>
</div>
<!-- Upload -->
<div class="container d-none" id="autodoc_tab_upload">
<h1>upload</h1>
</div>

</div>
<!-- Tags -->
<div class="container d-none" id="autodoc_tab_tags">
<h1>tags</h1>
</div>

<footer class="fixed-bottom page-footer font-small bg-dark">
<div class="container footer-copyright text-center text-muted py-3">
AutoDoc v1.0 &copy; Pascal Gloor 2019
<!-- Search -->
<div class="container d-none" id="autodoc_tab_search">
<h1>search</h1>
</div>
</div>
</footer>


<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/tooltip.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/autodoc.js"></script>
</body>

</html>
<footer class="fixed-bottom page-footer font-small bg-dark">
<div class="container footer-copyright text-center text-muted py-3">
AutoDoc v1.0 &copy; Pascal Gloor 2019
</div>
</footer>

<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/tooltip.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/autodoc.js"></script>
</body>
</html>

+ 64
- 25
www/js/autodoc.js Näytä tiedosto

@@ -1,45 +1,51 @@
/* AutoDoc Javascript */

var conf = {
"default_hash": "home",
"openapi": "/v1",
"pageinit": {
"home": "page_load_home()"
default_hash: "home",
openapi: "/v1",
pageinit: {
home: "page_load_home()"
}
};


$(document).ready(function() {
$(document).ready(function () {
change_page();
});

$(window).bind('hashchange', function() {
$(window).bind("hashchange", function () {
change_page();
});

function change_page() {
var hash = document.location.hash.substr(1) || conf.default_hash;

if ( ! $("#autodoc_tab_"+hash).length ) {
if (!$("#autodoc_tab_" + hash).length) {
hash = conf.default_hash;
}

/* change menu highlights and content visibility */
$('#autodoc_navbar').find("a").each(function(id, obj) {
var curhash = $(obj).attr('href').substr(1);
if ( curhash == hash ) {
console.log("add " + curhash);
$(obj).parent().addClass('active');
$('#autodoc_tab_'+curhash).removeClass('d-none');
}
else {
console.log("remove " + curhash);
$(obj).parent().removeClass('active');
$('#autodoc_tab_'+curhash).addClass('d-none');
}
});
$("#autodoc_navbar")
.find("a")
.each(function (id, obj) {
var curhash = $(obj)
.attr("href")
.substr(1);
if (curhash == hash) {
console.log("add " + curhash);
$(obj)
.parent()
.addClass("active");
$("#autodoc_tab_" + curhash).removeClass("d-none");
} else {
console.log("remove " + curhash);
$(obj)
.parent()
.removeClass("active");
$("#autodoc_tab_" + curhash).addClass("d-none");
}
});

if ( conf.pageinit[hash]) {
if (conf.pageinit[hash]) {
eval(conf.pageinit[hash]);
}
}
@@ -49,11 +55,44 @@ function page_load_home() {
}

function document_load(page) {
if ( ! page ) { page = 0; }
if (!page) {
page = 0;
}

var tmpl = $("#autodoc_template_home");
var row = $(tmpl)
.find(".autodoc_template_home_row")
.clone();

$.getJSON(conf.openapi + "/documents?pageSize=3&pageIndex=" + page, null,
$.getJSON(
conf.openapi + "/documents?pageSize=3&pageIndex=" + page,
null,
function (data, textStatus, jqXHR) {
console.log(data);
$.each(data, function (id, doc) {
var col = $(tmpl)
.find(".autodoc_template_home_col")
.clone();
$(col).find(".autodoc_template_home_img").attr('src', config.openapi + '/documents/' + doc.id + '/image');
$(col)
.find(".autodoc_template_home_owner")
.html(doc.owner);

$(col)
.find(".autodoc_template_home_created")
.html(doc.created);
$.each(doc.tags, function (id, tag) {
$(col)
.find(".autodoc_template_home_tag")
.after(
$(col)
.find(".autodoc_template_home_tag")
.clone()
.html(tag)
);
});
$(row).append(col);
});
$('#autodoc_home_body').append(row);
}
);
}

Loading…
Peruuta
Tallenna