Fixed #33

README.md

@@ -1,5 +1,5 @@
 # JournalBear
-A cross-platform journal application written in JS and Electron, with AES-256 encryption. Uses [Bootstrap 4](http://getbootstrap.com/), [Metro UI CSS](https://metroui.org.ua/), [jQuery](https://jquery.com/), [Select2](https://select2.github.io/), and [pickadate](https://github.com/amsul/pickadate.js). Uses emoji images from [emojify.js](https://github.com/emojione/emojify.js), which are stored in the `emoji` directory.
+A cross-platform journal application written in JS and Electron, with AES-256 encryption. Uses [Bootstrap 4](http://getbootstrap.com/), [Metro UI CSS](https://metroui.org.ua/), [jQuery](https://jquery.com/), and [pickadate](https://github.com/amsul/pickadate.js). Uses emoji images from [emojify.js](https://github.com/emojione/emojify.js), which are stored in the `emoji` directory.
 
 # Deploying
 The repo is configured with `electron-builder`. Run `npm run dist` to create a built executable for your platform.
@@ -23,7 +23,6 @@ The `css` and `js` folders have the files for third-party libraries used. This a
 * Bootstrap and Metro UI CSS provide the styling for the page.
 * `default.css`, `default.date.css`, `picker.js`, and `picker.date.js` are the `pickadate.js` datepicker library used in the Add Entry dialog.
 * jQuery is used for event handling and DOM manipulation.
-* The `select` control in the Add Entry dialog is styled by `Select2`.
 * `index.css` contains custom styling used in the app.
 
 ## `fonts`
@@ -36,3 +35,20 @@ This folder contains fonts required by Metro UI CSS.
 #!/bin/sh
 eslint .
 ```
+
+# File Format
+The `.zjournal` file format is formed as follows. The base is a JSON file called `data.json`. All attachments are stored in an `images` folder beside this JSON file. These two are put in a directory called `_jbfiles` in the temp directory. This directory is compressed to a `.tar.gz` format, and this file is encrypted by AES-256. 
+
+The JSON file looks like this. The `en` key was required to maintain compatibility with an older version.
+```
+{
+    "en": [
+        {
+            "sentiment": String,
+            "entryDate": String,
+            "content": String,
+            "attachment": [String]
+        }
+    ]
+}
+```

app/index.html

@@ -208,6 +208,7 @@
             <input style="margin-top: 10px; margin-bottom: 10px; margin-left: 20px;" type="file" id="selectFile" accept="image/*"
                 multiple>
         </div>
+        <p id="add-nsfw-label">NSFW</p>
         <button class="button" id="preview">Preview</button>
         <button class="button" id="addEntry">Add Entry</button>
         <button class="button danger" id="cancelEntry">Cancel</button>

app/render.js

@@ -116,7 +116,10 @@ function showData(data) {
         html += "<div class='entry' id='" + i + "'><b>";
         html += new Date(json[i].entryDate).toDateString() + "</b>";
         html += `<span>  </span><span class='sentiment ${sentiment}'> </span>\
-            <span style='color: ${sentiments[sentiment]}; font-size: 12px'>${sentiment}</span><br/><p>`;
+            <span style='color: ${sentiments[sentiment]}; font-size: 12px'>${sentiment}</span>`
+        if (json[i].nsfw)
+            html += `<span class="nsfw">NSFW</span>`;
+        html += `<br/><p>`;
         let entry = json[i].content;
 
         let words = entry.split(/\s+/).slice(0, 5).join(" ");
@@ -633,6 +636,7 @@ $("#sentimentYearsSelect").change(e => {
 $("#addEntry").click(() => {
     let date = new Date($("#date").val());
     let content = $("#entryTextarea").val();
+    let nsfw = $("p#add-nsfw-label").hasClass("active");
 
     let isNewEntry; // is it a new entry or an updation?
     if ($("#addEntry").text() === "Add Entry")
@@ -653,7 +657,7 @@ $("#addEntry").click(() => {
 
     let sentiment = $("select").val();
     // Add the entry to the list of entries
-    let newEntry = { entryDate: date, content, attachment: encodedImages, sentiment };
+    let newEntry = { entryDate: date, content, attachment: encodedImages, sentiment, nsfw };
 
     if (isNewEntry) {
         journalEntries.en.push(newEntry);
@@ -663,7 +667,10 @@ $("#addEntry").click(() => {
         html += "<div class='entry' id='" + currentEntryCount + "'><b>";
         html += date.toDateString() + "</b><span>  </span><span class='sentiment " +
             sentiment + "'></span>" + `<span style="color: ${sentiments[sentiment]}; font-size: 12px"> \
-            ${sentiment}</span><br/><p>`;
+            ${sentiment}</span>`;
+        if (nsfw)
+            html += `<span class="nsfw">NSFW</span>`;
+        html += "<br/><p>";
         let words = content.split(/\s+/).slice(0, 5).join(" ");
         html += words + "...</p></div><hr />";
         $("#list").append(html);
@@ -857,3 +864,8 @@ $("#preview").click(() => {
     $("#renderedMarkdown").html(converter.makeHtml($("#entryTextarea").val()));
     emojify.run(document.getElementById("renderedMarkdown"));
 });
+
+// Handle "Add NSFW Label" button click
+$("p#add-nsfw-label").click(() => {
+    $("p#add-nsfw-label").toggleClass("active");
+});

css/index.css

@@ -214,4 +214,27 @@ input[type="text"] {
 
 select {
     padding: 5px;
+}
+
+p#add-nsfw-label {
+    cursor: pointer;
+    color: red;
+    border-radius: 4px;
+    border: solid 1px black;
+    padding: 4px;
+    width: fit-content;
+
+    transition: background-color .2s ease-in, color .2s ease-in;
+}
+
+p#add-nsfw-label.active {
+    color: white;
+    background-color: red;
+}
+
+span.nsfw {
+    color: red;
+    text-transform: uppercase;
+    margin-left: 5px;
+    font-size: 0.9rem;
 }

package.json

@@ -10,14 +10,19 @@
     "appId": "com.yrahul.journal",
     "linux": {
       "target": [
-        "deb"
+        "deb",
+        "rpm"
       ],
       "icon": "./build/icons",
       "category": "Office"
     },
     "mac": {
       "target": "dir",
       "icon": "./build/icon.icns"
+    },
+    "win": {
+      "target": "nsis",
+      "icon": "./build/icon.ico"
     }
   },
   "version": "5.1.0",