Revize 408ea567

#16 Rich text field for AP operationalization details implemented

src/main/java/cz/zcu/fav/kiv/antipatterndetectionapp/controller/AppController.java

@@ -10 +10 @@
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.core.io.FileSystemResource;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.*;
+import org.springframework.web.multipart.MultipartFile;
 import org.springframework.web.servlet.mvc.support.RedirectAttributes;
 
+import java.io.BufferedWriter;
+import java.io.File;
+import java.io.FileWriter;
+import java.nio.file.Files;
 import java.time.LocalTime;
 import java.time.format.DateTimeFormatter;
 import java.util.List;
@@ -255 +263 @@
         return "redirect:/anti-patterns/{id}";
     }
 
+    /**
+     * Method for storing operationalization detail for individual AP
+     *
+     * @param model object for passing data to the UI
+     * @param id id of AP
+     * @param innerText operationalization text (HTML)
+     * @param redirectAttrs attributes for redirection
+     * @return redirected html file name for thymeleaf template
+     */
+    @PostMapping("/anti-patterns/{id}/operationalization")
+    public String antiPatternsPost(Model model,
+                                   @PathVariable Long id,
+                                   @RequestParam(value = "contentTextArea", required = false) String innerText,
+                                   RedirectAttributes redirectAttrs) {
+
+        AntiPattern antiPattern = antiPatternService.antiPatternToModel(antiPatternService.getAntiPatternById(id));
+
+        String thePath = new FileSystemResource("").getFile().getAbsolutePath() + "\\src\\main\\webapp\\operationalizations\\" + antiPattern.getName() + ".html";
+
+        try {
+            BufferedWriter writer = new BufferedWriter(new FileWriter(thePath));
+            writer.write(innerText);
+            writer.close();
+            redirectAttrs.addFlashAttribute("successMessage", "Operationalization detail has been successfully saved.");
+        } catch (Exception e) {
+        }
+        return "redirect:/anti-patterns/{id}";
+    }
+
+    /**
+     * Method for getting image from operationalization images folder
+     *
+     * @param imageName Name of the image
+     * @return image as a byte array
+     * @throws Exception If image is not in the folder
+     */
+    @GetMapping("/operationalizations/images/{imageName}")
+    public @ResponseBody byte[] imageTestGet(@PathVariable String imageName) throws Exception {
+        File f = new File(new FileSystemResource("").getFile().getAbsolutePath() + "\\src\\main\\webapp\\operationalizations\\images\\" + imageName);
+        return Files.readAllBytes(f.toPath());
+    }
+
+    /**
+     * Method for uploading an image to the operationalization images folder
+     *
+     * @param file image to upload
+     * @return result
+     */
+    @PostMapping("/uploadImage")
+    public ResponseEntity<?> handleFileUpload(@RequestParam("file") MultipartFile file ) {
+
+        String fileName = file.getOriginalFilename();
+
+        if(new File(new FileSystemResource("").getFile().getAbsolutePath() + "\\src\\main\\webapp\\operationalizations\\images\\" + fileName).isFile()){
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
+        }
+
+        try {
+            file.transferTo( new File(new FileSystemResource("").getFile().getAbsolutePath() + "\\src\\main\\webapp\\operationalizations\\images\\" + fileName));
+        } catch (Exception e) {
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
+        }
+        return ResponseEntity.ok("File uploaded successfully.");
+    }
+
 
 }

src/main/java/cz/zcu/fav/kiv/antipatterndetectionapp/model/AntiPattern.java

@@ -2 +2 @@
 
 import cz.zcu.fav.kiv.antipatterndetectionapp.Constants;
 import org.jsoup.Jsoup;
