JS, Edit

Praktikum2/ppm1/app/application.py

@@ -38,9 +38,13 @@ class Application_cl(object):
     #-------------------------------------------------------
     def detail(self, cat=None, id=None):
     #-------------------------------------------------------
-        print("Add: ", cat)
         if(cat!=None):
-            return self.GenerateDetail(cat)
+            if(id!=None):
+                print("ID!=None Cat=", cat, " id=", id)
+                return self.GenerateDetail(cat, id)
+            else:
+                print("ID=None Cat=", cat)
+                return self.GenerateDetail(cat)
         else:
             return self.GenerateIndex()
     @cherrypy.expose
@@ -102,11 +106,12 @@ class Application_cl(object):
     def GenerateDetail(self, category, id=None):
     #-------------------------------------------------------
         data = {}
+        data['category'] = category
         if(id != None):
+            data['id'] = id
             data['content'] = self.db.ReadEntry(category, id)
         else:
             data['id'] = None
-            data['category'] = category
             data['content'] = self.db.GetDefault(category)
         print(data, "\n")
         return self.view.CreateDetail(data)

Praktikum2/ppm1/app/database.py

@@ -46,6 +46,7 @@ class Database_cl(object):
     #-------------------------------------------------------
     def ReadEntry(self, category = None, id = None): 
     #-------------------------------------------------------
+        print("ReadEntry: ", category, id)
         data = None
         if id == None:
             data = self.data
@@ -53,6 +54,7 @@ class Database_cl(object):
             if id in self.data[category]: 
                 data = self.data[category][id]
         
+        print(data, "\n")
         return data
 
     #-------------------------------------------------------

Praktikum2/ppm1/data/students/33.json

@@ -1,6 +1,6 @@
 {
-   "matrikelnummer": "matrikelnummer",
+   "vorname": "vorname3",
-   "vorname": "vorname",
+   "name": "name3",
    "id": "33",
-   "name": "name"
+   "matrikelnummer": "3"
 }

Praktikum2/ppm1/data/students/34.json

@@ -1,6 +1,6 @@
 {
-   "matrikelnummer": "test",
+   "vorname": "vorname2",
-   "name": "test",
+   "name": "name2",
-   "vorname": "test",
+   "id": "34",
-   "id": "34"
+   "matrikelnummer": "2"
 }

Praktikum2/ppm1/data/students/35.json

@@ -1,6 +1,6 @@
 {
+   "vorname": "vorname1",
+   "name": "name1",
    "id": "35",
-   "matrikelnummer": "1234",
+   "matrikelnummer": "1"
-   "vorname": "test2",
-   "name": "test2"
 }

Praktikum2/ppm1/static/functions.js

@@ -0,0 +1,23 @@
+var table = document.getElementById('idList');
+var selected = table.getElementsByClassName('selected');
+var selectedId = 'None';
+table.onclick = highlight;
+
+function select(category) {
+    var id = selectedId;
+    if (id == 'None')
+    {
+        alert("Kein Eintrag ausgewaehlt!");
+    }
+    else
+    {
+        window.location.href = '/detail/?cat=' + category + '&id=' + id;
+    }
+}
+
+function highlight(e) {
+   if (selected[0]) selected[0].className = '';
+   e.target.parentNode.className = 'selected';
+   var tr = e.target.parentNode;
+   selectedId = tr.getAttribute('id');
+}

Praktikum2/ppm1/static/style.css

