Dateiverwaltung für die WebBox
ulrich
2017-02-20 5dfab6ee05a6926a84c068ee0ebcabab1480c9c5
commit | author | age
c7c502 1 <!DOCTYPE html>
U 2 <html>
3   <head>
9fac84 4     <title>Dateiverwaltung</title>
c7c502 5     <meta charset="UTF-8">
U 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
a4d3b5 7     <link rel="stylesheet" href="/jslib/codemirror/lib/codemirror.css">    
U 8     <link rel="stylesheet" href="/jslib/codemirror/addon/display/fullscreen.css">        
c7c502 9     <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
U 10     <link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">
11     <link rel="stylesheet" type="text/css" href="stile.css">
7342b1 12     <script id="tpl-kacheln" type="x-tmpl-mustache">
U 13       {{#files}}          
14         <figure class="figure datei-figure text-center text-warning align-top">
5dfab6 15           <i class="fa {{ typeClass }} fa-3x"></i>
7342b1 16           <figcaption class="figure-caption">{{ fr.absolutePath }}</figcaption>
U 17         </figure>   
18       {{/files}}
19           
5dfab6 20     </script>
U 21     <script id="tpl-bcr" type="x-tmpl-mustache">
22       {{#files}}
23           <a class="breadcrumb-item" href="{{ relPath }}">{{ fName }}</a>
24       {{/files}}
25     </script>
26     <script id="tpl-bcr2" type="x-tmpl-mustache">
27       <span class="breadcrumb-item active">Bootstrap</span>
28     </script>
29     <script id="tpl-bcr3" type="x-tmpl-mustache">
30       <div class="pull-right align-middle">
31         <i class="fa fa-th-large"></i>
32       </div>              
7342b1 33     </script>
c7c502 34   </head>
U 35   <body>
36     <!-- Kopfzeile -->
37     <div class="nord">
38       
39       <div id="menue"> <!-- Menue -->
40         <ul class="nav">
41           <li class="nav-item dropdown">
9fac84 42             <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Datei</a>
c7c502 43             <div class="dropdown-menu">
a4d3b5 44               <a id="newTextFile" class="dropdown-item" href="#">Neue Text-Datei..</a>
9fac84 45               <a class="dropdown-item" href="#">Neues Dokument..</a>
c7c502 46               <div class="dropdown-divider"></div>
9fac84 47               <a class="dropdown-item" href="#">Ansehen als Code</a>
U 48               <a class="dropdown-item" href="#">Ansehen als Dokument</a>
49               <div class="dropdown-divider"></div>
50               <a class="dropdown-item" href="#">Bearbeiten als Code</a>
51               <a class="dropdown-item" href="#">Bearbeiten als Dokument</a>
a4d3b5 52               <div class="dropdown-divider"></div>
e5ff42 53               <a id="saveFile" class="dropdown-item" href="#">Speichern</a>
a4d3b5 54               <div class="dropdown-divider"></div>
U 55               <a id="closeFile" class="dropdown-item" href="#">Schliessen</a>
c7c502 56             </div>
U 57           </li>
58           <li class="nav-item dropdown">
9fac84 59             <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Nutzer-ID</a>
c7c502 60             <div class="dropdown-menu">
9fac84 61               <a class="dropdown-item" href="/">Zur Hauptseite der WebBox wechseln</a>
U 62               <div class="dropdown-divider"></div>
63               <a class="dropdown-item" href="/wbx/mng">Apps verwalten</a>
64               <a class="dropdown-item" href="/um/ui">Benutzer verwalten</a>
e5ff42 65               <a class="dropdown-item disabled" href="/file-cms/ui">Dateien verwalten</a>
9fac84 66               <div class="dropdown-divider"></div>
c7c502 67               <a id="logout" class="dropdown-item" href="#">Abmelden</a>
U 68             </div>
69           </li>
70         </ul>
71       </div> <!-- Menue -->
72       
73     </div>
74     <div class="inhalt">
75       <!-- westliche Seitenleiste -->
76       <div class="west hidden-xs-down">
77           <!-- linke Seitenleiste mit Links -->
78           <nav class="nav flex-column">
79             <a class="nav-link active" href="#">Active</a>
80             <a class="nav-link" href="#">Link</a>
81             <a class="nav-link" href="#">Link</a>
82             <a class="nav-link disabled" href="#">Disabled</a>
83           </nav>    
84       </div>
85       <!-- zentraler Inhaltsbereich -->
86       <div class="zentrum">
a4d3b5 87         
U 88         <div class="code-editor-container pr-3 pb-3">
89         <div class="codeeditor-space pr-3">
90           <textarea class="codeeditor" id="editspace"></textarea>       
c7c502 91         </div>
a4d3b5 92         </div>
U 93         
94         <!-- <div id="code-editor-container" class="pr-2"> -->
95           
96           <!--
97           <div id="edit-tabs">
98             <ul class="nav nav-tabs">
99               <li class="nav-item">
100                 <a class="nav-link active" href="#">Active</a>
101               </li>
102               <li class="nav-item">
103                 <a class="nav-link" href="#">Link</a>
104               </li>
105               <li class="nav-item">
106                 <a class="nav-link" href="#">Link</a>
107               </li>
108               <li class="nav-item">
109                 <a class="nav-link disabled" href="#">Disabled</a>
110               </li>
111             </ul>
112           </div>
113           -->
114           
115         <!-- </div> -->
116         
117         <div id="dateiansicht">
118           <!-- Breadcrumb Start -->
119           <div class="zentrum-bc">
5dfab6 120             <nav class="breadcrumb" id="bcnav">
a4d3b5 121               <a class="breadcrumb-item" href="#">Home</a>
U 122               <a class="breadcrumb-item" href="#">Library</a>
123               <a class="breadcrumb-item" href="#">Data</a>
124               <span class="breadcrumb-item active">Bootstrap</span>
125               <div class="pull-right align-middle">
126                 <i class="fa fa-th-large"></i>
127               </div>
128             </nav>            
129           </div>
130           <!-- Breadcrumb Ende -->
131           <!-- Dateikacheln Start -->
7342b1 132           <div class="zentrum-liste" id="dateien">
a4d3b5 133             <figure class="figure datei-figure text-center text-warning align-top">
U 134               <i class="fa fa-folder fa-3x"></i>
135               <figcaption class="figure-caption">Kurzer Text</figcaption>
136             </figure>   
137             <figure class="figure datei-figure text-center text-warning align-top">
138               <i class="fa fa-folder fa-3x"></i>
139               <figcaption class="figure-caption">A caption for the above image.</figcaption>
140             </figure>   
141             <figure class="figure datei-figure text-center text-warning align-top">
142               <i class="fa fa-folder fa-3x"></i>
143               <figcaption class="figure-caption">Ein ganz langer Text, der dieses Element benennt.</figcaption>
144             </figure>   
145             <figure class="figure datei-figure text-center text-warning align-top">
146               <i class="fa fa-folder fa-3x"></i>
147               <figcaption class="figure-caption">Wort</figcaption>
148             </figure>   
149             <figure class="figure datei-figure text-center text-warning align-top">
150               <i class="fa fa-folder fa-3x"></i>
151               <figcaption class="figure-caption">Wort2</figcaption>
152             </figure>   
153             <figure class="figure datei-figure text-center text-warning align-top">
154               <i class="fa fa-folder fa-3x"></i>
155               <figcaption class="figure-caption">Wort3</figcaption>
156             </figure>   
157           </div>
158           <!-- Dateikacheln Ende -->
c7c502 159         </div>
915927 160         
U 161         <!-- Modal -->
162         <div class="modal fade" id="saveModal">
163           <div class="modal-dialog" role="document">
164             <div class="modal-content">
165               <div class="modal-header">
1a47ca 166                 <h5 class="modal-title">Datei speichern</h5>
915927 167                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
U 168                   <span aria-hidden="true">&times;</span>
169                 </button>
170               </div>
171               <div class="modal-body">
172                 <p>Dateiname?</p>
173                 <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Dateiname" name="dateiname" id="dateiname">
174               </div>
175               <div class="modal-footer">
176                 <button id="modal_ok" type="button" class="btn btn-primary" data-dismiss="modal">Speichern</button>
177                 <button id="modal_cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
178               </div>
179             </div>
180           </div>
181         </div> <!-- Modal Ende -->        
c7c502 182       </div>
U 183       <!-- oestliche Seitenleiste -->
184       <!--
185       <div class="ost">
186         &ouml;stliche Seitenleiste
187       </div>
188       -->
189     </div>
190     <!-- Fusszeile -->
191     <!--
192     <div class="sued">
193       Fu&szlig;zeile
194     </div>
195     -->
196     <!-- Skripte -->
197     <script src="/jslib/jquery/jquery.min.js"></script>
a4d3b5 198     <script src="/jslib/codemirror/lib/codemirror.js"></script>
U 199     <script src="/jslib/codemirror/mode/javascript/javascript.js"></script>
200     <script src="/jslib/codemirror/mode/xml/xml.js"></script>
201     <script src="/jslib/codemirror/mode/htmlmixed/htmlmixed.js"></script>
202     
203     <script src="/jslib/codemirror/addon/display/fullscreen.js"></script>
204     
c7c502 205     <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
U 206     <script src="/jslib/mustache/mustache.min.js"></script>
207     <script src="ui.js"></script>
208     <script type="text/javascript" charset="utf-8">
209       //var ui;
210       $(document).ready(function() {
a4d3b5 211         fm_init();
c7c502 212       });
U 213     </script>
214   </body>
215 </html>