+import org.springframework.core.io.FileSystemResource;
 
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Paths;
 import java.util.Map;
 
 /**
@@ -133 +137 @@
         return resultDescription.trim();
     }
 
+    public String getOperationalizationText() {
+        String myPath = new FileSystemResource("").getFile().getAbsolutePath() + "\\src\\main\\webapp\\operationalizations\\" + this.getName() + ".html";
+        String content = null;
+        try {
+            content = new String ( Files.readAllBytes(Paths.get(myPath)));
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+
+        return content;
+    }
+
     @Override
     public String toString() {
         return "AntiPattern{" +

src/main/webapp/WEB-INF/templates/anti-pattern.html

@@ -7 +7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" th:href="@{/resources/css/style.css}">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </head>
-<body>
+<body onload="makeEditorNotEditable()">
 <!-- Navigation bar imported -->
 <div th:replace="fragments/navbar :: navBar"></div>
 <!-- ./Navigation bar imported -->
@@ -66 +67 @@
 
         <!-- Anti pattern description -->
         <div class="form-group">
-            <label for="antiPatternDescription">Anti Pattern description:</label>
+            <h5 for="antiPatternDescription">Anti Pattern Description</h5>
             <textarea disabled class="form-control" id="antiPatternDescription" rows="5"
                       th:text="${antiPattern.getDescriptionFromCatalogue()}"></textarea>
         </div>
         <!-- ./Anti pattern description -->
 
+        <hr>
+
+        <!-- Anti pattern operationalization -->
+        <div class="operationalization-detail">
+            <h5 style="display: inline-block">Anti Pattern Operationalization Detail</h5>
+            <button type="button" class="btn edit-button" onclick="enableEdit()">
+                <i class="fa fa-pen-to-square fa-lg"></i>
+            </button>
+            <div class="main-content" id="antiPatternOperationalization">
+                <div class="text-editor-header" id="editorHeader">
+                    <button type="button" class="btn rt" data-element="bold">
+                        <i class="fa fa-bold"></i>
+                    </button>
+                    <button type="button" class="btn rt" data-element="italic">
+                        <i class="fa fa-italic"></i>
+                    </button>
+                    <button type="button" class="btn rt" data-element="underline">
+                        <i class="fa fa-underline"></i>
+                    </button>
+                    <button type="button" class="btn rt" data-element="justifyLeft">
+                        <i class="fa fa-align-left"></i>
+                    </button>
+                    <button type="button" class="btn rt" data-element="justifyCenter">
+                        <i class="fa fa-align-center"></i>
+                    </button>
+                    <button type="button" class="btn rt" data-element="justifyRight">
+                        <i class="fa fa-align-right"></i>
+                    </button>
+                    <button type="button" class="btn rt" data-element="header1">
+                        <i class="fa fa-heading fa-sm">1</i>
+                    </button>
+                    <button type="button" class="btn rt" data-element="header2">
+                        <i class="fa fa-heading fa-sm">2</i>
+                    </button>
+                    <button type="button" class="btn rt" data-element="header3">
+                        <i class="fa fa-heading fa-sm">3</i>
+                    </button>
+                    <button type="button" class="btn rt" data-element="insertUnorderedList">
+                        <i class="fa fa-list-ul"></i>
+                    </button>
+                    <button type="button" class="btn rt" data-element="insertOrderedList">
+                        <i class="fa fa-list-ol"></i>
+                    </button>
+                    <button type="button" class="btn rt" data-element="createLink">
+                        <i class="fa fa-link"></i>
+                    </button>
+                    <button type="button" class="btn rt" data-element="insertImage">
+                        <i class="fa fa-image"></i>
+                    </button>
+                    <input type="file" id="imageInput" name="fileupload" hidden>
+                    <button id="upload-button" onclick="uploadFile()" hidden></button>
+                </div>
+                <div class="content form-control" id="content-area" onload="getContent()" th:utext="${antiPattern.getOperationalizationText()}"></div>
+            </div>
+            <form id="operationalization-form" action="#" th:action="@{/anti-patterns/} + ${antiPattern.id} + @{/operationalization}" th:object="${antiPattern}" method="post">
+                <div class="save-operationalization-button-container">
+                    <textarea style="display:none" id="contentTextArea" name="contentTextArea"></textarea>
+                    <button type="submit" class="btn btn-primary custom-button" id="op_save_button">Save changes</button>
+                </div>
+            </form>
+
+        </div>
+        <!-- ./Anti pattern operationalization -->
+
+        <hr>
+
         <!-- Anti pattern configuration form -->
-        <h5>Anti Pattern configurations</h5>
+        <h5>Anti Pattern Configurations</h5>
 
         <!-- Form for configuration values -->
         <form action="#" th:action="@{/anti-patterns/} + ${antiPattern.id}" th:object="${antiPattern}" method="post">
@@ -102 +169 @@
 </div>
 <!-- ./Card for anti pattern details-->
 
+<!-- Scripts -->
+<script th:src="@{/resources/js/rt-editor.js}"></script>
+<!-- ./Scripts -->
+
 </body>
 </html>

src/main/webapp/operationalizations/BusinessAsUsual.html

@@ +1 @@
+test3

src/main/webapp/operationalizations/LongOrNonExistentFeedbackLoops.html

@@ +1 @@
+test6

src/main/webapp/operationalizations/NinetyNinetyRule.html

@@ +1 @@
+test7

src/main/webapp/operationalizations/RoadToNowhere.html

@@ +1 @@
+test5

src/main/webapp/operationalizations/SpecifyNothing.html

@@ +1 @@
+test4

src/main/webapp/operationalizations/TooLongSprint.html

@@ +1 @@
+<div><h1>This is h1</h1></div><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla est. </div><div>Etiam commodo dui eget wisi. <b>Fusce tellus </b>odio, dapibus id fermentum quis, suscipit id erat. </div><div>Fusce aliquam vestibulum ipsum. Nullam sit amet magna in <u>magna</u> gravida vehicula. </div><div><i>Ut tempus purus at lorem.</i> </div><div><br></div><div><ul><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul><div><a href="https://www.fav.zcu.cz/cs/">https://www.fav.zcu.cz/cs/</a><br></div></div><div><br></div><div><img src="/operationalizations/images/test2.png"><br></div><div><br></div><h2>This is h2</h2><h3>This is h3</h3><div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, </div><div>totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div><div>Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. </div><div><br></div><div><img src="/operationalizations/images/testImage.png"><br></div><div><br></div>

src/main/webapp/operationalizations/VaryingSprintLength.html

@@ +1 @@
+test2

src/main/webapp/resources/css/style.css

@@ -33 +33 @@
     width: 160px !important;
 }
 
+.text-editor-header{
+    padding: 5px;
+    background-color: rgba(0,0,0,.03);
+    border-radius: 0.25rem 0.25rem 0rem 0rem;
+    border-style: solid;
+    border-width: 1px 1px 0 1px;
+    border-color: rgba(0,0,0,.125);
+
+}
+
+.text-editor-header .rt{
+    border: none;
+    outline: none;
+    background-color: transparent;
+    cursor: pointer;
+    font-size: 13px !important;
+}
+
+.edit-button{
+    border: none;
+    outline: none;
+    background-color: #FFFFFF;
+    cursor: pointer;
+    font-size: 13px !important;
+    padding: 3px 3px 3px 7px !important;
+}
+
+.main-content{
+    margin-bottom: 15px;
+}
+
+.content{
+    min-height: 150px;
+    padding: 20px;
+}
+
+.operationalization-detail{
+    margin-bottom: 20px;
+}
+
+#save-button{
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: 0.25rem;
+}
+
+.header-button{
+    font-size: 1em;
+}
+
+#content-area h1{
+    font-size: 1.6em;
+}
+
+#content-area h2{
+    font-size: 1.4em;
+}
+
+#content-area h3{
+    font-size: 1.2em;
+}
+
 /* ==========================================================================
    result.html
    ========================================================================== */

