Finished content of man

Frontend/src/components/man/RestMockManComponent.vue

@@ -7,7 +7,7 @@
     <div class="flex flex-row">
       <a href="/rest/mock" class="tool-button">Back to REST Mock</a>
     </div>
-    <div class="dark:text-slate-100 w-full h-full text-justify overflow-auto px-2">
+    <div class="flex flex-col dark:text-slate-100 w-full h-full text-justify overflow-auto px-2">
       <h2 class="text-2xl font-bold mt-4 mb-2">Description</h2>
       <p><span class="font-medium">REST Mock</span> is a tool allowing to create temporary REST endpoint called REST Mock, that allows to test REST clients.</p>
       <br>
@@ -37,27 +37,43 @@
       <p>Here you can set response body. This is sophisticated text editor with syntax-highlighting based on detected language. It works both with JSON and XML data.</p>
 
       <h3 class="text-lg font-medium mt-2">Response Headers section</h3>
-      <p>This section contains three default and unremovable headers ("Connection", "Date", "Keep-Alive") as well as empty field used to adding custom header. Adding header with empty value is possible, but every header has to have a name. When adding new header is possible, the "Add" button becomes active.</p>
+      <p>This section contains three default and unremovable headers ("Connection", "Date", "Keep-Alive") as well as empty field used to adding custom header. Adding header with empty value is possible, but every header has to have a name. When adding new header is possible, the "Add" button becomes active. New header is added after "Add" button is clicked.</p>
       
       <h3 class="text-lg font-medium mt-2">History</h3>
-      <p>This section allows to look into history of requests sent to current REST Mock. If request has body, "Show body" button appears in its entry. Also there is option to look into every request's headers by clicking "Show Headers" button. For now, History doesn't refresh automatically. To refresh it, click small refresh button on the right-hand side.</p>
+      <p>This section allows to look into history of requests sent to current REST Mock. Entries are sorted by descending by date (newer are first). If request has body, "Show body" button appears in its entry. Also there is option to look into every request's headers by clicking "Show Headers" button. For now, History doesn't refresh automatically. To refresh it, click small refresh button on the right-hand side.</p>
 
       <h2 class="text-2xl font-bold mt-4 mb-2">Example</h2>
       <p>Let's say we want to create temporary endpoint that returns code 200 with body:</p>
-      <div class="p-2 my-2 dark:bg-slate-800 bg-slate-200 rounded-md"><pre>{
+      <div class="w-fit p-2 my-2 bg-slate-200 dark:bg-slate-800 rounded-md self-center"><pre>{
   "status": "completed", 
   "warnings": "none"
 }</pre></div>
       <p>Additionally we want to set some headers:</p>
-      <div class="p-2 my-2 dark:bg-slate-800 bg-slate-200 rounded-md"><pre>  Name       Value
+      <div class="w-fit p-2 my-2 bg-slate-200 dark:bg-slate-800 rounded-md self-center"><pre>  Name       Value
 operation   addition
 priority     urgent
 </pre></div>
-      <p>In this example we will focus on the left-hand side panel first as it contains most of the settings. On the top you see autogenerated URL link to your REST Mock service and the "Save" button that saves every setting on this page.</p><br/>
-      <p>Next, down from REST Mock URL are two text fields. One for content type of a response and second for the HTTP status of a response. </p><br/>
+      <p>In this example we will focus on the left-hand side panel first as it contains most of the settings. On the top you see autogenerated URL link to your REST Mock service and the "Save" button that saves every setting on this page.</p>
+      <div class="flex flex-col gap-2 w-fit shadow-sm bg-slate-200 dark:bg-slate-800 p-2 rounded-md my-2 text-center self-center">
+        <img id="url_section" class="rounded-md" src="../../assets/man/rest-mock/URL_section.png" />
+        <label for="url_section" class="text-sm mb-0 text-slate-600 dark:text-slate-300">Screenshot of Rest Mock URL bar and Save button</label>
+      </div>
+      <p>Next, down from REST Mock URL are two text fields. One for content type of a response and second for the HTTP status of a response. </p>
+      <div class="flex flex-col gap-2 w-fit shadow-sm bg-slate-200 dark:bg-slate-800 p-2 rounded-md my-2 text-center self-center">
+        <img id="url_section" class="rounded-md" src="../../assets/man/rest-mock/Status_section.png" />
+        <label for="url_section" class="text-sm mb-0 text-slate-600 dark:text-slate-300">Screenshot of "Response Content Type" and "Response HTTP Status"</label>
+      </div>
       <p>These two fields are first things that we will set in this example. Out content type is JSON, so we will put "application/json" in "Response Content Type" field. The "Response HTTP Status" field we'll leave unchanged for now.</p><br/>
       <p>Next element of this tool is big "Response Body" text field. Here you can put data that you want your REST Mock to respond with. In this example we will put JSON from few lines above.</p>
+      <div class="flex flex-col gap-2 w-fit shadow-sm bg-slate-200 dark:bg-slate-800 p-2 rounded-md my-2 text-center self-center">
+        <img id="url_section" class="rounded-md" src="../../assets/man/rest-mock/Body_section.png" />
+        <label for="url_section" class="text-sm mb-0 text-slate-600 dark:text-slate-300">Screenshot of Response Body field filled with example JSON</label>
+      </div>
       <p>Last thing that we have to set are headers. Those we can set in Headers section.</p>
+      <div class="flex flex-col gap-2 w-fit shadow-sm bg-slate-200 dark:bg-slate-800 p-2 rounded-md my-2 text-center self-center">
+        <img id="url_section" class="rounded-md" src="../../assets/man/rest-mock/Header_section.png" />
+        <label for="url_section" class="text-sm mb-0 text-slate-600 dark:text-slate-300">Screenshot of Headers Section with added custom headers.</label>
+      </div>
     </div>
   </div>