Hier werden die Designentscheidungen beschrieben, die den Großteil von der Applikation oder die ganze Applikation betreffen.

Auf allen Seiten, außer bei Home-Seite befindet sich oben rechts Breadcrumbs.

Ebenso einigten wir uns darauf, dass Methoden-, Solverübersicht sowie Downloadcenter in einer tabellarischen Form dargestellt wird. Um diese tabellarische Form zu realisieren, gibt es viele verschiedene Möglichkeiten. Die Folgenden haben wir der Reihe nach ausprobiert:

1. HTML: Hier wurde ein <table> in HTML-Code erzeugt und die Daten statisch eingetragen.
2. HTML + JavaScript: Hier wurden die Daten dann ausgelagert in einem JavaScript-Array und in ein <v-simple-table> eingefügt.
3. V-DataTable: V-DataTable bietet viele zusätzliche Funktionen (wie z. B. Gruppierung von Daten).
   Da wir uns schlussendlich auf den V-DataTable geeinigt hatten, fällten wir weitere Entscheidungen:

• Gruppierung wird verwendet
  Quellen:
  https://www.youtube.com/watch?v=lv-KHdoeSoI
  https://www.youtube.com/watch?v=6FsM3ZhfQwU
  https://vuetifyjs.com/en/components/data-tables/#grouping
  
• Table-Footer wird immer ausgeblendet
• In der 1. Spalte befindet sich immer Name der Methode bzw. Solver. Ein Klick auf 1. Spalte leitet den User weiter zur detaillierten Ansicht der Methode bzw. des Solvers.
• Die Icons für die letzten Spalten wurden von der Seite https://materialdesignicons.com/ ausgewählt, da diese Seite jede Menge Icons anbietet und auch mithilfe von Suchbegriffen die gewünschten Icons schnell gefunden werden können.
• Außerdem wird eine Suchleiste bei der Tabelle zur Verfügung gestellt, in der man den Suchbegriff eingeben kann und die Zeile, die den Suchbegriff enthält, angezeigt wird.
  • Mögliche Suchbegriffe je View:
    • Bei Methodenübersicht kann nach Methodennamen oder nach Kategorie (z.B. Bestellmengenplanung) gesucht werden
    • Bei Solverübersicht kann nach Solvernamen oder nach Kategorie (z.B. Interaktive Solver) gesucht werden
    • Bei Downloadcenter kann nach Methoden- und Solvernamen gesucht werden. Die Suche nach Kategorie ist hier nicht möglich, da wir der Meinung sind, dass die Suche nach Methoden-und Solvernamen ausreichend ist.
  • Quellen:
    https://vuetifyjs.com/en/components/data-tables/#custom-filter
    https://youtu.be/lv-KHdoeSoI?t=2488

Eine weitere Alternative für die tabellarische Ansicht, die wir nicht verwendeten, wäre IndexDB oder Localbase. Dabei werden die Daten in eine Datenbank ausgelagert und dynamisch in den Tabellen geladen werden. Weiterführende Quellen:

• Für IndexDB: E-Book Titel: Building Progressive Web Applications with Vue.js, Autor: Carlos Rojas, Erscheidungsjahr: 2020, ISBN: 978-1-4842-5333-5 (steht als Download in der HTWG Bib zu Verfügung)
• Für Localbase: https://www.youtube.com/watch?v=KJnupY2HPCg
  Da wir so wenig Schnittstellen wie möglich haben wollten, entschlossen wir uns gegen diese Alternativen (IndexDB und Localbase).

