SmartMessage for calving-completed &

SketchSystems.spec

SmartMessage for calving-completed &
  Calves
    set calves to 1 -> 1 calf
    set calves to 2 -> 2 calves
    set calves to 3 -> 3 calves
    1 calf*
    2 calves
      set both -> Both
      set one-another -> One - another
      Both
      One - another
    3 calves
      set all -> All
      set two-another -> Two - another
      set one-and-another -> One - and - another
      All
      Two - another
      One - and - another

SketchSystems_prototype.js

function render(model){
  return (
    <p>
      {style()}
      &#x23;81 Nazlı completed calving at {} 
      <em title="HourPopup">18:55</em> giving birth to {}
      <NumberOfCalves model={model}/> {}
      in an <em>assisted<ChoicePopup choices={["Easy", "Difficult", "Assisted"]} selected="Assisted"/></em> delivery. {}
      There were <em title="CheckPopup">no complications</em>
    </p>
  );
}

function NumberOfCalves({model}) {
  switch (true) {
    case model.states["1 calf"].is_active: return <One model={model}/>;
    case model.states["2 calves"].is_active: return <Two model={model}/>;
    case model.states["3 calves"].is_active: return <Three model={model}/>;
  }
}

function One({model}) {
  return (
    <span>
      <em>one<CalfCountPopup/></em> {}
      <em>healthy<CalfHealthPopup/></em> 
      <em>male<GenderPopup selected="Male"/></em> calf
    </span>
  );  
}

function TwoCalfConfig({model}) {
  switch (true) {
    case model.states["Both"].is_active: return <Both model={model}/>;
    case model.states["One - another"].is_active: return <OneAnother model={model}/>;
  }
}

function Two({model}) {
  return (
    <span>
      <em>two<CalfCountPopup selected="Two"/></em> calves, {}
      <TwoCalfConfig model={model}/>
    </span>
  );  
}
function Both({model}) {
  return (
    <>
      <em>both<ChoicePopup choices={["Both","One"]} selected="Both"/></em> {}
      <em title="ChoicePopup">healthy</em> {}
      <em>females<GenderPopup/></em>, 
    </>
  );
}

function OneAnother({model}) {
  return (
    <>
      <em>one<ChoicePopup choices={["Both","One"]} selected="One"/></em> {}
      <em title="ChoicePopup">healthy</em> {}
      <em>female<GenderPopup/></em> {}
      and another <em title="ChoicePopup">healthy</em> {}
      <em>male<GenderPopup selected="Male"/></em>, 
    </>
  );
}

function ThreeCalfConfig({model}) {
  switch (true) {
    case model.states["All"].is_active: return <All model={model}/>;
    case model.states["Two - another"].is_active: return <TwoAnother model={model}/>;
    case model.states["One - and - another"].is_active: return <OneAndAnother model={model}/>;
  }
}
function Three({model}) {
  return (
    <span>
      <em>three<CalfCountPopup selected="Three"/></em> calves, {}
      <ThreeCalfConfig model={model}/>
    </span>
  );  
}
function All({model}) {
  return (
    <>
      <em title="ChoicePopup">all</em> {}
      <em title="ChoicePopup">healthy</em> {}
      <em>males<GenderPopup selected="Male"/></em>, 
    </>
  );
}
function TwoAnother({model}) {
  return (
    <>
      <em title="ChoicePopup">two</em> <em title="ChoicePopup">healthy</em> <em title="ChoicePopup">females</em> {}
      and another <em title="ChoicePopup">dead</em> <em title="ChoicePopup">female</em>, 
    </>
  );
}
function OneAndAnother({model}) {
  return (
    <>
      <em title="ChoicePopup">one</em> <em title="ChoicePopup">healthy</em> <em title="ChoicePopup">female</em>, {}
      one <em title="ChoicePopup">healthy</em> <em title="ChoicePopup">male</em> {}
      and another <em title="ChoicePopup">dead</em> <em title="ChoicePopup">male</em>, 
    </>
  );
}

          
function style() {
  return (
    <style>{`
      p {
        font-family: "Open Sans", sans-serif;
        margin: 1rem;
      }
      em {
        color: blue;
        font-style: normal;
        position: relative;
      }

      em:before {
        content: "‹";
        color: grey;
      }
      em:after {
        content: "›";
        color: grey;
      }

      div.ChoicePopup {
        position: absolute;
        background-color: darkblue;
        color: white;
        padding: 1rem;
        visibility: hidden;
        left: 0;
        z-index: 100;
      }
      div.ChoicePopup .selected { font-weight: bold; }
      em:hover div { visibility: visible; }
   `}</style>
  );
}

function ChoicePopup({choices = [], selected}) {
  return <div className="ChoicePopup">
    {choices.map(choice => <div className={choice === selected ? "selected" : ""}>{choice}</div>)}
  </div>;
}
function GenderPopup({selected = "Female"}) {
  return <ChoicePopup choices={["Female", "Male"]} selected={selected}/>;
}
function CalfHealthPopup({selected = "Healthy"}) {
  return <ChoicePopup choices={["Healthy", "Unhealthy", "Dead"]} selected={selected}/>;
}
function CalfCountPopup({selected = "One"}) {
  return <ChoicePopup choices={["One", "Two", "Three"]} selected={selected}/>;
}