Skip to content

options

dencelman1 edited this page Feb 11, 2024 · 5 revisions
// Copy paste for try;
// * Use have to replace LocalBackend on your backend with fetch(), new WebSocket() etc;

import ReactDOM from 'react-dom/client';
import AnyBack from 'anyback-react';



var cachedToken = "MY_TOKEN"
var errorMessage = "Error: invalid password"

// Like your CRUD database on backend
var data = [];

var getEntries = (dbName, tableName) => {
    var db, table;
    
    db =
        data
        .filter(currentDb => currentDb?.name === dbName)
        [0]

    
    !db && data.push(
        db = {
            name: dbName,
            tables: [],
        }
    )
    
    table =
        db.tables
        .filter(currentTable => currentTable?.name === tableName)
        [0]
    
    !table && db.tables.push(
        table = {
            name: tableName,
            entries: [],
        }
    )

    return table.entries;
}

function filterByWhere(entries, where) {
    
    return (
        entries
        .filter(e => {
            if (!where)
                return true;

            for (var [key, value] of Object.entries(where)) {
                if (e[key] !== value)
                    return false;
            }
            return true;
        })
    )
}

function create(d, t, value) {
    getEntries(d, t)
    .push(value)
}

function read(d, t, where) {
    
    return (
        filterByWhere(
            getEntries(d, t),
            where,
        )
    )
}

function delete_(d, t, where) {
    var entries = getEntries(d, t)
    
    filterByWhere(entries, where)

    .map(e => entries.indexOf(e))
    .forEach(eIndex => {
        entries.splice(eIndex, 1);
    })

    return true
}

function update(
    d, t, value, where,
) {
    
    for (var e of filterByWhere(getEntries(d, t), where)) {
        for (var [key, updateValue] of Object.entries(value)) {
            if ( !( key in e ) )
                return false;
            
            e[key] = updateValue;
        }
    }

    return true

}



var LocalBackend = {
  create,
  read,
  delete_,
  update,
  generateId: () => ( new Date().getTime() ),

}


// Your settings options for frontend admin panel
var options = {
  authTitle: 'Log in',
  
  defaultValue: {

    offset: 0,
    limit: 20,

    searchDebounceDelay: 100,
    currentEntryKey: "id",
    
  },

  border: {

    reqDelayMs: 1000,
    maxCreateManyEntry: 20,

  },

  getDatabases() {

    var databases = (
      [
        {
          name: 'dencelman.com',

          extra: {
            size: 15_000, // bytes
            isEmpty: false,

            anyData: 'fuck_you',
          },
          
          tables: [
            {
              name: 'users',
              
              extra: {
                count: 150,
                hello: 'world',
                
              },

              fields: [

                {
                  name: 'name',
                  type: 'string',
                  defaultValue: '',
                },

                {
                  name: 'age',
                  type: 'number',
                  defaultValue: 60,
                },

                {
                  name: 'is_full_year',
                  type: 'boolean',
                  defaultValue: false,
                },
                

              ],
            },

            {
              name: 'posts',
              extra: {
                count: 10050
              },

              fields: [

                {
                  name: 'title',
                  type: 'string',
                  defaultValue: '',
                },
                {
                  name: 'description',
                  type: 'string',
                  defaultValue: '',
                },


              ],
            },
          ]
        },
      ]
    )
    
    return databases;
  },

  read(    
    databaseName,
    tableName,

    offset,
    limit,

    where,
  ) {
    
    return (new Promise((res, rej) => {
      setTimeout(() => {
        
        
          res(
            LocalBackend.read(databaseName, tableName, where)
            .slice(offset, ( offset + limit ))
          )
          
        

      }, 1000)
    }))

  },
  update(
    databaseName,
    tableName,

    value,
    where,
  ) {
    
    return (
      LocalBackend
      .update(databaseName, tableName, value, where)
    )

  },

  delete (
    databaseName,
    tableName,

    where,
  ) {
    
    var response = {
      success:
        LocalBackend.delete_(databaseName, tableName, where),
    }

    return response.success
  },

  create(
    databaseName,
    tableName,

    value,
  ) {
    

    return new Promise((res, rej) => {
      LocalBackend.create(databaseName, tableName, {
        id: LocalBackend.generateId(),
        ...value,
      });
      
      var response = {
        success: true,
      }
      
      res(response.success)
    });


  },

  checkAuth(
    result, // token
  ) { // Promise<boolean> or boolean возвращает
    return new Promise((res) => res(result === cachedToken))
    // 1 true
      // pass to admin panel
    
    // 2 false
      // delete token from cookie
      // authed = false
      // go to auth form

    // 3 Promise -> true | false 
      // {SAME}

    // 4 Promise -> error
      // .catch(error => {
      //  return false
      // })
    
  },

  auth(login, password) {
    // return true

    // 1
    // return new Promise((res, rej) => res(true))
    // return "myToken"
    // return (login === 'Masha' && password === '1234')
    
    // 2
    // return new Promise((res, rej) => {
    //   res(true)
    // })

    // 3
    // return new Promise((res, rej) => {
    //   res("AUTH_TOKEN")
    // })

    return new Promise((res, rej) => {

      var authed = (login === "Masha" && password === "1234")
      if (authed)
        return res(cachedToken)

      rej(errorMessage)
    })

  },

  onLogout() {
    console.log("logouted")
  },

  
  analEnv: {

    count(where) {

      return new Promise((res, rej) => {
        res(where?.isAdmin ? 15_000: 1_000_000);
        
      })
      
    },

  }
}


ReactDOM.createRoot(
  document.querySelector('#root')
)
.render(
  <AnyBack.AdminPanel
    options={options}
  />
)
Clone this wiki locally