Implement JSON interface

lib/Event.d.ts

@@ -10,6 +10,10 @@ export interface IEvent {
     bgColor?: string;
     content?: string;
 }
+export declare type EventJSON = Omit<IEvent, "end" | "start"> & {
+    start: string;
+    end: string;
+};
 export declare class Event implements IEvent, Selectable {
     id: string;
     start: Date;
@@ -28,5 +32,7 @@ export declare class Event implements IEvent, Selectable {
     get startStr(): string;
     get endStr(): string;
     static toTimeSlot(obj: IEvent): Event;
+    toJSON(): EventJSON;
+    static fromJSON(input: string | EventJSON): Event;
 }
 export default Event;

lib/Event.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Event = void 0;
+const dayjs_1 = __importDefault(require("dayjs"));
 class Event {
     constructor(obj) {
         this.id = obj.id;
@@ -31,6 +35,65 @@ class Event {
             return new Event(obj);
         }
     }
+    toJSON() {
+        const output = {
+            id: this.id,
+            start: this.startStr,
+            end: this.startStr,
+            title: this.title,
+            ressourceId: this.ressourceId,
+            editable: this.editable,
+            ressourceEditable: this.ressourceEditable,
+            bgColor: this.bgColor,
+            content: this.content
+        };
+        if (this.bgColor) {
+            output.bgColor = this.bgColor;
+        }
+        if (this.content) {
+            output.content = this.content;
+        }
+        return output;
+    }
+    static fromJSON(input) {
+        let obj;
+        if (typeof input == "string") {
+            obj = JSON.parse(input);
+        }
+        else {
+            obj = input;
+        }
+        const start = dayjs_1.default(obj.start);
+        const end = dayjs_1.default(obj.end);
+        if (start.isValid()) {
+            throw new Error(`Error during the import of the Event '${obj.id}': Invalid starting date`);
+        }
+        else {
+            if (end.isValid()) {
+                throw new Error(`Error during the import of the Event '${obj.id}': Invalid ending date`);
+            }
+            else {
+                const iEvent = {
+                    id: obj.id,
+                    start: start.toDate(),
+                    end: end.toDate(),
+                    title: obj.title,
+                    ressourceId: obj.ressourceId,
+                    editable: obj.editable,
+                    ressourceEditable: obj.ressourceEditable,
+                    bgColor: obj.bgColor,
+                    content: obj.content
+                };
+                if (obj.bgColor) {
+                    iEvent.bgColor = obj.bgColor;
+                }
+                if (obj.content) {
+                    iEvent.content = obj.content;
+                }
+                return new Event(iEvent);
+            }
+        }
+    }
 }
 exports.Event = Event;
 exports.default = Event;

lib/Ressource.d.ts

@@ -11,6 +11,7 @@ export interface IRessource {
     eventRessourceEditable?: boolean;
     eventBgColor?: string;
 }
+export declare type RessourceJSON = Omit<IRessource, "parent" | "children">;
 export declare class Ressource implements IRessource, Selectable {
     id: string;
     title: string;
@@ -28,7 +29,7 @@ export declare class Ressource implements IRessource, Selectable {
     get show(): boolean;
     descendantOf(potentialParent: IRessource): boolean;
     toPlainObject(parent: IRessource | undefined): IRessource;
-    toJSON(): IRessource;
+    toJSON(): RessourceJSON;
     static toRessource(obj: IRessource): Ressource;
 }
 export default Ressource;

lib/Ressource.js

@@ -46,7 +46,7 @@ class Ressource {
             id: this.id,
             title: this.title,
             collapseChildren: this.collapseChildren,
-            parent: this.parent,
+            parentId: this.parentId,
             height: this.height,
             eventEditable: this.eventEditable,
             eventRessourceEditable: this.eventRessourceEditable,

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "jc-timeline",
-  "version": "0.1.0",
+  "version": "0.1.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -12230,8 +12230,7 @@
     "prettier": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
-      "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==",
-      "dev": true
+      "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q=="
     },
     "pretty-error": {
       "version": "2.1.2",

package.json

@@ -51,6 +51,7 @@
   "dependencies": {
     "dayjs": "^1.10.4",
     "lit-element": "^2.4.0",
+    "prettier": "^2.2.1",
     "simplebar": "^5.3.0"
   }
 }

src/Event.ts

@@ -1,5 +1,5 @@
 
-import { TemplateResult } from 'lit-html';
+import dayjs from 'dayjs';
 import Selectable from './utils/selectable';
 
 export interface IEvent{
@@ -13,6 +13,10 @@ export interface IEvent{
     bgColor?:string,
     content?:string
 }
+export type EventJSON = Omit<IEvent,"end" |"start"> & {
+    start:string
+    end: string
+}
 export class Event implements IEvent, Selectable{
     id:string
     start:Date
@@ -58,6 +62,63 @@ export class Event implements IEvent, Selectable{
             return new Event(obj);
         }
     }
+    toJSON():EventJSON{
+        const output:EventJSON =  {
+            id:this.id,
+            start:this.startStr,
+            end:this.startStr,
+            title:this.title,
+            ressourceId:this.ressourceId,
+            editable:this.editable,
+            ressourceEditable:this.ressourceEditable,
+            bgColor:this.bgColor,
+            content:this.content
+        }
+        if (this.bgColor){
+            output.bgColor=this.bgColor;
+        }
+        if (this.content){
+            output.content=this.content;
+        }
+        return output
+    }
+    static fromJSON(input:string|EventJSON):Event{
+        let obj:EventJSON
+        if (typeof input == "string"){ 
+            obj = JSON.parse(input)
+        }else{
+            obj = input as EventJSON
+        }
+
+        const start = dayjs(obj.start)
+        const end = dayjs(obj.end)
+        if(start.isValid()){
+            throw new Error(`Error during the import of the Event '${obj.id}': Invalid starting date`)
+        }else{
+        if(end.isValid()){
+            throw new Error(`Error during the import of the Event '${obj.id}': Invalid ending date`)
+        }else{
+            
+        const iEvent:IEvent ={
+            id:obj.id,
+            start:start.toDate(),
+            end:end.toDate(),
+            title:obj.title,
+            ressourceId:obj.ressourceId,
+            editable:obj.editable,
+            ressourceEditable:obj.ressourceEditable,
+            bgColor:obj.bgColor,
+            content:obj.content
+        }
+        if (obj.bgColor){
+            iEvent.bgColor=obj.bgColor;
+        }
+        if (obj.content){
+            iEvent.content=obj.content;
+        }
+        return new Event(iEvent)
+    }
+    }}
 }
 
 export default Event

src/Ressource.ts

@@ -13,6 +13,8 @@ export interface IRessource{
     eventBgColor?:string
 }
 
+export type RessourceJSON = Omit<IRessource,"parent" | "children">
+
 export class Ressource implements IRessource,Selectable{
     id:string
     title:string
@@ -62,12 +64,12 @@ export class Ressource implements IRessource,Selectable{
             parent: parent
         }
     }
-    toJSON():IRessource{
+    toJSON():RessourceJSON{
         return {
             id:this.id,
             title:this.title,
             collapseChildren:this.collapseChildren,
-            parent : this.parent,
+            parentId : this.parentId,
             height : this.height,
             eventEditable:this.eventEditable,
             eventRessourceEditable:this.eventRessourceEditable,