-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
21 changed files
with
849 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,44 @@ | ||
| # Templateorator | ||
| Small python script that creates directory structure for Jinja2 template with sidebar and tree view. | ||
| ## Templateorator | ||
|
|
||
| Small Python CLI script to create desired directory structure with empty files from a JSON file and use the structure in Jinja2 static html template. | ||
|
|
||
| Purpose: | ||
| Script can be used to create small static web page with "toc tree" and links. Good for all kinds of reporting representation and data gathering. | ||
|
|
||
| ##### Preconditions: | ||
| - python must be installed (Version 3.6.5) | ||
| - read and write privileges must be available in execution folder | ||
| - correct html template must be available (example: defaultTemplate.html) | ||
|
|
||
| ##### Example | ||
| Example contains result of the script run with default settings | ||
|
|
||
| preconditions for example run: | ||
| ReportStructureCreator.py in the same directory as default.json, defaultTemplate.json and img directory | ||
|
|
||
| run from CLI: | ||
| python ReportStructureCreator.py | ||
|
|
||
| output: | ||
| index.html and ProjectRoot directory | ||
| output files together with img directory make a full product of this script | ||
|
|
||
| what to check in example: | ||
| check TOC tree in index.html, check directory structure under ProjectRoot and check the structure of default.json | ||
|
|
||
| ##### Usage: | ||
| 1. Create JSON file with correct structure: (-h for CLA description or check default.json) | ||
| { directory/file : ["dir_name"/"file_name" , "name of entry in index-page"] } | ||
| -> in case of directory: add "children:[{}]" for subdirectories and subfiles | ||
| -> "name of entry in index-page" can be left out, then folder/file is created but not shown in TOC tree of html output file | ||
|
|
||
| 2. Run python script (-h for CLA description) | ||
| python ReportStructureCreator.py [--source_file ] [--template_file ] [--html_file ] [--dest_file ] [--help] | ||
|
|
||
| 3. Check output file (index.html) | ||
|
|
||
| 4. Replace created empty files with a valid version of files | ||
|
|
||
| 5. Enjoy in your new static web page and data structure | ||
|
|
||
| Note: You can adjust the width of the sidebar manually by left-clicking in the bottom right corner of the sidebar, holding the mouse button down and dragging the mouse left or right |
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <html><head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> | ||
| <style type="text/css"> | ||
| body | ||
| { | ||
| padding-left:35%; | ||
| padding-top:10%; | ||
| } | ||
| </style> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <img src="logo.png" style="width: 450px;"> | ||
| <h3 style="padding-left:10%;padding-top:5%"></h3> | ||
| <p style="padding-top:5%"> | ||
| ______________________________________________________ | ||
| </p> | ||
|
|
||
| <p style=padding-left:5%> | ||
| Some text can be put here (edit Default.htm) | ||
| </p> | ||
| </body> | ||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,221 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> | ||
| <style type="text/css"> | ||
|
|
||
| html | ||
| { | ||
| height: 100%; | ||
| overflow:hidden | ||
| } | ||
|
|
||
| body | ||
| { | ||
| margin: 0; | ||
| height: 100%; | ||
| font-family: Arial; | ||
| } | ||
|
|
||
| #main-container | ||
| { | ||
| display: flex; | ||
| width: 99.5%; | ||
| height: 98.5%; | ||
| } | ||
|
|
||
| #sidebar | ||
| { | ||
| display: flex; | ||
| width: 628px;; | ||
| padding-top: 10px; | ||
| vertical-align: none; | ||
| margin: 1px 0 0 0; | ||
| text-decoration: none; | ||
| background-color: #080801bb; | ||
| overflow-y:auto; | ||
| height:100%; | ||
| resize: horizontal; | ||
|
|
||
| } | ||
|
|
||
| #sidebar a | ||
| { | ||
| width:auto; | ||
| display: flex; | ||
| padding: 10px; | ||
| color: rgba(255,255,255, 0.75); | ||
| margin: 15px 0 0 0; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| #sidebar a:hover | ||
| { | ||
|
|
||
| width:auto; | ||
| background-color: rgba(255, 255, 255, 0.1); | ||
| color: white !important; | ||
| } | ||
|
|
||
| #content | ||
| { | ||
| display: flex; | ||
| width: 100%; | ||
| vertical-align: top; | ||
| padding: 0px 0 0 0px; | ||
| } | ||
|
|
||
| ul.tree li | ||
| { | ||
| width:auto; | ||
| list-style-type: none; | ||
| position: relative; | ||
| } | ||
|
|
||
| ul.tree li ul | ||
| { | ||
| width:auto; | ||
| display: none; | ||
| } | ||
|
|
||
| ul.tree li.open > ul | ||
| { | ||
| width:auto; | ||
| display: block; | ||
| } | ||
|
|
||
| ul.tree li > a:not(:last-child):before | ||
| { | ||
| width:auto; | ||
| content: '+'; | ||
| } | ||
|
|
||
| ul.tree li.open > a:not(:last-child):before | ||
| { | ||
| width:auto; | ||
| content: '-'; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <div id="main-container"> | ||
| <div id="sidebar"> | ||
|
|
||
| <ul class="tree"> | ||
| <li> | ||
| <img src="./img/logo.png" style="width: 230px;height:auto;margin-top: -26px;margin-left:70px"> | ||
| </li> | ||
| <li> | ||
| <a href="./img/Default.htm" target="ContentFrame">TOC Root</a> | ||
| <ul> | ||
| <li> | ||
| <a href="ProjectRoot/Example/file_1" target="ContentFrame">file name_1</a> | ||
| </li> | ||
| <li> | ||
| <a href="./img/Default.htm" target="ContentFrame">folder name 1</a> | ||
| <ul> | ||
| <li> | ||
| <a href="./img/Default.htm" target="ContentFrame">subfolder name 1</a> | ||
| <ul> | ||
| <li> | ||
| <a href="ProjectRoot/Example/folder_1/subfolder_1/subsubfolder_1/file_2" target="ContentFrame">file name 2</a> | ||
| </li> | ||
| <li> | ||
| <a href="./img/Default.htm" target="ContentFrame">subsubfolder name 2</a> | ||
| <ul> | ||
| <li> | ||
| <a href="ProjectRoot/Example/folder_1/subfolder_1/subsubfolder_2/file_3" target="ContentFrame">file name 3</a> | ||
| </li> | ||
| </ul> | ||
| </li> | ||
| <li> | ||
| <a href="ProjectRoot/Example/folder_1/subfolder_1/subsubfolder_3/file_4" target="ContentFrame">file name 4</a> | ||
| </li> | ||
| </ul> | ||
| </li> | ||
| <li> | ||
| <a href="./img/Default.htm" target="ContentFrame">subfolder name 2</a> | ||
| <ul> | ||
| <li> | ||
| <a href="./img/Default.htm" target="ContentFrame">subsubfolder name 1</a> | ||
| <ul> | ||
| <li> | ||
| <a href="ProjectRoot/Example/folder_1/subfolder_2/subsubfolder_1/file_5" target="ContentFrame">file name 5</a> | ||
| </li> | ||
| </ul> | ||
| </li> | ||
| <li> | ||
| <a href="./img/Default.htm" target="ContentFrame">subsubfolder name 2</a> | ||
| <ul> | ||
| <li> | ||
| <a href="ProjectRoot/Example/folder_1/subfolder_2/subsubfolder_2/file_6" target="ContentFrame">file name 6</a> | ||
| </li> | ||
| <li> | ||
| <a href="ProjectRoot/Example/folder_1/subfolder_2/subsubfolder_2/file_7" target="ContentFrame">file name 7</a> | ||
| </li> | ||
| </ul> | ||
| </li> | ||
| <li> | ||
| <a href="./img/Default.htm" target="ContentFrame">subsubfolder name 3</a> | ||
| <ul> | ||
| <li> | ||
| <a href="ProjectRoot/Example/folder_1/subfolder_2/subsubfolder_3/file_8" target="ContentFrame">file name 8</a> | ||
| </li> | ||
| </ul> | ||
| </li> | ||
| <li> | ||
| <a href="./img/Default.htm" target="ContentFrame">subsubfolder name 4</a> | ||
| <ul> | ||
| <li> | ||
| <a href="ProjectRoot/Example/folder_1/subfolder_2/subsubfolder_4/file_9" target="ContentFrame">file name 9</a> | ||
| </li> | ||
| <li> | ||
| <a href="ProjectRoot/Example/folder_1/subfolder_2/subsubfolder_4/file_10" target="ContentFrame">file name 10</a> | ||
| </li> | ||
| <li> | ||
| <a href="ProjectRoot/Example/folder_1/subfolder_2/subsubfolder_4/file_11" target="ContentFrame">file name 11</a> | ||
| </li> | ||
| <li> | ||
| <a href="ProjectRoot/Example/folder_1/subfolder_2/subsubfolder_4/file_12" target="ContentFrame">file name 12</a> | ||
| </li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| </li> | ||
|
|
||
| </ul> | ||
| </div> | ||
| <div id="content" style="height: 100%;"> | ||
| <iframe src="./img/Default.htm" name="ContentFrame" style="width:100%;height:100%" frameborder="1"></iframe> | ||
| </div> | ||
| </div> | ||
| <script type="text/javascript"> | ||
| var tree = document.querySelectorAll('ul.tree a:not(:last-child)'); | ||
| for(var i = 0; i < tree.length; i++){ | ||
| tree[i].addEventListener('click', function(e) { | ||
| var parent = e.target.parentElement; | ||
| var classList = parent.classList; | ||
| if(classList.contains("open")) { | ||
| classList.remove('open'); | ||
| var opensubs = parent.querySelectorAll(':scope .open'); | ||
| for(var i = 0; i < opensubs.length; i++){ | ||
| opensubs[i].classList.remove('open'); | ||
| } | ||
| } else { | ||
| classList.add('open'); | ||
| } | ||
| }); | ||
| } | ||
| </script> | ||
|
|
||
|
|
||
| </body> | ||
| </html> |
Oops, something went wrong.