Browse Source

preparing event save

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>
main
Stephan Richter 6 months ago
parent
commit
9ffa40fd39
  1. 11
      de.srsoftware.cal.web/src/main/java/de/srsoftware/cal/IndexHandler.java
  2. 23
      de.srsoftware.cal.web/src/main/resources/edit.html
  3. BIN
      de.srsoftware.cal.web/src/main/resources/images/favicon-32x32.png
  4. BIN
      de.srsoftware.cal.web/src/main/resources/images/favicon.ico
  5. 38
      de.srsoftware.cal.web/src/main/resources/occ.css
  6. 3
      de.srsoftware.cal.web/src/main/resources/script/common.js
  7. 96
      de.srsoftware.cal.web/src/main/resources/script/edit.js

11
de.srsoftware.cal.web/src/main/java/de/srsoftware/cal/IndexHandler.java

@ -13,10 +13,11 @@ public class IndexHandler extends PathHandler { @@ -13,10 +13,11 @@ public class IndexHandler extends PathHandler {
@Override
public boolean doGet(String path, HttpExchange ex) throws IOException {
switch (path) {
case "/":
return staticPages.doGet("/index", ex);
}
return super.doGet(path, ex);
return switch (path) {
case "/" -> staticPages.doGet("/index", ex);
case "/favicon.ico" -> staticPages.doGet("/images/%s".formatted(path), ex);
default -> super.doGet(path, ex);
};
}
}

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

@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
</head>
<body>
<h1>Create new event</h1>
<button id="save" disabled>save</button>
<div class="form">
<fieldset>
<legend>basic data</legend>
@ -17,14 +18,14 @@ @@ -17,14 +18,14 @@
<tr>
<th>Event title</th>
<td>
<input type="text" name="title" class="required" placeholder="Name of the Event" />
<input type="text" name="title" class="required" placeholder="Name of the Event" id="title" />
</td>
<th>Description</th>
</tr>
<tr>
<th>Location</th>
<td>
<input type="text" name="location" class="required" placeholder="Address"/>
<input type="text" name="location" class="required" placeholder="Address" id="location" />
</td>
<th rowspan="4">
<textarea name="description" id="description" placeholder="Describe the event"></textarea>
@ -33,26 +34,26 @@ @@ -33,26 +34,26 @@
<tr>
<th>Start</th>
<td>
<input type="datetime-local" name="start" class="required" />
<input type="datetime-local" name="start" class="required" id="start" />
</td>
</tr>
<tr>
<th>End</th>
<td>
<input type="datetime-local" name="start"/>
<input type="datetime-local" name="start" id="end" />
</td>
</tr>
<tr>
<th>Keywords</th>
<td>
<input type="text" name="tags-input" id="tags-input" placeholder="Press Enter to add" onkeyup="tagKeyPress(event)" />
<input type="text" name="tags-input" id="tags-input" placeholder="Press Enter to add" onkeyup="tagKeyPress(event)" class="required" />
<select id="proposals" multiple="multiple">
</select>
</td>
</tr>
<tr>
<td colspan="2" id="taglist"></td>
<td colspan="3" id="taglist">Your must assign at least one keyword before you may save your event!</td>
</tr>
</table>
</fieldset>
@ -72,10 +73,10 @@ @@ -72,10 +73,10 @@
<tr>
<th>Links</th>
<td>
<input type="url" name="link-url" placeholder="http://example.com/info" />
<input type="url" name="link-url" placeholder="http://example.com/info" id="link-url" />
</td>
<td>
<button>add</button>
<button onclick="addLink(event)">add</button>
</td>
<td rowspan="4" style="width: 100%">
<div id="map" style="width: 100%; height: 500px;"></div>
@ -97,14 +98,14 @@ @@ -97,14 +98,14 @@
<tr>
<th>Attachments/Images</th>
<td>
<input type="url" name="image-url" placeholder="http://example.com/ad.jpg"/>
<input type="url" name="image-url" placeholder="http://example.com/ad.jpg" id="image-url"/>
</td>
<td>
<button>add</button>
<button onclick="addImage(event)">add</button>
</td>
</tr>
<tr>
<td colspan="2" id="attachment-list">
<td colspan="3" id="attachment-list">
</td>
</tr>
</table>

BIN
de.srsoftware.cal.web/src/main/resources/images/favicon-32x32.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
de.srsoftware.cal.web/src/main/resources/images/favicon.ico

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

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

@ -1,3 +1,6 @@ @@ -1,3 +1,6 @@
body {
font-family: sans;
}
.index tr:hover td,
.index tr:hover th{
background-color: khaki;
@ -98,3 +101,38 @@ table#eventlist{ @@ -98,3 +101,38 @@ table#eventlist{
border-radius: 2px;
}
#attachment-list img {
max-width: 175px;
max-height: 175px;
padding: 1px;
}
#attachment-list span {
position: relative;
display: inline-block;
}
#attachment-list a {
position: absolute;
right: 0;
z-index: 100;
background: white;
border: 1px solid blue;
border-radius: 4px;
height: 20px;
width: 20px;
text-align: center;
}
#proposals{
display: none;
}
#save {
min-width: 100px;
min-height: 50px;
font-size: 18px;
font-weight: bold;
position: fixed;
top: 15px;
left: 50%;
}

