# Poty

SketchSystems.spec

 # Poty

LoggedOut*
  adminLogin -> AdminLoggedIn
  privateLawyerLogin -> PrivateLawyerLoggedIn
  privatePersonLogin -> PrivatePersonLoggedIn
  companyCustomerLogin -> CompanyCustomerLoggedIn
  companyAdminLogin -> CompanyAdminLoggedIn
  companySalesLogin -> CompanySalesLoggedIn
  companyLawyerLogin -> CompanyLawyerLoggedIn
  receiveContract -> ReceiveContract
  createUser -> CreateUser

CreateUser
  done -> VerifyUser

VerifyUser
  done -> LoggedOut

AdminLoggedIn
  AdminDashboard
  
  EditCompanyProfileAsAdmin
    done -> AdminLoggedIn
  AddCompany
    done -> AdminLoggedIn
  ViewCompanies
    done -> AdminLoggedIn

  editCompanyProfile -> EditCompanyProfileAsAdmin
  addCompany -> AddCompany
  viewCompanies -> ViewCompanies
  done -> LoggedOut

CompanyAdminLoggedIn
  CompanyAdminDashboard
  EditCompanyProfile
    done -> CompanyAdminLoggedIn
  AddCompanyLawyerProfileAsCompanyAdmin
    done -> CompanyAdminLoggedIn
  EditCompanyLawyerProfileAsCompanyAdmin
    done -> CompanyAdminLoggedIn
  AddCompanySalesProfilesCompanyAdmin
    done -> CompanyAdminLoggedIn
  EditCompanySalesProfilesCompanyAdmin
    done -> CompanyAdminLoggedIn
  AddCompanyCustomerProfileAsCompanyAdmin
    done -> CompanyAdminLoggedIn
  EditCompanyCustomerProfileAsCompanyAdmin
    done -> CompanyAdminLoggedIn
  
  editCompanyProfile -> EditCompanyProfile
  addCompanyLawyerProfile -> AddCompanyLawyerProfileAsCompanyAdmin
  editCompanyLawyerProfile -> EditCompanyLawyerProfileAsCompanyAdmin
  addCompanySalesProfiles -> AddCompanySalesProfilesCompanyAdmin
  editCompanySalesProfiles -> EditCompanySalesProfilesCompanyAdmin
  addCompanyCustomerProfile -> AddCompanyCustomerProfileAsCompanyAdmin
  editCompanyCustomerProfile -> EditCompanyCustomerProfileAsCompanyAdmin
  done -> LoggedOut
  
PrivateLawyerLoggedIn
  PrivateLawyerDashboard
  EditPrivateLawyerProfile
    done -> PrivateLawyerLoggedIn
  
  editPrivateLawyerProfile -> EditPrivateLawyerProfile
  createContract -> CreateContract
  done -> LoggedOut

CompanyLawyerLoggedIn
  CompanyLawyerDashboard
  EditCompanyLawyerProfile
    done -> AdminLoggedIn
  
  editCompanyLawyerProfile -> EditCompanyLawyerProfile
  createContract -> CreateContract
  done -> LoggedOut
  
CompanySalesLoggedIn
  CompanySalesDashboard
  EditCompanySalesProfile  
    done -> AdminLoggedIn
  
  editCompanySalesProfile -> EditCompanySalesProfile
  useContract -> UseContract
  signContract -> SignContract
  receiveContract -> ReceiveContract
  sendContract -> SendContract
  done -> LoggedOut
  
PrivatePersonLoggedIn
  PrivatePersonDashboard
  EditPrivatePersonProfile
    done -> AdminLoggedIn
  
  editPrivatePersonProfile -> EditPrivatePersonProfile
  signContract -> SignContract
  receiveContract -> ReceiveContract
  sendContract -> SendContract
  done -> LoggedOut

CompanyCustomerLoggedIn
  CompanyCustomerDashboard
  EditCompanyCustomerProfile
    done -> AdminLoggedIn
  
  editCompanyCustomerProfile -> EditCompanyCustomerProfile
  signContract -> SignContract
  receiveContract -> ReceiveContract
  done -> LoggedOut

CreateContract
  done -> EditContract

ViewClause
  done -> ListClauses

ListClauses

AddClause
  done -> ListClauses

EditContract
  done -> ViewContract  
  addClause -> AddClause

UseContract
  done -> ViewContract
  
SignContract
  done -> ViewContract
  
SendContract
  done -> AdminLoggedIn
  
ReceiveContract
  done -> ViewContract
  
ViewContract

SketchSystems_prototype.js

function render(model){
  var input_value = "";
  
  class Button extends React.Component {
  
    constructor(props) {
      super(props);
      this.handleClick = this.handleClick.bind(this);
    }
    
    handleClick() { model.emit(input_value + this.props.action); }

    render() {
      const activeStates = JSON.stringify(model.active_states.map(s => s.name));
      const toggle = activeStates.toLowerCase().includes(this.props.action + " on");
      var name;
      if (this.props.name) {name = this.props.name} else {name = this.props.action};
      
      return <button onClick={this.handleClick} 
                     style={{background: toggle ? "linear-gradient(#d6d6d6, #d2d2d2)" : "linear-gradient(#f7f7f7, #ededed)", border: "none", padding: "8px", margin: "1px", color: "#313131", outline: "none", fontFamily: "Times, Times New Roman, serif", fontWeight: "Bold", boxShadow: toggle ? "inset 0 0 8px rgba(0,0,0,0.1)" : "none", textDecoration: this.props.action === "underline" ? "underline" : "none", fontStyle: this.props.action === "italic" ? "italic" : "normal", fontSize: "18px" }}>
                     {name}
             </button>
    }
  }
  
  let active_state = model.active_states[0].name;

  if (active_state == 'LoggedOut') {
    return <div>
             <h1 style={{color: "darkBlue"}}>The current state is: {active_state}</h1>
             <input
               placeholder='Enter a username …'
               onChange={(evt) => { input_value = evt.target.value; } }
               style={{backgroundColor: 'papayaWhip', border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}} 
             />
             <Button name="Log In"  action="Login"   />
             <Button  name="Cancel"   action="done" />
             <hr />
             <p>Entre one of the following users:</p>
               <Button action="adminLogin" name="admin" />
               <br/>
               <Button action="privateLawyerLogin" name="privateLawyer" />
               <Button action="privatePersonLogin" name="privatePerson" />
               <br/>
               <Button action="companyAdminLogin" name="companyAdmin" />
               <Button action="companySalesLogin" name="companySales" />
               <Button action="companyLawyerLogin" name="companyLawyer" />
               <Button action="companyCustomerLogin" name="companyCustomer" />
            </div>;
  }
  
  if (active_state == 'AdminDashboard') {
    return <div>
             <h1 style={{color: "darkBlue"}}>The current state is: {active_state}</h1>
             <ul>
               <li><Button action="editCompanyProfile" /></li>
               <li><Button action="addCompany" /></li>
               <li><Button action="viewCompanies" /></li>
             </ul>
             <Button name="Logout" action="done" />
            </div>;
  }
  
  return <div>
           <h1 style={{color: "darkBlue"}}>The current state is: {active_state}</h1>
           <Button name="&lt; back" action="done" />
          </div>;
}