src/main/webapp/resources/js/rt-editor.js

@@ +1 @@
+/**
+ * Copying inner HTML from content editable div to textarea
+ */
+$('#operationalization-form').submit(function() {
+    document.getElementById("contentTextArea").innerHTML = $("#content-area").html();
+    return true;
+});
+
+/**
+ * Set operationalization editor not editable
+ */
+function makeEditorNotEditable(){
+    let header = document.getElementById('editorHeader');
+    let save_button = document.getElementById('op_save_button');
+    let content_area = document.getElementById('content-area');
+
+    header.hidden = true;
+    save_button.hidden = true;
+    content_area.contentEditable = 'false';
+    content_area.style.backgroundColor = '#e9ecef';
+}
+
+/**
+ * Enable operationalization edit
+ */
+function enableEdit(){
+    let header = document.getElementById('editorHeader');
+    let save_button = document.getElementById('op_save_button');
+    let content_area = document.getElementById('content-area');
+
+    if(header.hidden === true){
+        header.hidden = false;
+        save_button.hidden = false;
+        content_area.contentEditable = 'true';
+        content_area.style = 'border-radius: 0rem 0rem 0.25rem 0.25rem; background-color: #FFFFFF';
+    }
+    else{
+        header.hidden = true;
+        save_button.hidden = true;
+        content_area.contentEditable = 'false';
+        content_area.style = 'border-radius: 0.25rem; background-color: #e9ecef';
+    }
+
+}
+
+/**
+ * Event listener to the editor buttons
+ */
+const elements = document.querySelectorAll('.btn');
+elements.forEach(element => {
+    element.addEventListener('click', () => {
+        let command = element.dataset['element'];
+
+        if(command == 'createLink'){
+            let url = prompt('Enter the link: ', '');
+            document.execCommand(command, false, url);
+        }
+        else if(command == 'insertImage'){
+            let input = document.getElementById('imageInput');
+            input.click();
+        }
+        else if(command == 'header1'){
+            headerH1();
+        }
+        else if(command == 'header2'){
+            headerH2();
+        }
+        else if(command == 'header3'){
+            headerH3();
+        }
+        else{
+            document.execCommand(command, false, null);
+        }
+
+    });
+});
+
+/**
+ * Event listener for input of the image in the editor
+ * - clicking submit button (to save image on the server)
+ * - inserting img tag with src to the content
+ */
+document.getElementById('imageInput').addEventListener('change', (event) => {
+    if(document.getElementById('imageInput').files[0] == null)
+        return;
+
+    document.getElementById('upload-button').click();
+
+    setTimeout(() => {
+        let imageName = document.getElementById('imageInput').files[0].name;
+        let imageString = "<img src=\"/operationalizations/images/" + imageName + "\">";
+        document.execCommand('insertHTML', false, imageString.toString());
+    }, 1000);
+});
+
+/**
+ * Uploads file to the server by sending it in the POST
+ */
+async function uploadFile() {
+    let formData = new FormData();
+    formData.append("file", document.getElementById('imageInput').files[0]);
+    let response = await fetch('/uploadImage', {
+        method: "POST",
+        body: formData
+    });
+
+    if(response.status == 200)
+        return;
+    else{
+        alert("Image upload error.");
+        document.getElementById('imageInput').files[0] = null;
+        return;
+    }
+}
+
+/**
+ * Wraping selected text by h1 tag
+ */
+function headerH1() {
+    let S=window.getSelection().toString();
+    if(S.length == 0)
+        return;
+    if(window.getSelection().anchorNode.parentNode.nodeName.toLowerCase() ===  'h1'){
+        document.execCommand('formatBlock', false, 'div');
+        document.execCommand('insertHTML',false, S);
+    }
+    else{
+        document.execCommand('delete',false,'');
+        document.execCommand('insertHTML',false,'<h1>'+S+'</h1>');
+    }
+}
+
+/**
+ * Wraping selected text by h2 tag
+ */
+function headerH2() {
+    let S=window.getSelection().toString();
+    if(S.length == 0)
+        return;
+    if(window.getSelection().anchorNode.parentNode.nodeName.toLowerCase() ===  'h2'){
+        document.execCommand('formatBlock', false, 'div');
+        document.execCommand('insertHTML',false, S);
+    }
+    else{
+        document.execCommand('delete',false,'');
+        document.execCommand('insertHTML',false,'<h2>'+S+'</h2>');
+    }
+}
+
+/**
+ * Wraping selected text by h3 tag
+ */
+function headerH3() {
+    let S=window.getSelection().toString();
+    if(S.length == 0)
+        return;
+    if(window.getSelection().anchorNode.parentNode.nodeName.toLowerCase() ===  'h3'){
+        document.execCommand('formatBlock', false, 'div');
+        document.execCommand('insertHTML',false, S);
+    }
+    else{
+        document.execCommand('delete',false,'');
+        document.execCommand('insertHTML',false,'<h3>'+S+'</h3>');
+    }
+}