Raw Source
emptydev / SE - Notes 

// ==UserScript==
// @name         SE - Notes
// @namespace    62a2c8f358da0ece3b4f7024229cd569
// @version      0.1
// @license MIT
// @description  System Empires 2020 - Notes
// @author       2020, Magnus Man
// @match        http://extreme3.brunomonteiro.net/mainview.php
// @grant        none
// @updateURL   https://openuserjs.org/meta/emptydev/SE_-_Notes.meta.js
// @downloadURL https://openuserjs.org/install/emptydev/SE_-_Notes.user.js
// ==/UserScript==

(function () {
  'use strict';

  function uuidv4() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      var r = Math.random() * 16 | 0,
        v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }

  var noteManager = {
    save: function (id, title, message) {
      var notes = localStorage.getItem("emptydevNotes");
      if (notes) {
        notes = JSON.parse(notes);
        var noteExists = notes.filter(function (item) {
          return item.key == id;
        }).length > 0;

        if (noteExists) {
          notes.filter(function (item) {
            if (item.key == id) {
              item.title = title;
              item.message = message;
            }
          });
        }
        else {
          notes.push({
            key: id,
            title: title,
            message: message
          });
        }

      }
      else {
        notes = [];
        notes.push({
          key: id,
          title: title,
          message: message
        });
      }

      localStorage.setItem("emptydevNotes", JSON.stringify(notes));
    },
    get: function (id) {
      var notes = localStorage.getItem("emptydevNotes");
      if (notes) {
        notes = JSON.parse(notes);
        return notes.filter(function (item) {
          return item.key == id;
        })[0];
      }
    },
    getAll: function () {
      var notes = localStorage.getItem("emptydevNotes");
      if (notes) {
        notes = JSON.parse(notes);
      }
      else {
        notes = [];
      }

      return notes;
    },
    remove: function (id) {
      var notes = localStorage.getItem("emptydevNotes");
      if (notes) {
        notes = JSON.parse(notes);
        notes = notes.filter(function (item) {
          return item.key != id;
        });

        localStorage.setItem("emptydevNotes", JSON.stringify(notes));
      }
    }
  };

  var rowNotes = $(document.createElement("tr")).attr({
    "class": "b760"
  }).append($(document.createElement("td")).attr({
    "colspan": "100%"
  }).addClass("notesContainer")).insertBefore(".b760b");

  var noteHeader = $(document.createElement("div")).text("Notas").css({
    "font-size": "14px",
    "text-align": "center",
    "margin": "20px 0px 0px 0px",
    "font-weight": "bold"
  }).appendTo(".notesContainer");

  var noteNew = $(document.createElement("img")).css({
    "float": "right",
    "margin": "4px",
    "cursor": "pointer"
  }).attr({
    "src": "http://extreme3.brunomonteiro.net/Skin/red/img/others/moredetail.png"
  }).appendTo(noteHeader).on("click", function () {
    createNote();
  });

  loadNotes();

  function createNote(id, title, message) {
    cancelNote();
    var newNoteContainer = $(document.createElement("div")).addClass("emptydevCreateNote");

    var noteId = $(document.createElement("input")).attr({
      "type": "hidden"
    }).val(uuidv4()).addClass("emptydevNoteId").appendTo(newNoteContainer);

    if (id) {
      noteId.val(id);
    }

    var noteTable = $(document.createElement("table")).attr({
      "cellpadding": "5"
    }).css({
      "width": "100%"
    });
    var noteRow = $(document.createElement("tr"));
    var noteCel = $(document.createElement("td")).attr({
      "align": "left",
      "valign": "top"
    });

    var noteInput = $(document.createElement("input")).attr({
      "type": "text"
    }).css({
      "width": "100%"
    }).addClass("text emptydevNoteTitle");

    if (title) {
      noteInput.val(title);
    }

    var noteTextarea = $(document.createElement("textarea")).css({
      "width": "100%",
      "resize": "none"
    }).addClass("note emptydevNoteMessage");

    if (message) {
      noteTextarea.val(message);
    }

    var noteSave = $(document.createElement("input")).attr({
      "type": "button"
    }).css({
      "margin": "4px",
      "padding": "4px 10px"
    }).val("Criar nota").addClass("text emptydevNoteTitle").on("click", saveNote);

    var noteCancel = $(document.createElement("input")).attr({
      "type": "button"
    }).css({
      "margin": "4px",
      "padding": "4px 10px"
    }).val("Cancelar").addClass("text emptydevNoteTitle").on("click", cancelNote);

    var row1 = noteRow.clone().append(noteCel.clone().css({
      "width": "140px"
    }).text("Título"), noteCel.clone().html(noteInput));
    var row2 = noteRow.clone().append(noteCel.clone().text("Nota"), noteCel.clone().html(noteTextarea));
    var row3 = noteRow.clone().append(noteCel.clone().attr({
      "colspan": "2",
      "align": "center"
    }).append(noteSave, noteCancel));

    noteTable.append(row1, row2, row3);
    newNoteContainer.append(noteTable);

    newNoteContainer.insertBefore($(".noteTableContainer"));
  }

  function loadNotes() {
    $(".noteTableContainer").remove();

    var noteListWidth = "180px";
    var noteTableContainer = $(document.createElement("table")).css({
      "width": "100%",
      "margin": "10px 0px"
    }).attr({
      "cellpadding": "5"
    }).addClass("noteTableContainer");

    var noteRow = $(document.createElement("tr"));
    var noteCel = $(document.createElement("td")).attr({
      "align": "left",
      "valign": "top"
    });

    var noteList = noteCel.clone().css({
      "width": noteListWidth
    }).addClass("noteListContainer");
    var noteDetails = noteCel.clone().css({
      "width": "calc(100% - " + noteListWidth + ")"
    }).addClass("noteDetailContainer");

    noteTableContainer.append(noteRow.clone().append(noteList, noteDetails));

    noteTableContainer.appendTo($(".notesContainer"));

    var notes = noteManager.getAll();

    var noteListContainer = $(document.createElement("ul")).css({
      "list-style": "none",
      "padding": "4px 0px",
      "border-right": "1px solid #944"
    });

    $.each(notes, function (i, e) {
      var noteItem = $(document.createElement("li")).attr({
        "data-id": e.key
      }).css({
        "list-style": "none",
        "padding": "4px 0px",
        "cursor": "pointer"
      });

      var text = $(document.createElement("span")).text(e.title).css({
        "text-decoration": "underline"
      }).on("click", loadNote);

      var imgEdit = $(document.createElement("img")).attr({
        "src": "http://extreme3.brunomonteiro.net/Skin/red/img/others/options.png"
      }).css({
        "float": "right",
        "margin": "2px 4px",
        "width": "12px"
      }).on("click", editItem);

      var imgDelete = $(document.createElement("img")).attr({
        "src": "http://extreme3.brunomonteiro.net/Skin/red/img/others/drop.png"
      }).css({
        "float": "right",
        "margin": "2px 4px",
        "width": "12px"
      }).on("click", deleteItem);

      noteItem.append(text, imgDelete, imgEdit);

      noteListContainer.append(noteItem);
    });

    noteListContainer.appendTo($(".noteListContainer"));
  }

  function loadNote() {
    var id = $(this).closest("li").attr("data-id");
    var note = noteManager.get(id);

    var noteContainer = $(document.createElement("table")).css({
      "width": "100%"
    }).attr({
      "cellpadding": "4"
    });

    var noteRow = $(document.createElement("tr"));
    var noteCel = $(document.createElement("td")).attr({
      "align": "left",
      "valign": "top"
    });

    var row1 = noteRow.clone().append(noteCel.clone().css({
      "width": "140px"
    }).text("Título"), noteCel.clone().text(note.title));
    var row2 = noteRow.clone().append(noteCel.clone().text("Nota"), noteCel.clone().text(note.message));

    noteContainer.append(row1, row2);

    $(".noteDetailContainer").html(noteContainer);
  }

  function deleteItem() {
    var id = $(this).closest("li").attr("data-id");
    noteManager.remove(id);
    loadNotes();
  }

  function editItem() {
    var id = $(this).closest("li").attr("data-id");
    var note = noteManager.get(id);
    createNote(id, note.title, note.message);
  }

  function saveNote() {
    noteManager.save($(".emptydevNoteId").val(), $(".emptydevNoteTitle").val().trim(), $(".emptydevNoteMessage").val().trim());
    cancelNote();
    loadNotes();
  }

  function cancelNote() {
    $(".emptydevCreateNote").remove();
  }
})();