FMK2018 Kalender in FileMaker eigenes HTML5-Framework mit Drag und Drop by Otmar Kramis

9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018
www.filemaker-konferenz.com
eigenes HTML5-Framework mit Drag (und Drop)

Otmar Kramis
Kalender in FileMaker

Kalender in FileMaker – Otmar Kramis
Über den Sprecher
• *1959 Hildisrieden, Luzern

• 80er-Jahre, Jazz-Saxofon Studium an der
Hochschule für Musik und darstellende Kunst
Graz

• ab 91 Dozent an der Jazzschule Luzern, heute
Hochschule Luzern - Musik

• ab ~97 fliessender Übergang vom Dozenten zum
Informatiker, durch Fusion der Fachhochschulen
Zentralschweiz seit 2006 Applikationsentwickler
an der Hochschule Luzern - IT Services

• Erstkontakt mit FileMaker, durch Übernahme einer
Mediathek-Selbstausleihe-Lösung unter FM3

• erste eigene Lösung? Raum-Reservation für die
Jazzschule Luzern mit FM6;-)

Kurze Demo
fmp://fmslocal.gibi.loc/ResourceCalendarFMK

Tabellen
• Resources UUID, fkResourceGroup, ResName, ResnameShort, State, Info 
• Groups UUID, GroupName, active, Info 
• Colors ColorID, Background, Border, Name 
• Events Details nächste Folien 
• GUI Details nächste Folien

Events - Daten
• UUID Text Indexed, Auto-Enter = Get ( UUID )

• fkResource Text Indexed

• fkGroup Text Indexed, Auto-Enter = Events_Resources::fkGroup

• datefrom Date Indexed

• dateto Date (Indexed)

• overlapGrid Calc Unstored = 5

• timefrom Time Indexed, Auto-Enter =  
Let ( _step = overlapGrid * 60 ; Div ( Self ; _step ) * _step )

• timeto Time (Indexed), Auto-Enter =  
Let ( _step = overlapGrid * 60 ; Div ( Self ; _step ) * _step )

• Event Text Indexed

• color Text Indexed

Events - berechnete Felder
• dateList Text Indexed, Auto-Enter =  
ListOfDate ( datefrom ; dateto - ( timeto = Time ( 0 ; 0 ; 0 ) ) )

• FieldList Text Indexed, Auto-Enter = 
Substitute ( List (  
datefrom; dateto; timefrom; timeto; Event; color; fkResource; tooltip 
) ; "¶" ; "t" )

• timestampfrom Timestamp Indexed, Auto-Enter =  
Let ( _timefrom =  
If ( IsEmpty ( timefrom ) ; GetAsTime ( "00:00" ) ; timefrom ) ;  
Timestamp ( datefrom ; _timefrom ) )

• timestampto Timestamp Indexed, Auto-Enter =  
Let ( _timeto =  
If ( IsEmpty ( timeto ) ; GetAsTime ( "24:00" ) ; timeto ) ;  
Timestamp ( dateto ; _timeto ) )

• timestampList Text Indexed, Auto-Enter = 
TimestampList ( timestampfrom ; timestampto ; overlapGrid )

• noverlap Calculation Unstored = Count ( Events@start::UUID )

GUI - Felder
• UUID Text Indexed, Auto-Enter = Get ( UUID )

• gDate Date Global (Startdatum des Anzeigebereichs)

• gNumberOfDays Number Global (Anzahl anzuzeigende Tage)

• HTMLCalendar Text Global (der berechnete html-Code)

• gDateList Calc Let ( [ _date = GUI::gDate ; _ndays = GUI::gNumberOfDays ] ; 
ListOfDate ( _date ; _date + _ndays - 1 ) ) 
(Ankerfeld für Beziehung GUI <—> Events::dateList )

• gResourceList Text Global (Ankerfeld für Beziehung GUI <—> Events::fkResource )

• gEventId Text Global (Ankerfeld für GUI_Events@gEventId)

• gResourceId Text Global (Ankerfeld für GUI_Resources@gResourceID)

• gGroupID Text Global (Ankerfeld für GUI_Groups@gGroupID)

• gLanguage Text Global

• g1 Calc Unstored, = 1 (für Statusfilter)

• GFilterGroupID Text Global (Filterfeld für Gruppenauswahl)

Beziehungsgraph

html
<html>
<head>
<meta charset="utf-8">
<script>
unser JavaScript-Code hier
</script>
<style>
unser CSS-Code hier
</style>
</head>
<body>
<svg> (Scalable Vector Graphics)
das Kalender-Grid hier, Kopf, Gruppen- und Ressourcenlabel u.s.w.
</svg>
<div class="calendar">
unsere Termine hier
</div>
<a>
hier noch die aktuelle Zeitlinie
</a>
</body>
</html>

