diff --git a/doc/Entwicklerhandbuch.md b/doc/Entwicklerhandbuch.md index 508c082..8a6ab77 100644 --- a/doc/Entwicklerhandbuch.md +++ b/doc/Entwicklerhandbuch.md @@ -12,8 +12,9 @@ 1. [Mehrschichtenarchitektur](#42-mehrschichtenarchitektur) 1. [Web-Service-Architektur](#43-web-service-architektur) 1. [Entwurfsmuster](#44-entwurfsmuster) -1. [Logfunktion](#5-logfunktion) -1. [Releasemanagement](#6-releasemanagement) +1. [Benutzerführung](#5-benutzerfhrung) +1. [Logfunktion](#6-logfunktion) +1. [Releasemanagement](#7-releasemanagement) ## 1. Entwicklungsumgebung @@ -123,12 +124,30 @@ Ein oder mehrere *Beobachter* können sich bei einem *Subjekt* für ein oder meh ![Beobachtermuster am Beispiel der WebServiceClients und ViewModels des AblageTypes](Beobachter.jpg) *Abbildung 3 - Beobachtermuster am Beispiel der WebServiceClients und ViewModels des AblageTypes* + +## 5. Benutzerführung + +Das Konzept der Benutzerführung (User Experience - UX) gliedert sich in mehrere Aspekte. Zu den wichtigsten Themen gehört die Definition der Zielgruppen, die mit der Anwendung zu tun haben. An ihnen orientiert sich das im Folgenden beschriebene Benutzungskonzept. + +### 5.1. Zielgruppen + +Die Anwendung richtet sich an unterschiedliche Zielgruppen (Stakeholder), die unterschiedliche Ziele, Wünsche, Fertigkeiten und Erfahrungen haben. In diesem Kapitel werden die Zielgruppen durch [Personas](https://en.wikipedia.org/wiki/Persona_(user_experience)) wiedergegeben. Es sei darauf hingewiesen, dass die Vollständigkeit der Beschreibung und die Priorisierung einer Persona von der Entwicklung der Applikation abhängt. Weil aus praktischen und logischen Gründen Daten zuerst eingegeben werden müssen, bevor sie durchsucht oder analysiert werden können, werden Personas bevorzugt beschrieben, die überwiegend Daten eingeben. Dies kann beispielsweise im Rahmen einer Inventur geschehen. + +#### 5.1.1. Archivarin + +Die Persona *Archivarin* heißt Gabi, ist 55 Jahre alt, verheiratet und hat zwei Kinder, die bereits außer Haus sind. Sie ist schon seit zehn Jahren in der archäologischen Arbeitsgruppe des Ortes tätig und gehört zu den aktiven Mitgliedern. Gabi hat ein abgeschlossenes Studium der Völkerkunde und arbeitet für ein Museum, für das sie Schriften anferrtigt und Vorträge hält. Im Bereich von Text- und Tabellenprogrammen hat Gabi grundlegende Kenntnisse. Weil man bei Softwareprogrammen jedoch an sie viele Dinge mitdenken muss, z. B. Vorbereiten von Daten, wünscht sie sich ein System, das "mitdenkt", sie führt, sodass sie mit wenig Aufwand ihr Ziel erreicht. + +Als Archivarin empfielt Gabi Richtlinien für die Verwaltung des Archivs und sorgt für deren Einhaltung. + +### 5.1. Systembenachrichtigungen + +Das System erzeugt an mehreren Stellen der verschiedenen Anwendungsteile unterschiedliche Nachrichten. Diese richten sich an unterschiedliche Zielgruppen. -## 5. Logfunktion +## 6. Logfunktion Eine wesentliche Neuerung auf der Serverseite ist das Protokollieren des Programmablaufes und der verarbeiteten Daten mittels log4php. Dies unterstützt sowohl den Entwicklungsprozess, als auch die Fehlersuche im Produktivsystem. -## 6. Releasemanagement +## 7. Releasemanagement Jedes Jahr soll es eine Hauptversion geben. Dazwischen soll mindestens eine Zwischenversion erscheinen. Der Zweck der Zwischenversion ist, die "Must Have"-Anforderungen umzusetzen und Rückmeldungen der Anwender für die Hauptversion zu sammeln. Die nachfolgenden Zwischenversionen oder die Hauptversion setzen das Benutzer-Feedback um und ergänzen die Anwendung um Funktionen der Kategorie "Should Have" und "Nice To Have". diff --git a/src/AblageType/Form.html b/src/AblageType/Form.html index 944b469..7139daa 100644 --- a/src/AblageType/Form.html +++ b/src/AblageType/Form.html @@ -18,13 +18,15 @@ + + - - + + @@ -53,11 +55,38 @@
+ + + +\ No newline at end of file diff --git a/src/AblageType/List.html b/src/AblageType/List.html new file mode 100644 index 0000000..8538c4b --- /dev/null +++ b/src/AblageType/List.html @@ -0,0 +1,71 @@ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
\ No newline at end of file diff --git a/src/Fund/Form.html b/src/Fund/Form.html index c10b352..4a3dc2b 100644 --- a/src/Fund/Form.html +++ b/src/Fund/Form.html @@ -73,6 +73,12 @@
").append("Möchten Sie diesen Ablagetyp löschen?") + ); + $("#dialogDelete").dialog({ + height: "auto", + width: 750, + modal: true, + buttons: { + "Löschen": function () { + _viewModelFormAblageType.delete(); + + $(this).dialog("close"); + }, + "Abbrechen": function () { + $(this).dialog("close"); + } + } + }); + + $("#DialogDelete").dialog("open"); +} +//#endregion + +//#region undo +function InitButtonUndo() { + DisableButtonUndo(); + _viewModelFormAblageType.register("dataResetted", new GuiClient(DisableButtonUndo, showErrorMessages)); + _viewModelFormAblageType.register("dataResetted", new GuiClient(ResetPropertiesMessages, showErrorMessages)); + $("#buttonUndo").click(function () { + console.log("button 'undo' clicked"); + _viewModelFormAblageType.undoAllChanges(); + }); +} + +function EnableButtonUndo() { + $("#buttonUndo").removeClass("disabled"); + $("#buttonUndo").prop("disabled", false); +} + +function DisableButtonUndo() { + $("#buttonUndo").addClass("disabled"); + $("#buttonUndo").prop("disabled", true); +} + +function ResetPropertiesMessages() { + $(".fieldValue div[name=messages]").empty(); +} +//#endregion + +//#region open list +function InitButtonToList() { + EnableButtonToList(); + $("#buttonToList").click( function() { + console.log("button 'to list' clicked"); + window.open("/Munins Archiv/src/AblageType/List.html", "_self"); + }); +} + +function EnableButtonToList() { + $("#buttonToList").removeClass("disabled"); + $("#buttonToList").prop("disabled", false); +} + +function DisableButtonToList() { + $("#buttonToList").addClass("disabled"); + $("#buttonToList").prop("disabled", true); +} +//#endregion +//#endregion \ No newline at end of file diff --git a/src/js/views/AblageType/List.js b/src/js/views/AblageType/List.js new file mode 100644 index 0000000..64ce542 --- /dev/null +++ b/src/js/views/AblageType/List.js @@ -0,0 +1,253 @@ +var _viewModelListAblageType = null; + +$(document).ready(function () { + var viewModelFactory = new ViewModelFactory(); + _viewModelListAblageType = viewModelFactory.getViewModelListAblageType(); + + RegisterToViewModel(); + InitBreadcrumb(); + InitButtonNew(); + InitButtonEdit(); + InitButtonDelete(); + InitButtonReload(); + + InitGrid(); + + _viewModelListAblageType.loadAll(); +}); + +function InitBreadcrumb() +{ + $("#breadcrumb").Breadcrumb({ + PageName : "AblageTypeList" + }); +} + +function RegisterToViewModel() { + _viewModelListAblageType.register("dataChanged", new GuiClient(UpdateGridData, UpdateGridData)); + _viewModelListAblageType.register("loadAll", new GuiClient(showMessageAllLoaded, showErrorMessages)); + _viewModelListAblageType.register("create", new GuiClient(showMessageCreated, showErrorMessages)); + _viewModelListAblageType.register("delete", new GuiClient(showMessageDeleted, showErrorMessages)); + _viewModelListAblageType.register("itemSelected", new GuiClient(markSelectedItem, showErrorMessages)); + _viewModelListAblageType.register("itemSelected", new GuiClient(EnableButtonEdit, null)); + _viewModelListAblageType.register("itemSelected", new GuiClient(EnableButtonDelete, null)); + _viewModelListAblageType.register("selectionCleared", new GuiClient(clearSelectedItemHighlighting, null)); + _viewModelListAblageType.register("selectionCleared", new GuiClient(DisableButtonEdit, null)); + _viewModelListAblageType.register("selectionCleared", new GuiClient(DisableButtonDelete, null)); +} + +function clearSelectedItemHighlighting() { + $(".jsgrid-row, .jsgrid-alt-row").each(function(index){ + console.log("DEBUG: Removing css class from:") + console.log($(this)); + $(this).removeClass("selectedRow"); + }); +} + +function markSelectedItem(selectedItemArgs) { + clearSelectedItemHighlighting(); + + if (selectedItemArgs == undefined || + selectedItemArgs == null || + selectedItemArgs.Index == undefined) + { + console.log("ERROR: Setting selected item index is not set!") + return; + } + + console.log("DEBUG: Setting selected item:") + console.log(selectedItemArgs); + + var row = $(".jsgrid-row, .jsgrid-alt-row").eq(selectedItemArgs.Index) + + console.log("DEBUG: Selected row:"); + console.log(row); + + row.addClass("selectedRow"); +} + +function InitGrid() +{ + jsGrid.locale("de"); + ShowAblageTypes(); + UpdateGridData(new Array()); +} + +function UpdateGridData(ablageTypes) { + $("#gridContainer").jsGrid({ + data: JSON.parse(JSON.stringify(ablageTypes)) + }); +} + +function ShowAblageTypes() +{ + $("#gridContainer").jsGrid({ + width: "100%", + + inserting: false, + editing: false, + sorting: true, + paging: false, + autoload: false, + + fields: [ + { + name: "Bezeichnung", + type: "text", + validate: "required" + }, + { + title: "Anzahl von Ablagen", + name: "CountOfAblagen", + type: "number", + inserting: false, + editing: false + } + ], + + rowClick: function(args) { + console.log("DEBUG: Selected element:"); + console.log(args.item); + _viewModelListAblageType.selectItem(args.item); + } + }); +} + +function setIdToEditLink(id) { + $("#buttonEdit").attr("href", "/Munins Archiv/src/AblageType/Form.html?Id=" + id); +} + +function showMessageAllLoaded(elements) { + $.toast({ + heading: "Information", + text: elements.length + " Ablagetypen geladen", + icon: "info" + }); +} + +function showMessageCreated(element) { + $.toast({ + heading: "Information", + text: "Ablagetyp \"" + element.Bezeichnung + "\" erzeugt", + icon: "success" + }); +} + +function showMessageSaved(element) { + $.toast({ + heading: "Information", + text: "Ablagetyp \"" + element.Bezeichnung + "\" gespeichert", + icon: "success" + }); +} + +function showMessageDeleted(element) { + $.toast({ + heading: "Information", + text: "Ablagetyp \"" + element.Bezeichnung + "\" gelöscht", + icon: "success" + }); +} + +//#region form actions +//#region new +function InitButtonNew() { + EnableButtonNew(); + $("#buttonNew").click(function () { + console.log("button 'new' clicked"); + window.open("/Munins Archiv/src/AblageType/Form.html", "_self"); + }); +} + +function EnableButtonNew() { + $("#buttonNew").removeClass("disabled"); + $("#buttonNew").prop("disabled", false); +} + +function DisableButtonNew() { + $("#buttonNew").addClass("disabled"); + $("#buttonNew").prop("disabled", true); +} +//#endregion + +//#region edit +function InitButtonEdit() { + DisableButtonEdit(); + $("#buttonEdit").click(function () { + console.log("button 'edit' clicked"); + window.open("/Munins Archiv/src/AblageType/Form.html?Id=" + _viewModelListAblageType.getSelectedItem().Id, "_self"); + }); +} + +function EnableButtonEdit() { + $("#buttonEdit").removeClass("disabled"); + $("#buttonEdit").prop("disabled", false); +} + +function DisableButtonEdit() { + $("#buttonEdit").addClass("disabled"); + $("#buttonEdit").prop("disabled", true); +} +//#endregion + +//#region delete +function InitButtonDelete() { + DisableButtonDelete(); + $("#buttonDelete").click(ShowDialogDelete); +} + +function EnableButtonDelete() { + $("#buttonDelete").removeClass("disabled"); + $("#buttonDelete").prop("disabled", false); +} + +function DisableButtonDelete() { + $("#buttonDelete").addClass("disabled"); + $("#buttonDelete").prop("disabled", true); +} + +function ShowDialogDelete() { + $("#dialogDelete").empty(); + $("#dialogDelete").append( + $("
").append("Möchten Sie den Ablagetyp \"" + _viewModelListAblageType.getSelectedItem().Bezeichnung + "\" löschen?") + ); + $("#dialogDelete").dialog({ + height: "auto", + width: 750, + modal: true, + buttons: { + "Löschen": function () { + _viewModelListAblageType.delete(_viewModelListAblageType.getSelectedItem()); + + $(this).dialog("close"); + }, + "Abbrechen": function () { + $(this).dialog("close"); + } + } + }); + + $("#DialogDelete").dialog("open"); +} +//#endregion + +//#region reload +function InitButtonReload() { + EnableButtonReload(); + $("#buttonReload").click(function () { + console.log("button 'reload' clicked"); + _viewModelListAblageType.loadAll(); + }); +} + +function EnableButtonReload() { + $("#buttonReload").removeClass("disabled"); + $("#buttonReload").prop("disabled", false); +} + +function DisableButtonReload() { + $("#buttonReload").addClass("disabled"); + $("#buttonReload").prop("disabled", true); +} +//#endregion +//#endregion \ No newline at end of file diff --git a/src/js/views/Fund/Form.js b/src/js/views/Fund/Form.js index 46d773b..4016ca8 100644 --- a/src/js/views/Fund/Form.js +++ b/src/js/views/Fund/Form.js @@ -148,7 +148,7 @@ function EnableButtonUndo() { } function DisableButtonUndo() { - $("#buttonUndo").removeClass("disabled"); + $("#buttonUndo").addClass("disabled"); $("#buttonUndo").prop("disabled", true); } diff --git a/src/js/views/FundAttributType/Form.js b/src/js/views/FundAttributType/Form.js index e34ae9f..aec2026 100644 --- a/src/js/views/FundAttributType/Form.js +++ b/src/js/views/FundAttributType/Form.js @@ -1,94 +1,60 @@ -var _viewModelListFundAttributType = null; +var _viewModelFormFundAttributType = null; $(document).ready(function () { var viewModelFactory = new ViewModelFactory(); - _viewModelListFundAttributType = viewModelFactory.getViewModelListFundAttributType(); + _viewModelFormFundAttributType = viewModelFactory.getViewModelFormFundAttributType(); - RegisterToViewModel(); + InitStatusChanged(); + InitDataChanged(); InitBreadcrumb(); - InitGrid(); + InitButtonNew(); + InitButtonSave(); + InitButtonDelete(); + InitButtonUndo(); + InitButtonToList(); - _viewModelListFundAttributType.loadAll(); -}); + InitFieldId(); + InitFieldBezeichnung(); + InitFieldCountOfFundAttribute(); -function InitBreadcrumb() -{ - $("#breadcrumb").Breadcrumb({ - PageName : "FundAttributTypeManagement" - }); -} + if (getUrlParameterValue("Id")) { + _viewModelFormFundAttributType.load(getUrlParameterValue("Id")); + } + else { + _viewModelFormFundAttributType.updateAllListeners(); + } +}); -function RegisterToViewModel() { - _viewModelListFundAttributType.register("dataChanged", new GuiClient(UpdateGridData, UpdateGridData)); - _viewModelListFundAttributType.register("loadAll", new GuiClient(showMessageAllLoaded, showErrorMessages)); - _viewModelListFundAttributType.register("create", new GuiClient(showMessageCreated, showErrorMessages)); - _viewModelListFundAttributType.register("save", new GuiClient(showMessageSaved, showErrorMessages)); - _viewModelListFundAttributType.register("delete", new GuiClient(showMessageDeleted, showErrorMessages)); +function InitStatusChanged() { + _viewModelFormFundAttributType.register("load", new GuiClient(showMessageLoaded, showErrorMessages)); + _viewModelFormFundAttributType.register("create", new GuiClient(showMessageCreated, showErrorMessages)); + _viewModelFormFundAttributType.register("save", new GuiClient(showMessageSaved, showErrorMessages)); + _viewModelFormFundAttributType.register("delete", new GuiClient(showMessageDeleted, showErrorMessages)); } -function InitGrid() -{ - jsGrid.locale("de"); - ShowFundAttributTypes(); - UpdateGridData(new Array()); +function InitDataChanged() { + _viewModelFormFundAttributType.register("dataChanged", new GuiClient(EnableButtonUndo, showErrorMessages)); } -function UpdateGridData(ortTypes) { - $("#gridContainer").jsGrid({ - data: JSON.parse(JSON.stringify(ortTypes)) - }); -} - -function ShowFundAttributTypes() +function InitBreadcrumb() { - $("#gridContainer").jsGrid({ - width: "100%", - - inserting: true, - editing: true, - sorting: false, - paging: false, - autoload: false, - - controller: { - insertItem: function(item) { - _viewModelListFundAttributType.create(item); - }, - insertModeButtonTooltip: "Neu", - updateItem: function(item) { - _viewModelListFundAttributType.save(item); - }, - editButtonTooltip: "Bearbeiten", - deleteItem: function(item) { - _viewModelListFundAttributType.delete(item); - }, - deleteButtonTooltip: "Löschen" - }, - - fields: [ - { - name: "Bezeichnung", - type: "text", - validate: "required" - }, - { - title: "Anzahl von Fundattributen", - name: "CountOfFundAttributen", - type: "number", - inserting: false, - editing: false - }, - { - type: "control" - } - ] - }); + if (getFormMode() == "create") { + $("#breadcrumb").Breadcrumb({ + PageName: "FundAttributTypeFormNew" + }); + } + else if (getFormMode() == "edit") { + $("#breadcrumb").Breadcrumb({ + PageName: "FundAttributTypeFormEdit" + }); + } } -function showMessageAllLoaded(elements) { +//#region messages +function showMessageLoaded(element) { $.toast({ heading: "Information", - text: elements.length + " Fundattributtypen geladen", + text: "Fundattributtyp \"" + element.Bezeichnung + "\" geladen", icon: "info" }); } @@ -115,4 +81,177 @@ function showMessageDeleted(element) { text: "Fundattributtyp \"" + element.Bezeichnung + "\" gelöscht", icon: "success" }); -} \ No newline at end of file +} +//#endregion + +//#region form fields + +//#region Id +function InitFieldId() { + _viewModelFormFundAttributType.register("id", new GuiClient(setId, showErrorMessages)); +} + +function setId(id) { + if (id == null) { + document.title = "Fundattributtyp"; + DisableButtonDelete(); + } + else { + document.title = "Fundattributtyp: (" + id + ")"; + EnableButtonDelete(); + } +} +//#endregion + +//#region Bezeichnung +function InitFieldBezeichnung() { + _viewModelFormFundAttributType.register("bezeichnung", new GuiClient(setBezeichnung, showMessagesBezeichnung)); + $("#textboxBezeichnung").change(function () { + _viewModelFormFundAttributType.setBezeichnung($("#textboxBezeichnung").val()) + }); +} + +function setBezeichnung(bezeichnung) { + console.log("setting value of 'Bezeichnung' to " + bezeichnung); + $("#textboxBezeichnung").val(bezeichnung); +} + +function showMessagesBezeichnung(messages) { + $("#divBezeichnung .fieldValue div[name=messages]").text(messages); +} +//#endregion + +//#region Anzahl von Fundattributen +function InitFieldCountOfFundAttribute() { + _viewModelFormFundAttributType.register("countOfFundAttributen", new GuiClient(setCountOfFundAttributen, null)); +} + +function setCountOfFundAttributen(countOfFundAttributen) { + console.log("setting value of 'count of FundAttribute' to " + countOfFundAttributen); + $("#labelCountOfFundAttributen").text(countOfFundAttributen); +} +//#endregion +//#endregion + +//#region form actions +//#region new +function InitButtonNew() { + EnableButtonNew(); + $("#buttonNew").click(openFormNewElement); +} + +function EnableButtonNew() { + $("#buttonNew").removeClass("disabled"); + $("#buttonNew").prop("disabled", false); +} + +function DisableButtonNew() { + $("#buttonNew").addClass("disabled"); + $("#buttonNew").prop("disabled", true); +} +//#endregion + +//#region save +function InitButtonSave() { + EnableButtonSave(); + $("#buttonSave").click(function () { _viewModelFormFundAttributType.save(); }); +} + +function EnableButtonSave() { + $("#buttonSave").removeClass("disabled"); + $("#buttonSave").prop("disabled", false); +} + +function DisableButtonSave() { + $("#buttonSave").addClass("disabled"); + $("#buttonSave").prop("disabled", true); +} +//#endregion + +//#region delete +function InitButtonDelete() { + DisableButtonDelete(); + $("#buttonDelete").click(ShowDialogDelete); +} + +function EnableButtonDelete() { + $("#buttonDelete").removeClass("disabled"); + $("#buttonDelete").prop("disabled", false); +} + +function DisableButtonDelete() { + $("#buttonDelete").addClass("disabled"); + $("#buttonDelete").prop("disabled", true); +} + +function ShowDialogDelete() { + $("#dialogDelete").empty(); + $("#dialogDelete").append( + $("
").append("Möchten Sie diesen Fundattributtyp löschen?") + ); + $("#dialogDelete").dialog({ + height: "auto", + width: 750, + modal: true, + buttons: { + "Löschen": function () { + _viewModelFormFundAttributType.delete(); + + $(this).dialog("close"); + }, + "Abbrechen": function () { + $(this).dialog("close"); + } + } + }); + + $("#DialogDelete").dialog("open"); +} +//#endregion + +//#region undo +function InitButtonUndo() { + DisableButtonUndo(); + _viewModelFormFundAttributType.register("dataResetted", new GuiClient(DisableButtonUndo, showErrorMessages)); + _viewModelFormFundAttributType.register("dataResetted", new GuiClient(ResetPropertiesMessages, showErrorMessages)); + $("#buttonUndo").click(function () { + console.log("button 'undo' clicked"); + _viewModelFormFundAttributType.undoAllChanges(); + }); +} + +function EnableButtonUndo() { + $("#buttonUndo").removeClass("disabled"); + $("#buttonUndo").prop("disabled", false); +} + +function DisableButtonUndo() { + $("#buttonUndo").addClass("disabled"); + $("#buttonUndo").prop("disabled", true); +} + +function ResetPropertiesMessages() { + $(".fieldValue div[name=messages]").empty(); +} +//#endregion + +//#region open list +function InitButtonToList() { + EnableButtonToList(); + $("#buttonToList").click( function() { + console.log("button 'to list' clicked"); + window.open("/Munins Archiv/src/FundAttributType/List.html", "_self"); + }); +} + +function EnableButtonToList() { + $("#buttonToList").removeClass("disabled"); + $("#buttonToList").prop("disabled", false); +} + +function DisableButtonToList() { + $("#buttonToList").addClass("disabled"); + $("#buttonToList").prop("disabled", true); +} +//#endregion +//#endregion \ No newline at end of file diff --git a/src/js/views/FundAttributType/List.js b/src/js/views/FundAttributType/List.js new file mode 100644 index 0000000..2e3ed5d --- /dev/null +++ b/src/js/views/FundAttributType/List.js @@ -0,0 +1,253 @@ +var _viewModelListFundAttributType = null; + +$(document).ready(function () { + var viewModelFactory = new ViewModelFactory(); + _viewModelListFundAttributType = viewModelFactory.getViewModelListFundAttributType(); + + RegisterToViewModel(); + InitBreadcrumb(); + InitButtonNew(); + InitButtonEdit(); + InitButtonDelete(); + InitButtonReload(); + + InitGrid(); + + _viewModelListFundAttributType.loadAll(); +}); + +function InitBreadcrumb() +{ + $("#breadcrumb").Breadcrumb({ + PageName : "FundAttributTypeList" + }); +} + +function RegisterToViewModel() { + _viewModelListFundAttributType.register("dataChanged", new GuiClient(UpdateGridData, UpdateGridData)); + _viewModelListFundAttributType.register("loadAll", new GuiClient(showMessageAllLoaded, showErrorMessages)); + _viewModelListFundAttributType.register("create", new GuiClient(showMessageCreated, showErrorMessages)); + _viewModelListFundAttributType.register("delete", new GuiClient(showMessageDeleted, showErrorMessages)); + _viewModelListFundAttributType.register("itemSelected", new GuiClient(markSelectedItem, showErrorMessages)); + _viewModelListFundAttributType.register("itemSelected", new GuiClient(EnableButtonEdit, null)); + _viewModelListFundAttributType.register("itemSelected", new GuiClient(EnableButtonDelete, null)); + _viewModelListFundAttributType.register("selectionCleared", new GuiClient(clearSelectedItemHighlighting, null)); + _viewModelListFundAttributType.register("selectionCleared", new GuiClient(DisableButtonEdit, null)); + _viewModelListFundAttributType.register("selectionCleared", new GuiClient(DisableButtonDelete, null)); +} + +function clearSelectedItemHighlighting() { + $(".jsgrid-row, .jsgrid-alt-row").each(function(index){ + console.log("DEBUG: Removing css class from:") + console.log($(this)); + $(this).removeClass("selectedRow"); + }); +} + +function markSelectedItem(selectedItemArgs) { + clearSelectedItemHighlighting(); + + if (selectedItemArgs == undefined || + selectedItemArgs == null || + selectedItemArgs.Index == undefined) + { + console.log("ERROR: Setting selected item index is not set!") + return; + } + + console.log("DEBUG: Setting selected item:") + console.log(selectedItemArgs); + + var row = $(".jsgrid-row, .jsgrid-alt-row").eq(selectedItemArgs.Index) + + console.log("DEBUG: Selected row:"); + console.log(row); + + row.addClass("selectedRow"); +} + +function InitGrid() +{ + jsGrid.locale("de"); + ShowFundAttributTypes(); + UpdateGridData(new Array()); +} + +function UpdateGridData(fundAttributTypes) { + $("#gridContainer").jsGrid({ + data: JSON.parse(JSON.stringify(fundAttributTypes)) + }); +} + +function ShowFundAttributTypes() +{ + $("#gridContainer").jsGrid({ + width: "100%", + + inserting: false, + editing: false, + sorting: true, + paging: false, + autoload: false, + + fields: [ + { + name: "Bezeichnung", + type: "text", + validate: "required" + }, + { + title: "Anzahl von Fundattributen", + name: "CountOfFundAttributen", + type: "number", + inserting: false, + editing: false + } + ], + + rowClick: function(args) { + console.log("DEBUG: Selected element:"); + console.log(args.item); + _viewModelListFundAttributType.selectItem(args.item); + } + }); +} + +function setIdToEditLink(id) { + $("#buttonEdit").attr("href", "/Munins Archiv/src/FundAttributType/Form.html?Id=" + id); +} + +function showMessageAllLoaded(elements) { + $.toast({ + heading: "Information", + text: elements.length + " Fundattributtypen geladen", + icon: "info" + }); +} + +function showMessageCreated(element) { + $.toast({ + heading: "Information", + text: "Fundattributtyp \"" + element.Bezeichnung + "\" erzeugt", + icon: "success" + }); +} + +function showMessageSaved(element) { + $.toast({ + heading: "Information", + text: "Fundattributtyp \"" + element.Bezeichnung + "\" gespeichert", + icon: "success" + }); +} + +function showMessageDeleted(element) { + $.toast({ + heading: "Information", + text: "Fundattributtyp \"" + element.Bezeichnung + "\" gelöscht", + icon: "success" + }); +} + +//#region form actions +//#region new +function InitButtonNew() { + EnableButtonNew(); + $("#buttonNew").click(function () { + console.log("button 'new' clicked"); + window.open("/Munins Archiv/src/FundAttributType/Form.html", "_self"); + }); +} + +function EnableButtonNew() { + $("#buttonNew").removeClass("disabled"); + $("#buttonNew").prop("disabled", false); +} + +function DisableButtonNew() { + $("#buttonNew").addClass("disabled"); + $("#buttonNew").prop("disabled", true); +} +//#endregion + +//#region edit +function InitButtonEdit() { + DisableButtonEdit(); + $("#buttonEdit").click(function () { + console.log("button 'edit' clicked"); + window.open("/Munins Archiv/src/FundAttributType/Form.html?Id=" + _viewModelListFundAttributType.getSelectedItem().Id, "_self"); + }); +} + +function EnableButtonEdit() { + $("#buttonEdit").removeClass("disabled"); + $("#buttonEdit").prop("disabled", false); +} + +function DisableButtonEdit() { + $("#buttonEdit").addClass("disabled"); + $("#buttonEdit").prop("disabled", true); +} +//#endregion + +//#region delete +function InitButtonDelete() { + DisableButtonDelete(); + $("#buttonDelete").click(ShowDialogDelete); +} + +function EnableButtonDelete() { + $("#buttonDelete").removeClass("disabled"); + $("#buttonDelete").prop("disabled", false); +} + +function DisableButtonDelete() { + $("#buttonDelete").addClass("disabled"); + $("#buttonDelete").prop("disabled", true); +} + +function ShowDialogDelete() { + $("#dialogDelete").empty(); + $("#dialogDelete").append( + $("
").append("Möchten Sie den FundAttributtyp \"" + _viewModelListFundAttributType.getSelectedItem().Bezeichnung + "\" löschen?") + ); + $("#dialogDelete").dialog({ + height: "auto", + width: 750, + modal: true, + buttons: { + "Löschen": function () { + _viewModelListFundAttributType.delete(_viewModelListFundAttributType.getSelectedItem()); + + $(this).dialog("close"); + }, + "Abbrechen": function () { + $(this).dialog("close"); + } + } + }); + + $("#DialogDelete").dialog("open"); +} +//#endregion + +//#region reload +function InitButtonReload() { + EnableButtonReload(); + $("#buttonReload").click(function () { + console.log("button 'reload' clicked"); + _viewModelListFundAttributType.loadAll(); + }); +} + +function EnableButtonReload() { + $("#buttonReload").removeClass("disabled"); + $("#buttonReload").prop("disabled", false); +} + +function DisableButtonReload() { + $("#buttonReload").addClass("disabled"); + $("#buttonReload").prop("disabled", true); +} +//#endregion +//#endregion \ No newline at end of file diff --git a/src/js/views/OrtType/Form.js b/src/js/views/OrtType/Form.js index 0e8dbeb..211cb4c 100644 --- a/src/js/views/OrtType/Form.js +++ b/src/js/views/OrtType/Form.js @@ -1,94 +1,60 @@ -var _viewModelListOrtType = null; +var _viewModelFormOrtType = null; $(document).ready(function () { var viewModelFactory = new ViewModelFactory(); - _viewModelListOrtType = viewModelFactory.getViewModelListOrtType(); + _viewModelFormOrtType = viewModelFactory.getViewModelFormOrtType(); - RegisterToViewModel(); + InitStatusChanged(); + InitDataChanged(); InitBreadcrumb(); - InitGrid(); + InitButtonNew(); + InitButtonSave(); + InitButtonDelete(); + InitButtonUndo(); + InitButtonToList(); - _viewModelListOrtType.loadAll(); -}); + InitFieldId(); + InitFieldBezeichnung(); + InitFieldCountOfOrten(); -function InitBreadcrumb() -{ - $("#breadcrumb").Breadcrumb({ - PageName : "OrtTypeManagement" - }); -} + if (getUrlParameterValue("Id")) { + _viewModelFormOrtType.load(getUrlParameterValue("Id")); + } + else { + _viewModelFormOrtType.updateAllListeners(); + } +}); -function RegisterToViewModel() { - _viewModelListOrtType.register("dataChanged", new GuiClient(UpdateGridData, UpdateGridData)); - _viewModelListOrtType.register("loadAll", new GuiClient(showMessageAllLoaded, showErrorMessages)); - _viewModelListOrtType.register("create", new GuiClient(showMessageCreated, showErrorMessages)); - _viewModelListOrtType.register("save", new GuiClient(showMessageSaved, showErrorMessages)); - _viewModelListOrtType.register("delete", new GuiClient(showMessageDeleted, showErrorMessages)); +function InitStatusChanged() { + _viewModelFormOrtType.register("load", new GuiClient(showMessageLoaded, showErrorMessages)); + _viewModelFormOrtType.register("create", new GuiClient(showMessageCreated, showErrorMessages)); + _viewModelFormOrtType.register("save", new GuiClient(showMessageSaved, showErrorMessages)); + _viewModelFormOrtType.register("delete", new GuiClient(showMessageDeleted, showErrorMessages)); } -function InitGrid() -{ - jsGrid.locale("de"); - ShowOrtTypes(); - UpdateGridData(new Array()); +function InitDataChanged() { + _viewModelFormOrtType.register("dataChanged", new GuiClient(EnableButtonUndo, showErrorMessages)); } -function UpdateGridData(ortTypes) { - $("#gridContainer").jsGrid({ - data: JSON.parse(JSON.stringify(ortTypes)) - }); -} - -function ShowOrtTypes() +function InitBreadcrumb() { - $("#gridContainer").jsGrid({ - width: "100%", - - inserting: true, - editing: true, - sorting: false, - paging: false, - autoload: false, - - controller: { - insertItem: function(item) { - _viewModelListOrtType.create(item); - }, - insertModeButtonTooltip: "Neu", - updateItem: function(item) { - _viewModelListOrtType.save(item); - }, - editButtonTooltip: "Bearbeiten", - deleteItem: function(item) { - _viewModelListOrtType.delete(item); - }, - deleteButtonTooltip: "Löschen" - }, - - fields: [ - { - name: "Bezeichnung", - type: "text", - validate: "required" - }, - { - title: "Anzahl von Orten", - name: "CountOfOrten", - type: "number", - inserting: false, - editing: false - }, - { - type: "control" - } - ] - }); + if (getFormMode() == "create") { + $("#breadcrumb").Breadcrumb({ + PageName: "OrtTypeFormNew" + }); + } + else if (getFormMode() == "edit") { + $("#breadcrumb").Breadcrumb({ + PageName: "OrtTypeFormEdit" + }); + } } -function showMessageAllLoaded(elements) { +//#region messages +function showMessageLoaded(element) { $.toast({ heading: "Information", - text: elements.length + " Ortstypen geladen", + text: "Ortstyp \"" + element.Bezeichnung + "\" geladen", icon: "info" }); } @@ -115,4 +81,177 @@ function showMessageDeleted(element) { text: "Ortstyp \"" + element.Bezeichnung + "\" gelöscht", icon: "success" }); -} \ No newline at end of file +} +//#endregion + +//#region form fields + +//#region Id +function InitFieldId() { + _viewModelFormOrtType.register("id", new GuiClient(setId, showErrorMessages)); +} + +function setId(id) { + if (id == null) { + document.title = "Ortstyp"; + DisableButtonDelete(); + } + else { + document.title = "Ortstyp: (" + id + ")"; + EnableButtonDelete(); + } +} +//#endregion + +//#region Bezeichnung +function InitFieldBezeichnung() { + _viewModelFormOrtType.register("bezeichnung", new GuiClient(setBezeichnung, showMessagesBezeichnung)); + $("#textboxBezeichnung").change(function () { + _viewModelFormOrtType.setBezeichnung($("#textboxBezeichnung").val()) + }); +} + +function setBezeichnung(bezeichnung) { + console.log("setting value of 'Bezeichnung' to " + bezeichnung); + $("#textboxBezeichnung").val(bezeichnung); +} + +function showMessagesBezeichnung(messages) { + $("#divBezeichnung .fieldValue div[name=messages]").text(messages); +} +//#endregion + +//#region Anzahl von Orten +function InitFieldCountOfOrten() { + _viewModelFormOrtType.register("countOfOrten", new GuiClient(setCountOfOrten, null)); +} + +function setCountOfOrten(countOfOrten) { + console.log("setting value of 'count of Orten' to " + countOfOrten); + $("#labelCountOfOrten").text(countOfOrten); +} +//#endregion +//#endregion + +//#region form actions +//#region new +function InitButtonNew() { + EnableButtonNew(); + $("#buttonNew").click(openFormNewElement); +} + +function EnableButtonNew() { + $("#buttonNew").removeClass("disabled"); + $("#buttonNew").prop("disabled", false); +} + +function DisableButtonNew() { + $("#buttonNew").addClass("disabled"); + $("#buttonNew").prop("disabled", true); +} +//#endregion + +//#region save +function InitButtonSave() { + EnableButtonSave(); + $("#buttonSave").click(function () { _viewModelFormOrtType.save(); }); +} + +function EnableButtonSave() { + $("#buttonSave").removeClass("disabled"); + $("#buttonSave").prop("disabled", false); +} + +function DisableButtonSave() { + $("#buttonSave").addClass("disabled"); + $("#buttonSave").prop("disabled", true); +} +//#endregion + +//#region delete +function InitButtonDelete() { + DisableButtonDelete(); + $("#buttonDelete").click(ShowDialogDelete); +} + +function EnableButtonDelete() { + $("#buttonDelete").removeClass("disabled"); + $("#buttonDelete").prop("disabled", false); +} + +function DisableButtonDelete() { + $("#buttonDelete").addClass("disabled"); + $("#buttonDelete").prop("disabled", true); +} + +function ShowDialogDelete() { + $("#dialogDelete").empty(); + $("#dialogDelete").append( + $("
").append("Möchten Sie diesen Ortstyp löschen?") + ); + $("#dialogDelete").dialog({ + height: "auto", + width: 750, + modal: true, + buttons: { + "Löschen": function () { + _viewModelFormOrtType.delete(); + + $(this).dialog("close"); + }, + "Abbrechen": function () { + $(this).dialog("close"); + } + } + }); + + $("#DialogDelete").dialog("open"); +} +//#endregion + +//#region undo +function InitButtonUndo() { + DisableButtonUndo(); + _viewModelFormOrtType.register("dataResetted", new GuiClient(DisableButtonUndo, showErrorMessages)); + _viewModelFormOrtType.register("dataResetted", new GuiClient(ResetPropertiesMessages, showErrorMessages)); + $("#buttonUndo").click(function () { + console.log("button 'undo' clicked"); + _viewModelFormOrtType.undoAllChanges(); + }); +} + +function EnableButtonUndo() { + $("#buttonUndo").removeClass("disabled"); + $("#buttonUndo").prop("disabled", false); +} + +function DisableButtonUndo() { + $("#buttonUndo").addClass("disabled"); + $("#buttonUndo").prop("disabled", true); +} + +function ResetPropertiesMessages() { + $(".fieldValue div[name=messages]").empty(); +} +//#endregion + +//#region open list +function InitButtonToList() { + EnableButtonToList(); + $("#buttonToList").click( function() { + console.log("button 'to list' clicked"); + window.open("/Munins Archiv/src/OrtType/List.html", "_self"); + }); +} + +function EnableButtonToList() { + $("#buttonToList").removeClass("disabled"); + $("#buttonToList").prop("disabled", false); +} + +function DisableButtonToList() { + $("#buttonToList").addClass("disabled"); + $("#buttonToList").prop("disabled", true); +} +//#endregion +//#endregion \ No newline at end of file diff --git a/src/js/views/OrtType/List.js b/src/js/views/OrtType/List.js new file mode 100644 index 0000000..e5abec5 --- /dev/null +++ b/src/js/views/OrtType/List.js @@ -0,0 +1,253 @@ +var _viewModelListOrtType = null; + +$(document).ready(function () { + var viewModelFactory = new ViewModelFactory(); + _viewModelListOrtType = viewModelFactory.getViewModelListOrtType(); + + RegisterToViewModel(); + InitBreadcrumb(); + InitButtonNew(); + InitButtonEdit(); + InitButtonDelete(); + InitButtonReload(); + + InitGrid(); + + _viewModelListOrtType.loadAll(); +}); + +function InitBreadcrumb() +{ + $("#breadcrumb").Breadcrumb({ + PageName : "OrtTypeList" + }); +} + +function RegisterToViewModel() { + _viewModelListOrtType.register("dataChanged", new GuiClient(UpdateGridData, UpdateGridData)); + _viewModelListOrtType.register("loadAll", new GuiClient(showMessageAllLoaded, showErrorMessages)); + _viewModelListOrtType.register("create", new GuiClient(showMessageCreated, showErrorMessages)); + _viewModelListOrtType.register("delete", new GuiClient(showMessageDeleted, showErrorMessages)); + _viewModelListOrtType.register("itemSelected", new GuiClient(markSelectedItem, showErrorMessages)); + _viewModelListOrtType.register("itemSelected", new GuiClient(EnableButtonEdit, null)); + _viewModelListOrtType.register("itemSelected", new GuiClient(EnableButtonDelete, null)); + _viewModelListOrtType.register("selectionCleared", new GuiClient(clearSelectedItemHighlighting, null)); + _viewModelListOrtType.register("selectionCleared", new GuiClient(DisableButtonEdit, null)); + _viewModelListOrtType.register("selectionCleared", new GuiClient(DisableButtonDelete, null)); +} + +function clearSelectedItemHighlighting() { + $(".jsgrid-row, .jsgrid-alt-row").each(function(index){ + console.log("DEBUG: Removing css class from:") + console.log($(this)); + $(this).removeClass("selectedRow"); + }); +} + +function markSelectedItem(selectedItemArgs) { + clearSelectedItemHighlighting(); + + if (selectedItemArgs == undefined || + selectedItemArgs == null || + selectedItemArgs.Index == undefined) + { + console.log("ERROR: Setting selected item index is not set!") + return; + } + + console.log("DEBUG: Setting selected item:") + console.log(selectedItemArgs); + + var row = $(".jsgrid-row, .jsgrid-alt-row").eq(selectedItemArgs.Index) + + console.log("DEBUG: Selected row:"); + console.log(row); + + row.addClass("selectedRow"); +} + +function InitGrid() +{ + jsGrid.locale("de"); + ShowOrtTypes(); + UpdateGridData(new Array()); +} + +function UpdateGridData(ortTypes) { + $("#gridContainer").jsGrid({ + data: JSON.parse(JSON.stringify(ortTypes)) + }); +} + +function ShowOrtTypes() +{ + $("#gridContainer").jsGrid({ + width: "100%", + + inserting: false, + editing: false, + sorting: true, + paging: false, + autoload: false, + + fields: [ + { + name: "Bezeichnung", + type: "text", + validate: "required" + }, + { + title: "Anzahl von Orten", + name: "CountOfOrten", + type: "number", + inserting: false, + editing: false + } + ], + + rowClick: function(args) { + console.log("DEBUG: Selected element:"); + console.log(args.item); + _viewModelListOrtType.selectItem(args.item); + } + }); +} + +function setIdToEditLink(id) { + $("#buttonEdit").attr("href", "/Munins Archiv/src/OrtType/Form.html?Id=" + id); +} + +function showMessageAllLoaded(elements) { + $.toast({ + heading: "Information", + text: elements.length + " Ortstypen geladen", + icon: "info" + }); +} + +function showMessageCreated(element) { + $.toast({ + heading: "Information", + text: "Ortstyp \"" + element.Bezeichnung + "\" erzeugt", + icon: "success" + }); +} + +function showMessageSaved(element) { + $.toast({ + heading: "Information", + text: "Ortstyp \"" + element.Bezeichnung + "\" gespeichert", + icon: "success" + }); +} + +function showMessageDeleted(element) { + $.toast({ + heading: "Information", + text: "Ortstyp \"" + element.Bezeichnung + "\" gelöscht", + icon: "success" + }); +} + +//#region form actions +//#region new +function InitButtonNew() { + EnableButtonNew(); + $("#buttonNew").click(function () { + console.log("button 'new' clicked"); + window.open("/Munins Archiv/src/OrtType/Form.html", "_self"); + }); +} + +function EnableButtonNew() { + $("#buttonNew").removeClass("disabled"); + $("#buttonNew").prop("disabled", false); +} + +function DisableButtonNew() { + $("#buttonNew").addClass("disabled"); + $("#buttonNew").prop("disabled", true); +} +//#endregion + +//#region edit +function InitButtonEdit() { + DisableButtonEdit(); + $("#buttonEdit").click(function () { + console.log("button 'edit' clicked"); + window.open("/Munins Archiv/src/OrtType/Form.html?Id=" + _viewModelListOrtType.getSelectedItem().Id, "_self"); + }); +} + +function EnableButtonEdit() { + $("#buttonEdit").removeClass("disabled"); + $("#buttonEdit").prop("disabled", false); +} + +function DisableButtonEdit() { + $("#buttonEdit").addClass("disabled"); + $("#buttonEdit").prop("disabled", true); +} +//#endregion + +//#region delete +function InitButtonDelete() { + DisableButtonDelete(); + $("#buttonDelete").click(ShowDialogDelete); +} + +function EnableButtonDelete() { + $("#buttonDelete").removeClass("disabled"); + $("#buttonDelete").prop("disabled", false); +} + +function DisableButtonDelete() { + $("#buttonDelete").addClass("disabled"); + $("#buttonDelete").prop("disabled", true); +} + +function ShowDialogDelete() { + $("#dialogDelete").empty(); + $("#dialogDelete").append( + $("
").append("Möchten Sie den Orttyp \"" + _viewModelListOrtType.getSelectedItem().Bezeichnung + "\" löschen?") + ); + $("#dialogDelete").dialog({ + height: "auto", + width: 750, + modal: true, + buttons: { + "Löschen": function () { + _viewModelListOrtType.delete(_viewModelListOrtType.getSelectedItem()); + + $(this).dialog("close"); + }, + "Abbrechen": function () { + $(this).dialog("close"); + } + } + }); + + $("#DialogDelete").dialog("open"); +} +//#endregion + +//#region reload +function InitButtonReload() { + EnableButtonReload(); + $("#buttonReload").click(function () { + console.log("button 'reload' clicked"); + _viewModelListOrtType.loadAll(); + }); +} + +function EnableButtonReload() { + $("#buttonReload").removeClass("disabled"); + $("#buttonReload").prop("disabled", false); +} + +function DisableButtonReload() { + $("#buttonReload").addClass("disabled"); + $("#buttonReload").prop("disabled", true); +} +//#endregion +//#endregion \ No newline at end of file