1#@!#!123s

��JFIF�� 1#@!#!123s
: / var / www / html / projects / familytree_ / familytree /
Filename : create-tree.js
back
import f3 from './assets/src/index.js'
import Edit from './elements/Edit.js'
import ReactiveTextarea from "./elements/ReactiveTextarea.js"
import ReactiveVanila from "./elements/ReactiveVanila.js"
import ReactiveVue from "./elements/ReactiveVue.js"
import ReactiveReact from "./elements/ReactiveReact.js"
import Display from "./elements/Display.js"
import {Form} from "./assets/src/view/elements/Form.js"


(async () => {
  const cont = document.querySelector("#FamilyChart"),
    card_dim = {w:220,h:70,text_x:75,text_y:15,img_w:60,img_h:60,img_x:5,img_y:5},
    card_display = cardDisplay(),
    card_edit = cardEditParams(),
    store = f3.createStore({
      data: firstNode(),
      node_separation: 250,
      level_separation: 150
    }),
    view = f3.d3AnimationView({
      store,
      cont: document.querySelector("#FamilyChart"),
      card_edit,
    }),
    Card = f3.elements.Card({
      store,
      svg: view.svg,
      card_dim,
      card_display,
      mini_tree: true,
      link_break: false,
      cardEditForm,
      addRelative: f3.handlers.AddRelative({store, cont, card_dim, cardEditForm, labels: {mother: 'Add mother'}}),
    }),
    edit = Edit('#edit_cont', card_edit),
    display = Display('#display_cont', store, card_display),
    reactiveTextArea = ReactiveTextarea(data => {store.update.data(data); store.update.tree()}, "#textarea", "#update_btn"),
    reactiveVanila = ReactiveVanila( "#ReactiveVanila"),
    reactiveVue = ReactiveVue( "#ReactiveVue"),
    reactiveReact = ReactiveReact( "#ReactiveReact"),
    onUpdate = (props) => {
      view.update(props || {});
      reactiveTextArea.update(store.getData());
      reactiveVanila.update(store, card_display);
      reactiveVue.update(store, card_display);
      reactiveReact.update(store, card_display);
    }

  view.setCard(Card)
  fetch('./elements/family-chart.css').then(r => r.text()).then(text => document.querySelector('#family-chart-css').innerText = text)
  store.setOnUpdate(onUpdate)
  store.update.tree({initial: true})

  //
  await fetch("http://167.71.228.152/projects/familytree/get_tree.php", {
    method: "GET"
  })
  .then(function(response) {
    if (response.ok) {
      return response.text();
    } else {        
      console.error("Error uploading ");
    }
  })
  .then(function(responseText) {
    console.log("Response from server:", JSON.parse(responseText));
    var textbox = document.querySelector('textarea[id="textarea"]');    
    if(responseText != 'null')      
      textbox.value = responseText;
    document.getElementById("update_btn").click(); 
    //return JSON.parse(responseText);
  })
  .catch(function(error) {
    console.error("Error uploading:", error);
  });
  //

  function cardEditForm(props) {
    const postSubmit = props.postSubmit;
    props.postSubmit = (ps_props) => {postSubmit(ps_props)}
    const el = document.querySelector('#form_modal'),
      modal = M.Modal.getInstance(el),
      edit = {el, open:()=>modal.open(), close:()=>modal.close()}
    Form({...props, card_edit, card_display, edit})
  }
})();

function firstNode() {

  /*await fetch("http://localhost/familytree/get_tree.php", {
    method: "GET"
  })
  .then(function(response) {
    if (response.ok) {
      return response.text();
    } else {        
      console.error("Error uploading ");
    }
  })
  .then(function(responseText) {
    console.log("Response from server:", JSON.parse(responseText));
    return JSON.parse(responseText);
    //return [{id: "0",rels: {},data: {"first name": "Rajasekar","last name": "Selvaraj","birthday": "","avatar": "https://static8.depositphotos.com/1009634/988/v/950/depositphotos_9883921-stock-illustration-no-user-profile-picture.jpg","gender": "M","image": {} }}]
  })
  .catch(function(error) {
    console.error("Error uploading:", error);
  });
*/
  return [{id: '0', rels: {}, data: {'first name': 'Name', 'last name': "Lastname", 'birthday': '1990-01-01',
      avatar: 'https://static8.depositphotos.com/1009634/988/v/950/depositphotos_9883921-stock-illustration-no-user-profile-picture.jpg', "gender": "M","new":"A"}}]

}

function cardEditParams() {
  return [
    
    {type: 'text', placeholder: 'avatar', key: 'avatar'},
    {type: 'text', placeholder: 'first name', key: 'first name'},
    {type: 'text', placeholder: 'last name', key: 'last name'},
    {type: 'text', placeholder: 'occupation', key: 'occupation'},
    {type: 'date', placeholder: 'birthday', key: 'birthday'},
    {type: 'date', placeholder: 'deathday', key: 'deathday'},
    {type: 'file', placeholder: 'image', key: 'image'},
    {type: 'hidden', placeholder: '', key: 'new'},    
    {type: 'hidden', placeholder: '', key: 'owner'},
  ]
}

function cardDisplay() {
  const d1 = d => `${d.data['first name'] || ''} ${d.data['last name'] || ''}  ${d.data['deathday'] || ''?'(D)':'(A)'}`,
    d2 = d => `${d.data['birthday'] || ''}`
  d1.create_form = "{first name} {last name} {deathday}"
  d2.create_form = "{birthday}"

  return [d1, d2]
}