JavaScript
<script>
var xdown = null;
var ydown = null;
u.s.w
document.addEventListener('mousedown', function(event) {
wenn Terminobjekt geklickt, Variablen mit Eigenschaften füllen, Klick-Koordinaten sichern
});
document.addEventListener('mouseup', function(event) {
wenn vorheriger Mousdown-Event in Terminobjekt war,
falls Koordinaten ungleich Koordinaten gesichert, FM-Update-Script ausführen
sonst FM-Zeigedetail-Script ausführen
});
document.addEventListener('mousemove', function(event) {
wenn Mousdown-Event in Terminobjekt und Koordinaten ungleich Startkoordinaten
Terminobjekt an neuer Position / mit neuer Länge zeichnen
});
helper Funktionen
</script>

CSS
<style>
//Elemente
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; color: #202020; width: 100%; }
svg { width: 100%; stroke: rgba(200,200,200,0.5); stroke-width: 1px; }
text { font-size: 1.2em; fill: #505050; width: 100%; stroke: none; cursor: default; }
a { padding-left: 2px; padding-right: 2px; display: block; text-decoration: none; color: #404040; }
figure { display: table; position: absolute; font-size: 1em; border-left: solid; border-top: 1px solid;
border-bottom: 1px solid; border-right: 0px solid; height: 29px; max-height: 29px; cursor: pointer; }
//Klassen
.button { cursor: pointer; }
.calendar { position: absolute; left: 0px; right: 1%; top:0px; }
.label { padding-top: 2px; padding-left: 2px; padding-right: 2px; height: 26px; max-height: 26px;  
color: #404040; overflow: hidden; overflow-y: hidden; white-space: nowrap; }
.hand { display: table-cell; vertical-align: middle; }
…….
.row45C9AC81-6E97-44A4-A7CD-1CC110698BCC11 { top: 40px; height: 27px; }
.row302666EE-90C1-4058-AEC0-BB74CD1E587A31 { top: 70px; height: 27px; }
…….
.BLUE { background-color: rgba(24,108,227,0.45); border-color: #0074D9; display: table; }
.BLUEhand { width:7px; background: none; border-right: 1px solid #0074D9; cursor: ew-resize; }
…..
</style>

CFs für CSS-Zeilen
setCSSrows ( _list ; _nrows ; _n ; _offsettop ; _height )
Let ( [
_value = Substitute ( GetValue ( _list ; _n ) ; "|" ; "¶" )
; _id = GetValue ( _value ; 1 )
; _nslots = GetAsNumber ( GetValue ( _value ; 5 ) )
; _slotstart = GetValue ( _value ; 6 )
; _top = _height * ( _slotstart - 1 ) + _offsettop
; _row = setCSSslots ( _id ; _nslots ; 1 ; _top ; _height ) //generate slots for concurrent events
] ;
_row & If ( _n < _nrows ; setCSSrows ( _list ; _nrows ; _n + 1 ; _offsettop ; _height ) ; "" )
)
___________________________________________________________________________________
setCSSslots ( _id ; _count ; _n ; _top ; _height )
".row" & _id & _count & _n & " { top: " & _top & "px; height: " & _height - 3 & "px;}¶" &
If ( _n < _count ; setCSSslots ( _id ; _count ; _n + 1 ; _top + _height ; _height ) )

CF für CSS-Farben
setCSScolors ( _list ; _handwidth )
Let ( [
_params = Substitute ( GetValue ( _list ; 1 ) ; "|" ; "¶" )
; _col = GetValue ( _params ; 1 )
; _bgr = GetValue ( _params ; 2 )
; _brd = GetValue ( _params ; 3 )
; _width = _handwidth - 1
; _tag = Substitute ( "
._col { background-color: rgba(_bgr); border-color: _brd; display: table; }¶
._colhand { width:_widthpx; background:none; border-right: 1px solid _brd; cursor: ew-resize; }¶
¶"
; ["_col" ; _col]
; ["_brd" ; _brd]
; ["_bgr" ; _bgr]
; ["_width" ; _width]
)
; _list = RightValues ( _list ; ValueCount ( _list ) - 1 )
] ;
_tag & If ( ValueCount ( _list ) ; setCSScolors ( _list ) )
)

CFs für Kalenderraster und Daten
• setCalendarGrid zeichnet Kopfbereich und vertikale Linien, Monat, Woche,  
Datum, Stunden, je nach anzahl anzuzeigender Tage und Breite  
des Kalenders.

• setCalendarHourGrid Wird durch setCalendarGrid aufgerufen, Parameter abhängig von  
der Breite eines Tages in Pixel.

• setCalendarGridRows zeichnet Gruppen- und Ressourcen-Label, horzontale Linien und  
Hintergrundrechtecke. Label und Hintergrundrechtecke werden für  
Klickaktionen registriert.

• setCalendar rendert schlussendlich die Termin-Elemente:

 
<figure class='row45C9AC81-6E97-44A4-A7CD-1CC110698BCC21 BLUE' evt='CFFC101D-89B6-4BEF-9B6B-94FDC71E7391'
start='28800' end='79200' dstart='1538956800000' dend='1539302400000' info='Math' rowpos='1'  
style='left:308.44px; width:310.92px'> 
<div class='block' style='width:304.92px; max-width:304.92px'>08:00 - 22:00<br>Math</div> 
<div class='hand BLUEhand' evt='CFFC101D-89B6-4BEF-9B6B-94FDC71E7391' style='left:304.92px;'></div> 
</figure>

Skripte
• refresh Hauptskript, berechnet das HTML-Feld und aktualisiert Tasten, installiert  
Timer-Skript für WebDirect. 
• ShowEvent öffnet das entsprechnede Detailfenster (Karte) an der Klickposition

• ShowGroup

• ShowResource

• UpdateEvent speichert Änderungen per Ziehen im WebViewer in der Events Tabelle, triggert  
wenn nötig das refresh Skript

• NewEvent wird durch Doppelklick in einen leeren Bereich im Kalender aufgerufen, erstellt  
einen neuen Termin an der Klickposition mit der voreigestellten Dauer für neue  
Termine

• DeleteEvent Aufgerufen durch Taste im Termin Detail-Fenster

Skript refresh
# parameter 1: (text) refresh-object 2: (bool) clear gGroupID
If [ GetValue ( Get ( ScriptParameter ) ; 2 ) ]
Set Field [ GUI::gFilterGroupID ; "" ]
End If
Set Variable [ $grouplist ;
Value: If ( IsEmpty ( GUI::gFilterGroupID ) ; List ( GUI_Groups@g1::UUID ) ; GUI::gFilterGroupID ) ]
Set Field [ GUI::gResourceList ;
Let ( [ $$reslist =
ExecuteSQL ( "SELECT UUID FROM Resources WHERE fkResourceGroup IN('" & Substitute ( $grouplist ; "¶" ; "', '" )
& "')" & If ( $$hideon ; " AND State IS NULL " ) & "ORDER BY GroupName ASC, ResnameShort ASC" ; "" ; "" ) ] ;
$$reslist ) ]
Set Field [ Resources::gDateList ; GUI::gDateList ]
Set Variable [ $calendar ;
Value: Let ( [ /******************************************** ****** conﬁguration variables **************
********************************************/ _offset = 80 //start of 1. column ; _offsettop = 40 //start of 1. row ; _linespace =
-5 //event-rect size… ]
Set Field [ GUI::HTMLCalendar ; $calendar ]
Set Field [ GUI::gEventId ; "" ]
Refresh Object [ Object Name: GetValue ( Get ( ScriptParameter ) ; 1 ) ; Repetition: 1 ]
Go to Object [ Object Name: "Calendar" ]

Berechnung $calendar 1
Let ( [
Konfigurationsvariablen hier ; _offsetleft = 80 ; _offsettop = 40 ; .... ; _script_drag ; _script_show ... u.s.w.
berechnete Variablen ; _scroll = ... ; _copy = ... ; _filname ......
; _dwidth = Round ( _width / _days ; 2 )
; _list = ExecuteSQL ( "
SELECT UUID, ResnameShort, fkResourceGroup, GroupName, State, " & If ( _slots ; "noverlap " ; "1 " ) &
"FROM Resources WHERE UUID IN('" & Substitute ( $$reslist ; "¶" ; "', '" ) & "')
ORDER BY GroupName ASC, ResnameShort ASC
" ; "|" ; "" )
; _list = resourcesAddSlotIndex ( _list ; 0 ; 1 )
; $$residx = _list
; _nrows = ValueCount ( $$reslist )
; _nslots = getResourceValue ( GetValue ( $$reslist ; _nrows ) ; 8 )
; _height = _rowheight * _nslots
; _timegrid = "<svg style='height:" & _height + _offsettop & "px;'>¶" &
setCalendarGrid ( _offsetleft ; _days ; 0 ; _dstart ; _dwidth ; _offsettop ; _height ; _ampm ; _language ; _bhstart ; _bhend ; _centerdate )
; _resgrid = setCalendarGridRows ( _list ; _rowheight ; 1 ; _linespace ; _filename ; _offsettop ; _dwidth ; _calwidth ; _script_new ;
_offsetleft ; _script_info ; _script_group ; _bhstart ; _bhend ; _newlength ; _dragstep ; "" )

Berechnung $calendar 2
; _rows = setCSSrows ( _list ; _rowheight ; _nrows ; 1 ; _offsettop )
; _colors = setCSScolors ( ExecuteSQL ( "SELECT Name, Background, Border FROM Colors" ; "|" ; "" ) ; _handwidth )
; _css = setCSS ( _rows ; _colors )
; _caldates = eventsSetSlot ( List ( GUI_Events::FieldList ) ; "" ; 1 ; ""; "" )
; _calendar = setCalendar ( _caldates ; _delimiter ; _calspace ; _offsetleft ; _dstart ; _dwidth ; _calend ; _rowheight ; _ampm ;
_showtime ; _showdate ; _minwidth ; _bhstart ; _bhend ; _showtooltip ; _handwidth )
; _script = jsDragAndDrop ( _rowheight ; _dwidth ; _filename ; _script_drag ; _script_show ; _ampm ; _dragstep ; _nslots ; _showdate ;
_dstart ; _offsetleft ; _offsettop ; _bhstart ; _bhend ; _copy )
] ;
"<!DOCTYPE html>¶<html>¶<head>¶<meta charset='utf-8'>¶
¶<script>¶" & _script & "¶</script>¶" &
_css &
"¶</head>¶¶<body>¶¶" &
_timegrid & _resgrid &
"¶<div class='calendar'>¶¶" &
_calendar &
<timeline div hier> &
"¶¶</body>¶</html>"
)

FM-Datei
fmp://fmslocal.gibi.loc/ResourceCalendarFMK
ResourceCalendarFMK - WebDirect

Tipps
• WebViewer Debug-Funktion einschalten (nur macOS): 
FM17: defaults write com.filemaker.client.pro12 WebKitDebugDeveloperExtrasEnabled -bool YES 
FM16: defaults write com.filemaker.client.advanced12 WebKitDebugDeveloperExtrasEnabled -bool YES 
FM14/15: defaults write com.filemaker.client.advanced12 WebKitDeveloperExtras -bool true 
https://blog.beezwax.net/2015/07/20/enable-debugger-for-a-filemaker-web-viewer/

• Prefs Editor von Thomas Tempelmann (macOS): 
Preferenzfiles ansehen/editieren, auch von Sandbox-Anwendungen 
http://apps.tempel.org/PrefsEditor/index.php

• SwiftDefaultApps von Gregorio Litenstein (macOS): 
Protokoll-Handler zwischen Versionen umschalten, Standartanwendung für Filetyp setzen 
https://github.com/Lord-Kamina/SwiftDefaultApps

• Protokoll-Handler Windows (letzte Zeile Pfad anpassen, Achtung Doppel-Backslash): 
Windows Registry Editor Version 5.00 
[HKEY_CLASSES_ROOTFMP] 
@="URL:FMP Protocol" 
"URL Protocol"="" 
[HKEY_CLASSES_ROOTFMPshell] 
[HKEY_CLASSES_ROOTFMPshellopen] 
[HKEY_CLASSES_ROOTFMPshellopencommand] 
@="c:Program FilesFileMakerFileMaker Pro 16 AdvancedFileMaker Pro Advanced.exe %1"

Quellen / Dank
• Longin Ziegler: FMK 2016 - Schritt für Schritt zum eigenen Kalender 
https://www.filemaker-konferenz.com/downloads.php

• Stefan Rexroth: php-Musterdatei für den Aufruf von Skripten aus dem
WebViewer in WebDirect 
https://filemaker-magazin.de/forum/beitrag/178738

• Alle die meinen Kalender in ihren Lösungen einsetzen und durch ihre
Anforderungen und Wünsche die Funktionalität vorwärtstreiben.

• Alle aktiven Forumsteilnehmer auf Filemaker-Magazin.de und
community.filemaker.com, die beitragen das FM-Fachwissen zu verbreiten.

• Meine Kalender-Musterdateien liegen hier: 
https://community.filemaker.com/docs/DOC-8518

Vielen Dank unseren Sponsoren
Danke für das Bewerten dieses Vortrages

FMK2018 Kalender in FileMaker eigenes HTML5-Framework mit Drag und Drop by Otmar Kramis

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a FMK2018 Kalender in FileMaker eigenes HTML5-Framework mit Drag und Drop by Otmar Kramis

Semelhante a FMK2018 Kalender in FileMaker eigenes HTML5-Framework mit Drag und Drop by Otmar Kramis (19)

Mais de Verein FM Konferenz

Mais de Verein FM Konferenz (20)

FMK2018 Kalender in FileMaker eigenes HTML5-Framework mit Drag und Drop by Otmar Kramis