# User-defined Vivide Scripts

<span style="color: red; font-weight: bold;">CAUTION!</span>
Press the button to delete the corresponding file:

<script>
let scriptFolder = lively4url + '/src/client/vivide/scripts/';

(async () => {
  let autoGenerated = /[0-9abcdef]{8}-[0-9abcdef]{4}-[0-9abcdef]{4}-[0-9abcdef]{4}-[0-9abcdef]{12}\.js$/;
  let deleteFunctions = [];
  let folder = JSON.parse(await lively.files.statFile(scriptFolder));
  let fileNames = folder.contents
    .filter(({ type }) => type === 'file')
    .map(({ name }) => name)
    .filter(name => autoGenerated.test(name));
  let buttonList = fileNames.map(name => {
    let urlString = scriptFolder + name;
    let del = async evt => {
      let delResponse = await fetch(urlString, { method: 'DELETE' });
      if (delResponse.status === 200) {
        lively.success(`deleted file ${name}`);
        button.remove();
        deleteFunctions = deleteFunctions.filter(df => df !== del);
      } else {
        lively.notify("could not properly delete " + urlString, (await delResponse.text()));
      }
    }
    deleteFunctions.push(del);
    let button = <button click={del}><span style="color: red; font-weight: bold;">Delete:</span> {urlString}</button>;

    return button;
  });
  
  let deleteAllScriptsButton = <button click={async evt => {
    await Promise.all(deleteFunctions.map(f => f()));
    lively.success('removed all scripts');
  }}><span style="color: red; font-weight: bold;">DELETE ALL SCRIPTS!</span></button>;

  return <div>
    {deleteAllScriptsButton}
    <div>{...buttonList}</div>
  </div>;
})();
</script>