3
de.srsoftware.cal.web/src/main/resources/script/common.js

@ -0,0 +1,3 @@ @@ -0,0 +1,3 @@
function element(id){
return document.getElementById(id);
}

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

@ -1,11 +1,36 @@ @@ -1,11 +1,36 @@
var keyTimer = null;
var selectedTags = new Set();
var marker = NULL;
var marker = null;
function fetchTags(text){
if (text) fetch('/api/tags?infix='+text).then(handleTags);
}
function removeParent(target){
var p = target.parentNode;
p.parentNode.removeChild(p);
}
function addLink(evt){
var input = element('link-url');
var url = input.value;
var name = prompt('Description for '+url,'Homepage');
var span = document.createElement('span');
span.innerHTML = `<a href="${url}">${name}</a><a onclick="removeParent(this)">❌</a> `;
element('link-list').appendChild(span);
input.value = '';
}
function addImage(evt){
var input = element('image-url');
var url = input.value;
var span = document.createElement('span');
span.innerHTML = `<img src="${url}" /><a onclick="removeParent(this)">❌</a> `;
element('attachment-list').appendChild(span);
input.value = '';
}
async function handleTags(response){
if (response.ok){
var tags = await response.json();
@ -13,8 +38,8 @@ async function handleTags(response){ @@ -13,8 +38,8 @@ async function handleTags(response){
console.log("no proposals!");
return;
}
var select = document.getElementById('proposals');
var input = document.getElementById('tags-input');
var select = element('proposals');
var input = element('tags-input');
if (!select) return;
select.innerHTML = '';
tags.forEach(tag => {
@ -35,7 +60,7 @@ async function handleTags(response){ @@ -35,7 +60,7 @@ async function handleTags(response){
}
function onMapClick(e) {
document.getElementById('coords').value = `${e.latlng.lat}, ${e.latlng.lng}`;
element('coords').value = `${e.latlng.lat}, ${e.latlng.lng}`;
if (marker) marker.setLatLng(e.latlng);
}
@ -43,15 +68,66 @@ function onMapClick(e) { @@ -43,15 +68,66 @@ function onMapClick(e) {
function tagKeyPress(e){
var input = e.target;
if (e.keyCode == 13){
selectedTags.add(input.value);
var list = document.getElementById('taglist');
var btn = document.createElement('button');
btn.innerHTML = input.value;
list.appendChild(btn);
list.appendChild(document.createTextNode(' '));
var tag = input.value;
if (!tag) return;
var list = element('taglist');
if (selectedTags.size<1) list.innerHTML = '';
list.innerHTML += `<span><button onclick="this.parentNode.parentNode.removeChild(this.parentNode);" title="click to remove">${input.value}</button> </span>`;
selectedTags.add(tag);
input.value = '';
var btn = element('save');
btn.removeAttribute("disabled");
btn.onclick= function(){ saveEvent(); };
console.log(btn);
} else {
if (keyTimer != null) clearTimeout(keyTimer);
setTimeout(() => fetchTags(input.value),500);
}
}
function getTags(){
var list = element('taglist');
var buttons = list.getElementsByTagName('button');
var tags = [];
for(let i = 0;i < buttons.length; i++){
tags.push(buttons[i].innerHTML);
}
return tags;
}
function getLinks(){
var list = element('link-list');
var anchors = list.getElementsByTagName('a');
var links = [];
for(let i = 0;i < anchors.length; i++){
var anchor = anchors[i];
if (anchor.href) links.push({description:anchor.innerHTML,url:anchor.href});
}
return links;
}
function getAttachments(){
var list = element('attachment-list');
var images = list.getElementsByTagName('img');
var urls = [];
for(let i = 0;i < images.length; i++){
var img = images[i];
if (img.src) urls.push(img.src);
}
return urls;
}
function saveEvent(){
var event = {
title : element('title').value,
description : element('description').value,
location : element('location').value,
start : element('start').value,
end : element('end').value,
tags: getTags(),
links: getLinks(),
coords: element('coords').value,
attachments: getAttachments()
};
console.log(event);
}
Loading…
Cancel
Save