Wireframe für Home sieht wie folgt aus: Die Home bzw. Willkommensseite enthält einen Text, welcher die Applikation kurz beschreibt. Außerdem befindet sich auf der Seite auch ein Karousel (Quelle: https://vuetifyjs.com/en/components/carousels/#cycle), welches dem Nutzer eine erste Orientierung bietet und aufzeigt, wo er was findet. Dieses Karousel wurde farblich auf das Banner-Logo abgestimmt. Das Karousel dreht sich alle 6 Sekunden weiter und zeigt das nächste Item. In der Eigenschaft intervall kann man dies anpassen, indem man den gewünschten Wert in ms angibt.

Um die Größe des Karousels anzupassen, musste sowohl in Zeile 24 height=350 als auch in Zeile 27 die height=100% gesetzt werden.

Der erste Entwurf (Wireframe für Methodenübersicht) sieht wie folgt aus:
Wir haben uns dazu entschlossen, dass die Versionsnummer der jeweiligen Methode im Methodennamen aufscheint und zur Zeit keine extra Spalte für die Versionsnummer benötigt wird, weil jede Methode nur einmal vorkommt und nicht mit mehreren Versionen vertreten ist. Die Spalte "Kurzbeschreibung" wurde aus der Tabelle entfernt, da die Seite ansonsten zu überladen gewirkt hatte. Außerdem wird mittels Klick auf die Methode die Seite der Methode geöffnet. Diese Methoden-Seite beinhaltet eine Beschreibung. Mittels Klick auf das Icon in der 3. Spalte wird die Seite des Download-Centers an entsprechender Stelle geöffnet. Im Download-Center kann das Benutzerhandbuch, technische Doku oder die Files der zuvorausgewählten Methode gedownloadet werden.
Schlussendlich besteht die Methodenübersicht aus einer Tabelle mit 3 Spalten:

1. Name der Methode mit Link zur detaillierten Ansicht
2. Link zur detaillierten Ansicht und
3. Link zum Downloadcenter.
   

Gruppierung erfolgt hier nach Kategorie der Methode.

Die Solveruebersicht besteht aus einer Tabelle mit 3 Spalten:

1. Name des Solvers mit Link zur detaillierten Ansicht
2. Link zur detaillierten Ansicht und
3. Link zum Downloadcenter.
   

Gruppierung erfolgt hier nach Kategorie des Solvers.

Mittels Klick auf das Icon in der 3. Spalte wird die Seite des Downloadcenters an entsprechender Position geöffnet. Im Downloadcenter kann das Benutzerhandbuch, technische Doku oder die Dateien der zuvorausgewählten Methode oder Solver heruntergeladen werden.
Quellen:

• Quelle für Verwendung von id :
  https://stackoverflow.com/questions/24739126/scroll-to-a-specific-element-using-html
  
• Quelle für auf nächste Seite verlinken:
  https://stackoverflow.com/questions/56199247/how-to-scroll-to-a-specific-anchor-using-a-router-link
  
• Quelle für router/index.js:
  https://stackoverflow.com/questions/40341939/how-to-create-anchor-tags-with-vue-router
  
• Weiterführende Quelle für id weitergeben:
  https://youtu.be/-uCUCmrNgeo?t=702
  
• Weiterführende Quelle bzgl. Routing Dokumentation:
  https://router.vuejs.org/api/#router-link-props
  
• Weiterführende Quelle bzgl. Hash vs History Routing
  https://www.youtube.com/watch?v=js5Sr_ZSHDs
  

Wireframe fürs Downloadcenter sieht wie folgt aus:

Die Tabelle im Downloadcenter besteht aus 4 Spalten:

1. Name der Methode/Solver mit Link zur detaillierten Ansicht,
2. Link für Download des Benutzerhandbuches,
3. Link für Download der technischen Dokumentation und
4. Link zum Download der ausführbaren Datei.

Die Gruppierung erfolgt hier nach Typ (also: Methode oder Solver). Wir haben uns gegen eine zusätzliche Gruppierung nach Kategorien entschieden, weil man sonst zu viel herum klickt. Diese zusätzliche Gruppierung hätte mit einer <v-treeview> vermutlich umgesetzt werden können.

• Quellen für <v-treeview> in v-data-table:
  https://vuetifyjs.com/en/components/treeview/#examples
  https://www.npmjs.com/package/v-tree-data-table
  https://stackoverflow.com/questions/65761782/vuetify-tree-data-table
  https://jsfiddle.net/arnedesmedt/7my8L42q/?ref=madewithvuejs.com

Im public-Ordner befindet sich 2 Unterordner ( Methods und Solver ). Darin werden die Dateien wie folgt abgespeichert:

<NameVersionsNr>_Benutzerhandbuch.pdf: enthält Dokumentation für einen Benutzer.
<NameVersionsNr>_Dokumentation.[pdf|zip]: enthält die technische Dokumentation(en).
<NameVersionsNr>_Programm.zip: enthält das ausführbare Programm (entweder .jar oder .exe) der Methode bzw. des Solvers. Wir haben uns dagegen entschieden, zusätzlich den Sourcecode der Methode bzw. des Solvers bereitzustellen, da wir die Applikation so schlank wie möglich halten wollen.

Die größte Herausforderungen war hier die Funktionalität herzustellen, Dateien (Handbuch, technische Dokumentation sowie Sourcecode) herunterladen zu können. Dies wurde schlussendlich durch ein v-btn mithilfe der download-Eigenschaft sowie der Verlinkung mit:href gewährleistet, die auf das File verweist, das sich zwingend im Ordner public (oder einen Unterordner von public) befinden muss. Die Syntax lautete dann wie folgt: <v-btn :href="'public/<fileName>'" download>.

Die folgenden Umsetzungsalternativen hatten wir verworfen, da die zuvor genannte Lösung am einfachsten und am elegantesten umzusetzen war.

Axios
Quellen:
https://www.youtube.com/watch?v=jmwbDWcHH1s
https://codepen.io/nigamshirish/pen/ZMpvRa
https://stackoverflow.com/questions/53772331/vue-html-js-how-to-download-a-file-to-browser-using-the-download-tag
https://medium.com/js-dojo/force-file-download-in-vuejs-using-axios-a7fe1b5dfe7b
https://www.npmjs.com/package/vue-axios
https://www.youtube.com/watch?v=UnqTTQSksy0

Vue Ressource
Quellen:
https://codepen.io/nigamshirish/pen/ZMpvRa
https://javascript.tutorialink.com/how-to-download-a-vue-file-as-pdf-file-in-vuejs/
https://stackoverflow.com/questions/51073691/how-to-use-links-to-download-pdf-files-in-vue-nuxt

Firebase
Firebase dient zum Speichern von Daten und Dateien. Allerdings bringt diese Möglichkeit den Nachteil mit sich, dass ein Login erforderlich ist. Quelle:
https://stackoverflow.com/questions/63590279/how-to-download-a-file-from-firebase-storage-in-a-vue-web-app

Ist ein Link für Download des Benutzerhandbuches oder technischen Dokumentation nicht vorhanden, so wird das Icon ausgeblendet (Quelle: https://stackoverflow.com/questions/34469587/how-to-compare-v-if-with-a-value-in-vue-js/34472503).

Anfangs wollten wir, dass die Kategorien im Downloadcenter beim Laden der Seiten zu Beginn eingeklappt sind. Dies ist gemäß unserer Recherche nicht ohne Weiteres möglich ( siehe https://stackoverflow.com/questions/61351208/modify-default-slot-isopen-in-data-table-vuetify-2-0). Um diese Funktionalität gewährleisten zu können, hätte man mehr Aufwand dorthinein investieren müssen. Allerdings einigten wir uns darauf, dass andere Aufgaben (wie z. B. Methodeneinbindung) eine höhere Priorität haben und wir diese fokussieren.

Da wir zu wenig Speicherplatz in unser Github-Repository haben, konnten wir das Programm für ORGraphX nicht einbinden. Bei Interesse steht das Programm dafür hier zur Verfügung.

Wie auch im Refactoring OR-Software / Tabellenblatt ORWeb_SS21 erklärt: Bei den Methoden sind Solver, die für diese Methode benötigt werden, teilweise im Code (Verknüpfung Solver nichtbenötigt) , teilweise im Unterordner "Solver" von Methode (Solver in ZIP) und teilweise als Referenz zu den Oberordner "Solver" extern in einer paths.ini ausgelagert. Für Letzteres wurde immer die zugehörigen Solver sowie eine README.txt im ZIP beigelegt, um zu erklären, wie man den Solverpfad richtig konfiguriert.

Im Excel-Sheet Refactoring OR-Software im Tabellenblatt "ORWeb_SS21" wurde dokumentiert, welche Solver und Methoden im Downloadcenter implementiert wurden und welche nicht. Grundsätzlich werden in der Applikation die nativen Methoden (nicht die Web-Methoden) von Kategorie A aus der Methodenbank vom SS2018 bereitgestellt.

Bei der Datenschutzerklärung wurden relevanten Punkte für die Applikation aus der Datenschutzerklärung der Hochschule Konstanz übernommen. Alle nicht relevanten Absätze für diese Applikation wurden im Sourcecode auskommentiert. Über den jeweiligen Absatz ist auch eine Begründung (mit dem vorangehenden Schlagwort "HINWEIS:"), weshalb dieser Absatz für diese Applikation nicht zutrifft, als Kommentar hinterlegt.

1. Webswing
   https://www.webswing.org/
   
2. REST Service

1. Projekt auf https://www.heroku.com/ anlegen
2. Git konfigurieren

• git remote add heroku <herokuGitLink>
• git gc --auto --prune=today --aggressive
• git repack
• git config --global http.postbuffer 524288000
• git config --global pack.windowMemory 256m

3. Backend Ordner auf heroku pushen (Befehl auf oberster Ordnerebene ausführen)

• git subtree push --prefix backend heroku master

1. In Vuetify Ordner wechseln
   cd frontend
   
2. Aktuellste Electron Version installieren
   npm install --save-dev electron@latest
   
3. Desktop Anwendung starten
   npm run electron:serve