Browse Source

working on edit form

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>
main
Stephan Richter 10 months ago
parent
commit
733b5a06a4
  1. 88
      de.srsoftware.cal.web/src/main/resources/edit.html
  2. 2
      de.srsoftware.cal.web/src/main/resources/index.html
  3. 26
      de.srsoftware.cal.web/src/main/resources/occ.css
  4. 11
      de.srsoftware.cal.web/src/main/resources/script/edit.js

88
de.srsoftware.cal.web/src/main/resources/edit.html

@ -4,9 +4,95 @@
<title>SRSoftware OpenCloudCal</title> <title>SRSoftware OpenCloudCal</title>
<link rel="stylesheet" href="occ.css" /> <link rel="stylesheet" href="occ.css" />
<script src="/static/script/common.js"></script> <script src="/static/script/common.js"></script>
<script src="/static/script/event.js"></script> <script src="/static/script/edit.js"></script>
</head> </head>
<body> <body>
<h1>Create new event</h1> <h1>Create new event</h1>
<div class="form">
<fieldset>
<legend>basic data</legend>
<table>
<tr>
<th>Event title</th>
<td>
<input type="text" name="title" class="required" placeholder="Name of the Event" />
</td>
<th>Description</th>
</tr>
<tr>
<th>Location</th>
<td>
<input type="text" name="location" class="required" placeholder="Address"/>
</td>
<th rowspan="4">
<textarea name="description" id="description" placeholder="Describe the event"></textarea>
</th>
</tr>
<tr>
<th>Start</th>
<td>
<input type="datetime-local" name="start" class="required" />
</td>
</tr>
<tr>
<th>End</th>
<td>
<input type="datetime-local" name="start"/>
</td>
</tr>
<tr>
<th>Keywords</th>
<td>
<input type="text" name="tags-input" id="tags-input" placeholder="Press Enter to add" onkeyup="tagKeyPress(event)" />
</td>
</tr>
<tr>
<td colspan="2" id="taglist"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>extended data</legend>
<table>
<tr>
<th>Coordinates</th>
<td>
<input type="text" name="coords" placeholder="latitude, longitude">
</td>
<td></td>
<th>Map</th>
</tr>
<tr>
<th>Links</th>
<td>
<input type="url" name="link-url" placeholder="http://example.com/info" />
</td>
<td>
<button>add</button>
</td>
<td rowspan="4">
Map goes here
</td>
</tr>
<tr>
<td colspan="2" id="link-list">
</td>
</tr>
<tr>
<th>Attachments/Images</th>
<td>
<input type="url" name="image-url" placeholder="http://example.com/ad.jpg"/>
</td>
<td>
<button>add</button>
</td>
</tr>
<tr>
<td colspan="2" id="attachment-list">
</td>
</tr>
</table>
</fieldset>
</div>
</body> </body>
</html> </html>

2
de.srsoftware.cal.web/src/main/resources/index.html

@ -6,7 +6,7 @@
<script src="/static/script/common.js"></script> <script src="/static/script/common.js"></script>
<script src="/static/script/index.js"></script> <script src="/static/script/index.js"></script>
</head> </head>
<body> <body class="index">
<nav /> <nav />
<div> <div>
<h1>Event List</h1> <h1>Event List</h1>

26
de.srsoftware.cal.web/src/main/resources/occ.css

@ -1,5 +1,5 @@
tr:hover td, .index tr:hover td,
tr:hover th{ .index tr:hover th{
background-color: khaki; background-color: khaki;
} }
@ -74,3 +74,25 @@ tr.head{
table#eventlist{ table#eventlist{
width: 100%; width: 100%;
} }
.form table{
width: 100%;
}
.form tr>:nth-child(1){
width: 120px;
}
.form tr>:nth-child(2){
width: 200px;
}
.form textarea{
width: 100%;
box-sizing: border-box;
min-height: 120px;
}
.required{
border: 1px solid brown;
border-radius: 2px;
}

11
de.srsoftware.cal.web/src/main/resources/script/edit.js

@ -0,0 +1,11 @@
function tagKeyPress(e){
var input = e.target;
if (e.keyCode == 13){
var list = document.getElementById('taglist');
var btn = document.createElement('button');
btn.innerHTML = input.value;
list.appendChild(btn);
list.appendChild(document.createTextNode(' '));
input.value = '';
}
}
Loading…
Cancel
Save