1
0

notes.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. // Returns a function, that, as long as it continues to be invoked, will not
  2. // be triggered. The function will be called after it stops being called for
  3. // N milliseconds. If `immediate` is passed, trigger the function on the
  4. // leading edge, instead of the trailing.
  5. function debounce(func, wait, immediate) {
  6. var timeout;
  7. return function() {
  8. var context = this, args = arguments;
  9. var later = function() {
  10. timeout = null;
  11. if (!immediate) func.apply(context, args);
  12. };
  13. var callNow = immediate && !timeout;
  14. clearTimeout(timeout);
  15. timeout = setTimeout(later, wait);
  16. if (callNow) func.apply(context, args);
  17. };
  18. };
  19. function WebDavFileSystem(baseUrl) {
  20. this.baseUrl = baseUrl || "/storage";
  21. }
  22. WebDavFileSystem.prototype.list = function list(path) {
  23. var baseUrl = this.baseUrl;
  24. var url = baseUrl + path;
  25. return fetch(url, {method: "PROPFIND", credentials: 'include', mode: 'cors'})
  26. .then(function (r) { return r.text(); })
  27. .then(function (str) { return new window.DOMParser().parseFromString(str, "text/xml"); })
  28. .then(function (r) {
  29. console.log(r);
  30. var items = r.querySelectorAll("multistatus response");
  31. items = Array.prototype.slice.call(items);
  32. items = items.map(function (i) {
  33. var i = {
  34. path: i.querySelector("href").textContent,
  35. created_at: i.querySelector("prop creationdate").textContent,
  36. modified_at: i.querySelector("prop getlastmodified").textContent,
  37. length_bytes: i.querySelector("prop getcontentlength").textContent,
  38. display_name: i.querySelector("prop displayname").textContent,
  39. status: i.querySelector("status").textContent
  40. };
  41. if (i.path) {
  42. var baseUrlParts = new URL(baseUrl, document.baseURI);
  43. i.path = i.path.substr(baseUrlParts.pathname.length);
  44. }
  45. return i;
  46. });
  47. return items;
  48. });
  49. }
  50. WebDavFileSystem.prototype.upload = function upload(path, contentType, content) {
  51. var url = this.baseUrl + path;
  52. return fetch(url, {method: 'PUT', body: content, credentials: 'include', mode: 'cors'});
  53. }
  54. WebDavFileSystem.prototype.download = function download(path) {
  55. var url = this.baseUrl + path;
  56. return fetch(url, {credentials: 'include', mode: 'cors'})
  57. .then(function (r) { return r.text(); })
  58. }
  59. var fs = new WebDavFileSystem();
  60. var notesStore;
  61. function saveNote() {
  62. // post note to /upload
  63. // post new .csv to /upload (logic should be on server)
  64. }
  65. function syncNotesFromDir() {
  66. fs.list("/").then(function (files) {
  67. var IDs = files.filter(function (f) {
  68. return f.path.endsWith(".txt");
  69. });
  70. var data = IDs.map(function (id) {
  71. return [id.path, id.created_at, id.modified_at];
  72. })
  73. console.log(data);
  74. //notesStore.clear();
  75. notesStore.loadData(data, true);
  76. });
  77. }
  78. var notesStore = new Ext.data.SimpleStore({
  79. fields: ["id", "created", "modified", "title", "body", "attachment_keys"],
  80. id: 0,
  81. data: []
  82. });
  83. notesStore.on("add", function (store, records, idx) {
  84. console.log("Notes added: ");
  85. console.log(records);
  86. var noteNodes = records.map(noteToNode);
  87. var notesFolders = Ext.ComponentMgr.get("notesFolders");
  88. var notesNode = notesFolders.root;
  89. notesNode.appendChild(noteNodes);
  90. });
  91. function noteToNode(record) {
  92. var title = record.data.id;
  93. var node = new Ext.tree.TreeNode({
  94. text: title,
  95. leaf: true,
  96. noteId: record.data.id
  97. });
  98. return node;
  99. }
  100. function runNotesApp () {
  101. Ext.QuickTips.init();
  102. var viewport = Ext.getCmp('viewport');
  103. var win;
  104. var selectedNoteId = null;
  105. if (!win) {
  106. var noteNodes = notesStore.getRange().map(noteToNode);
  107. var notesNode = new Ext.tree.TreeNode({
  108. text: "Notes",
  109. expanded: true
  110. });
  111. notesNode.appendChild(noteNodes);
  112. function addHandler() {
  113. var newId = "/note-" + Math.random() + ".txt";
  114. var date = new Date().toString();
  115. newId = prompt("ID for new note:", newId);
  116. // this should be the effect of a dispatch.
  117. fs.upload(newId, "text/plain", "").then(function () {
  118. notesStore.loadData([
  119. [newId, date, date]
  120. ], true);
  121. var note = notesStore.getById(newId);
  122. //notesNode.appendChild(noteToNode(note));
  123. });
  124. }
  125. var foldersComp = {
  126. xtype: "treepanel",
  127. id: "notesFolders",
  128. tbar: [{
  129. text: 'Add',
  130. handler: addHandler
  131. }],
  132. root: notesNode,
  133. listeners: {
  134. click: function (node, evt) {
  135. var id = node.attributes.noteId;
  136. var editor = Ext.ComponentMgr.get("noteEditor");
  137. selectedNoteId = id; // includes deselect, eg. folder.
  138. if (!id) {
  139. editor.setValue("");
  140. return;
  141. }
  142. console.log("note click: " + id);
  143. var note = notesStore.getById(id);
  144. //var noteHtml = note.data.body;
  145. fs.download( note.data.id ).catch(function (err) {
  146. console.log("error: " + err.httpStatus);
  147. }).then(function (noteHtml) {
  148. var editor = Ext.ComponentMgr.get("noteEditor");
  149. editor.setValue(noteHtml);
  150. });
  151. }
  152. }
  153. };
  154. var foldersConfig = {
  155. region: "west",
  156. split: true,
  157. width: 160,
  158. layout: "fit",
  159. border: false,
  160. items: [foldersComp]
  161. };
  162. var noteConfig = {
  163. region: "center",
  164. split: true,
  165. border: false,
  166. layout: "border",
  167. items: [{
  168. region: "center",
  169. xtype: "htmleditor",
  170. html: "Note.",
  171. id: "noteEditor",
  172. border: false
  173. }, {
  174. region: "south",
  175. border: false,
  176. html: "Note stats."
  177. }]
  178. };
  179. var searchConfig = {
  180. xtype: "textfield",
  181. width: 150,
  182. emptyText: "Search..."
  183. };
  184. win = new Ext.Panel({
  185. tbar: [{
  186. xtype: "tbspacer"
  187. }, searchConfig],
  188. id: "notes-win",
  189. header: false,
  190. title: "Notes",
  191. layout: "border",
  192. bodyBorder: false,
  193. autoShow: true,
  194. //border: false,
  195. //height: 280,
  196. //width: 460,
  197. items: [foldersConfig, noteConfig],
  198. //bbar: []
  199. });
  200. }
  201. viewport.add(win);
  202. viewport.doLayout();
  203. //win.show();
  204. //win.maximize();
  205. syncNotesFromDir();
  206. var editor = Ext.ComponentMgr.get("noteEditor");
  207. editor.on("sync", debounce(function (e, html) {
  208. console.log("Editor sync. Selected = " + selectedNoteId);
  209. if (!selectedNoteId) {
  210. return;
  211. }
  212. var note = notesStore.getById(selectedNoteId);
  213. fs.upload(note.data.id, "text/plain", html);
  214. //note.beginEdit();
  215. //note.set("body", html);
  216. //note.endEdit();
  217. }, 750));
  218. }