@@ -0,0 +1,138 @@
+body {
+   font-family: "Open Sans", sans-serif;
+   font-size: 12pt;
+
+   padding: 0;
+   margin: 0;
+}
+
+.clSiteHeader {
+   position: absolute;
+   top: 0;
+   left: 0;
+   right: 0;
+   height: 100px;
+   line-height: 100px;
+   margin: 0;
+   padding: 5px;
+   font-size: 40pt;
+   text-align: center;
+   text-shadow:black 3px 2px;
+   font-family: cursive, fantasy;
+   color: #920B19;
+   background-color: #B6B6B7;
+}
+
+.clContent {
+   position: absolute;
+   top: 110px;  /* height, padding, border, margin von idSiteHeader beachten */
+   left: 0;
+   right: 0;
+   bottom: 0;
+   margin: 0;
+   padding: 5px;
+}
+
+.clContentHeader {
+   position: absolute;
+   top: 20px;
+   left: 0;
+   right: 0;
+   height: 30px;
+   line-height: 30px;
+   margin: 0;
+   padding: 5px;
+   font-size: 18pt;
+   text-align: center;
+}
+
+.clContentArea {
+   position: absolute;
+   top: 80px; /* height, padding, border, margin von idContentHeader beachten */
+   left: 0;
+   right: 0;
+   bottom: 40px;  /* height, padding, border, margin von idButtonArea beachten */
+   margin: 10px 0;
+   margin-left: 10px;
+   padding: 5px;
+}
+
+.clButtonArea {
+   position: absolute;
+   left: 0;
+   right: 0;
+   /*float: left; width: 10px:*/
+   bottom: 0;
+   height: 80px;
+   line-height: 80px;
+   margin: 0;
+   padding: 5px;
+   text-align: center;
+   background-color: #B6B6B7;
+}
+
+.clButtonArea a, input[type="submit"] {
+   margin: 0 5px;
+   padding: 3px 6px;
+   font-size: 14pt;
+   text-decoration: none;
+   border: 2px solid;
+   color: black;
+   background-color: buttonface;
+}
+
+.clButtonArea a:hover, a:visited, a:active {
+   color: black;
+}
+
+#idList {
+   table-layout: fixed;
+   width: auto;
+   border: 2px solid;
+   border-collapse: collapse;
+   margin:auto;
+}
+
+#idList th {
+   text-align: center;
+   padding-left: 5px;
+   background-color: #FFFFFF;
+}
+
+#idList th, #idList td {
+   padding: 3px;
+   border: 2px solid;
+   cursor: pointer;
+}
+
+#idForm .clContentArea {
+   width: 500px;
+   margin: auto;
+}
+
+.selected {
+    background-color: brown;
+    color: #FFF;
+}
+
+.clFormRow {
+   position: relative;
+   height: 30px;
+   margin-bottom: 10px;
+}
+
+.clFormRow label {
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 240px;
+   text-align: center;
+}
+
+.clFormRow input {
+   position: absolute;
+   top: 0;
+   left: 250px;
+   width: 250px;
+}
+/* EOF */

Praktikum2/ppm1/templates/detail.tpl

@@ -21,10 +21,12 @@
             <input type="hidden" value="${data['id']}" id="id" name="id" />
 
             % for field in data['content']:
-            <div class="clFormRow">
+               % if field!='id':
-               <label for="${field}">${field}</label>
+               <div class="clFormRow">
-               <input type="text" value="${field}" id="${field}" name="${field}" />
+                  <label for="${field}">${field}</label>
-            </div>
+                  <input type="text" value="${data['content'][field]}" id="${field}" name="${field}" />
+               </div>
+               % endif
             % endfor
 
             <div id="idButtonArea" class="clButtonArea">

Praktikum2/ppm1/templates/list.tpl

@@ -5,12 +5,12 @@
           Praxisphasenmanager (PPM)
       </title>
       <meta charset="UTF-8" />     
-      <script type="text/javascript" src="/javascript/index.js"></script>
       <style type="text/css">
-         @import url("/template/template.css");
+         @import url("/style.css");
       </style>
    </head>
    <body>
+
       <h1 id="idSiteHeader" class="clSiteHeader">
          Praxisphasenmanager (PPM)
       </h1>
@@ -44,25 +44,28 @@
                % if data['content']!= None:
                   
                   % for entries in data['content']:
-                  <tr>
+                  <tr id=${entries}>
                      % for entry in data['content'][entries]:
                         % if entry!='id':
-                           <td>${data['content'][entries][entry]}</td>
+                           <td id=${entries}>${data['content'][entries][entry]}</td>
                         % endif
                      % endfor
-                  </tr>
+                  </tr id=${entries}>
                   % endfor
 
                % endif
 
-
             </table>
+            <button onclick="select('${data['category']}')">Hallo</button>
          </div>
-      
+
          <div id="idButtonArea" class="clButtonArea"> 
             <a href="/detail/?cat=${data['category']}" class="clButton">Neu</a>
             <a href="/index" class="clButton">Startseite</a>
          </div> 
       </div>
    </body>
+   <footer>
+      <script src="/functions.js" type="text/javascript"></script>
+   </footer>
 </html>